导航条设计 html+CSS

最新推荐文章于 2024-05-19 09:58:49 发布

老张谋

最新推荐文章于 2024-05-19 09:58:49 发布

阅读量1.9k

点赞数 5

本文链接：https://blog.csdn.net/wgf5845201314/article/details/88017663

版权

前端技术专栏收录该内容

111 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>153-绝对定位-子绝父相</title>
    <style>
        <!--步骤
        1. 写出相应的ul、li标签，并添加相应文字；
        2. 设置ul标签的宽度、高度、水平居中，margin-top；
        3. 去除默认样式（去除margin、padding、和ul、li的 小圆点）；
        4. 所有li标签左浮动；
         5. 设置每个li标签的宽度、高度、背景、字体等
        -->
       *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
            width: 800px;
            height: 50px;
            margin: 0 auto;
            margin-top: 100px;
            background-color: red;
            padding: 0px;
        }
        ul li{
            float: left;
            /*设置每个li标签的宽度*/
            width: 100px;
            height: 50px;
            /*垂直居中*/
            line-height: 50px;
            /*水平居中*/
            text-align: center;
            background-color: #ccc;
            /*用第三种方法时，使用下句*/
            position: relative;
        }
        ul li:nth-of-type(4){
            background-color: yellow;
        }
     /*
        !*1、相对定位实现*!
        !*弊端：
        相对定位不会脱离标准流，会继续在标准流中占用一份空间，所以不利于布局界面*!
        ul li img{
            position: relative;
            /可在浏览器中调试*!
            left: -42px;
            top: -18px;
        }
        */

     /*
         !*2、绝对定位
         弊端：默认情况下，绝对定位的元素会议body为参考点，所以会随浏览器的宽度和高度的变化而变化*!
          ul li img{
            position: absolute;
              !*浏览器调试位置参数*!
            left:591px;
            top: 88px;
        }
        */

        /*3. 绝对定位和相对定位结合使用
        记住秘诀：子绝父相
        子元素用绝对定位，父元素用相对定位
        优势：（1）不会占用标准流中位置
              （2）不会随屏幕的变化而变化
        */
        ul li img{
            position: absolute;
            left:40px;
            top: -10px;
        }
    </style>
</head>
<body>

    <ul>
        <li>服装城</li>
        <li>美妆馆</li>
        <li>京东超市</li>
        <li>
            全球购
            <!--HOT图片-->
            <img src="l5.png" alt="">
        </li>
        <li>闪购</li>
        <li>团购</li>
        <li>拍卖</li>
        <li>金融</li>
    </ul>

</body>
</html>

但是，第三种方法，存在以下弊端：

当父元素的大小变化时，子元素的位置就不是想要的的位置，不再水平居中（注意，子元素的位置是相对父元素的位置而定义的）

例如：设置li标签的宽度为150px是，结果如下图：

4. 绝对定位水平居中

为了解决第三种方法的弊端，即使得子元素永远水平居中，不论li标签的宽度如何变化都居中
将代码改为如下：

    ul li img{
            position: absolute;
            left: 50%;
            /*margin-left的值为img的宽度的一半，注意为   负号  */
            margin-left:-10.5px;
            top: -10px;
        }

（1）设置绝对定位的元素的left:50%;

(2) 设置绝对定位的元素的margin-left: - 元素宽度的一半；

老张谋

关注

5
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
导航条设计 html+CSS

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;153-绝对定位-子绝父相&lt;/title&gt; &lt;style&gt; &lt;!--步骤
复制链接

扫一扫