HTML连载59-子绝父相

2019-12-27 16:00:33来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

HTML连载59-子绝父相

一、子绝父相

1.只使用相对定位,对图片的位置进行精准定位。

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        ul{

            list-style:none;

            width:800px;

            height:50px;

            background-color: red;

            margin:0 auto;

        }

        ul li{

            float:left;

            width:100px;

            height: 50px;

            text-align:center;

            background-color: yellow;

            line-height: 50px;

        }

        ul li:nth-of-type(4){

            /*这里复习了同类标签选择第几个进行设置它的样式*/

            background-color: blue;

        }

        ul li img{

            position:relative;

            left: -30px;

            top: -14px;

            width: 20px;

            height: 16px;

            /*这里可以先写个大概的数字,然后利用谷歌开发者定位进行滚动数据调节*/

           

        }

</style>

</head>

<body>

<ul>

    <li>拍卖金融</li>

    <li>美妆馆</li>

    <li>京东超市</li>

    <li>

        全球购<img src="bear.jpg">

    </li>

    <li>闪购</li>

    <li>团购</li>

    <li>拍卖</li>

    <li></li>

</ul>

</body>

</html>

 

这种方式的的缺点:可以看到虽然利用相对定位进行了数据调节来达到让图片定位的效果,但是由于相对定位是在标准流的基础上进行调节,所以原来图片的位置(也就是全球购后面的那块区域)依然是被占用着的。

2.下面只使用绝对定位来进行试验。

 

        ul li img{

            position:absolute;

            left: 900px;

            top: 1px;

            width: 20px;

            height: 16px;

    }

 

?这种方式的缺点:上次连载说到,绝对定位会以首屏来进行定位,因此当改变网页大小的时候,将会造成变形,定位到了?不合理的地方。

3.因此要同时运用绝对定位和相对定位进行编排才最合理

 

        ul li:nth-of-type(4){

            /*这里复习了同类标签选择第几个进行设置它的样式*/

            background-color: blue;

            position:relative;

        }

        ul li img{

            /*介绍一个方法:子绝父相,即子元素使用绝对定位,父元素使用相对定位*/

            position:absolute;

            left: 41px;

            top: 1px;

            width: 20px;

            height: 16px;

    }

三、源码:

D153_SubAbsoluteFathRelative.html

地址:

https://github.com/ruigege66/HTML_learning/blob/master/D153_SubAbsoluteFathRelative.html?

2.CSDN:https://blog.csdn.net/weixin_44630050

3.博客园:https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号:傅里叶变换,个人账号,仅用于技术交流,后台回复“礼包”获取Java大数据学习视频礼包

 


原文链接:https://www.cnblogs.com/ruigege0000/p/12105221.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:HTML5

下一篇:Web基础了解版08-JSTL