前端的学习之路：初级CSS---w3cschool的导航条

最新推荐文章于 2023-05-05 09:56:42 发布

new-SkyWaller

最新推荐文章于 2023-05-05 09:56:42 发布

阅读量180

点赞数

分类专栏：初级CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_44647555/article/details/113732895

版权

初级CSS 专栏收录该内容

75 篇文章 0 订阅

订阅专栏

w3cschool的导航条

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>w3cschool的导航条</title>
    <!-- <link rel="stylesheet" href="../chujicss/css/11.22.04.css"> -->
    <link rel="stylesheet" href="../chujicss/css/reset.css">
    <style>
        body {
            width: 3000px;
            height: 3000px;
        }

        .box1 {
            width: 199px;
            height: 40px;
            background-color: black;
            line-height: 40px;
            float: left;
            text-align: center;
            margin-top: 100px;

            /* 
            粘滞定位
                    -当元素的position属性值设置为sticky使则开启了元素的粘滞定位
                    -粘滞定位和相对定位的特点基本一致
                        不同的是粘滞定位可以在元素到达某个位置时将其固定
            */
            position: sticky;
            top: 0;
            /*到顶端时，固定住*/

        }



        .box2 {
            width: 199px;
            height: 40px;
            background-color: gray;
            line-height: 40px;
            float: left;
            text-align: center;
            margin-top: 100px;
            position: sticky;
            top: 0;
        }

        .box2:hover {
            background-color: black;

        }

        a {
            text-decoration: none;
            color: peru;

        }
    </style>
</head>

<body>
    <div class="box1">

        <a href="https://www.w3school.com.cn/h.asp">HTML/CSS</a>
    </div>
    <div class="box2">
        <a href="https://www.w3school.com.cn/b.asp">Browser Side</a>
    </div>
    <div class="box2">
        <a href="https://www.w3school.com.cn/s.asp">Service Side</a>
    </div>
    <div class="box2">
        <a href="https://www.w3school.com.cn/p.asp">Programming</a>
    </div>
    <div class="box2">
        <a href="https://www.w3school.com.cn/x.asp">XML</a>
    </div>
    <div class="box2">
        <a href="https://www.w3school.com.cn/w.asp">Web Building</a>
    </div>
    <div class="box2">
        <a href="https://www.w3school.com.cn/r.asp">Reference</a>
    </div>
</body>

</html>