前端笔记——粘滞定位

最新推荐文章于 2022-08-13 15:54:04 发布

恬一

最新推荐文章于 2022-08-13 15:54:04 发布

阅读量399

点赞数

分类专栏：李立超前端学习

本文链接：https://blog.csdn.net/weixin_44158539/article/details/107826838

版权

前端学习同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

李立超

32 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航条</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
        body{
            height:3000px;
        }
        /*设置nav的大小*/
        .nav{
            width:1210px;
            height:48px;
            background-color:rgb(209, 207, 196);
            margin:100px auto;
            /*
               添加粘滞定位
                  当元素的positiv属性设置为sticky时，则开启了元素的粘滞定位
                  粘滞定位和相对性定位的特点基本一致，不同的是粘滞定位可以在元素
                  到达某个位置时可以将其固定
                  版本兼容性不好，一般不使用
            */
            position:sticky;
            top:0;
        }
        /*设置nav中的li,使其水平排列*/
        .nav li{
            /*设置li向左浮动，以使菜单横向排列*/
            float:left;
            /*设置li的高度*/
            height:100%;
            /*将文字在父元素中垂直居中*/
            line-height:48px;
        }
        /*设置a的样式*/
        .nav a{
            /*将a转换为块元素*/
            display:block;
            /*去除下划线*/
            text-decoration:none;
            color:rgb(29, 27, 27);
            font-size:24px;
            padding:0px 31px;
        }
        /*设置鼠标移入的效果*/
        .nav a:hover{
            background-color:rgb(26, 247, 236);
        }
    </style>
</head>
<body>
    <!--创建导航条的结构i-->
    <ul class="nav">
        <li>
            <a href="#">HTML/CSS</a>
        </li>
        <li>
            <a href="#">Browser Side</a>
        </li>
        <li>
            <a href="#">Server Side</a>
        </li>
        <li>
            <a href="#">Programming</a>
        </li>
        <li>
            <a href="#">XML</a>
        </li>
        <li>
            <a href="#">Web Buliding</a>
        </li>
        <li>
            <a href="#">Reference</a>
        </li>
    </ul>
</body>
</html>