css导航条粘滞定位 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height:3000px;
        }

        .nav{
            width:1213px;
            height:48px;
            background-color: #c67ace;
            margin:100px auto;/* 上边距100px 其余auto */
            /* 
                粘滞定位
                    - 当元素的position属性设置为sticky时则开启了元素的粘滞定位
                    - 粘滞定位和相对定位的特点基本一致，
                        不同的是粘滞定位可以在元素到达某个位置时将其固定
             */
            position:sticky;
            top: 10px;
            list-style: none;
            padding-left: 0px;
        }
        .nav li{
            /* 设置li向左浮动，已使菜单横向排列 */
            float:left;
              /* 将文字在父元素中垂直居中 高度*/
            line-height:48px;
        }
        /* 设置a的样式 */
        .nav a{
            display:block;
            text-decoration: none;
            color:#2978b5;
            font-size: 18px;
            padding: 0 39px;/* 上下0 左右39 */
        }
        /* 最后一个li的a元素设置padding */
        .nav li:last-child a{
            padding:0 39px;
            
        }
        .nav a:hover{
            background-color: #ff8882;
        }

    </style>
</head>
<body>
  
        <ul  class="nav">
            <li><a href="#">HTML/CSS</a></li>
            <li><a href="#">Browser Side</a></li>
            <li><a href="#">Sserver Side</a></li>
            <li><a href="#">Programming</a></li>
            <li><a href="#">XML</a></li>
            <li><a href="#">Web Building</a></li>
            <li><a href="#">Reference</a></li>
        </ul>

</body>
</html>

 

 

 

posted @ 2021-04-17 19:01  Hhhr  阅读(150)  评论(0)  编辑  收藏  举报