HTML子绝父相实例分析

本篇内容主要讲解“HTML子绝父相实例分析”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“HTML子绝父相实例分析”吧!

公司主营业务：成都做网站、网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联建站是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联建站推出逊克免费做网站回馈大家。

一、子绝父相

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>

HTML子绝父相实例分析

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

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

ul li img{

            position:absolute;

            left: 900px;

            top: 1px;

            width: 20px;

            height: 16px;

    }

HTML子绝父相实例分析

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

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;

    }

到此，相信大家对“HTML子绝父相实例分析”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

网站栏目：HTML子绝父相实例分析
URL地址：https://www.cdcxhl.com/article30/gdgpso.html

成都网站建设公司_创新互联，为您提供品牌网站建设、商城网站、网站设计、移动网站建设、搜索引擎优化、标签优化

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容