导航条（模拟w3c）

作者: Tn299 | 来源:发表于2023-02-04 21:13 被阅读0次

导航条（模拟w3c）
导航条设置
模拟京东首页导航条渐变
Tailwind Navbar
分页、导航条1、导航条2
分页导航栏开班信息
分页、导航条1、导航条2、开班信息
分页导航栏开班信息
Bootstrap - 导航条
Bootstrap - 导航条2

w3c官网的原版导航条

image.png

练习出来的导航条

image.png
代码：

<title>导航条</title>
    <link rel="stylesheet" href="../CSS/reset.css">
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        .nav{
            width:1210px;
            height: 48px;
            background-color: #E8E7E3;
            /* 第一个值是上下 第二个值是水平 */
            margin: 50px auto;
        }
        .nav a{
            /* 将元素设置成块元素 */
            display: block;
            /* 去除下划线 */
            text-decoration: none;
            color: #777777;
            font-size: 18px;
            padding: 0 39px;
        }
        .nav li{
            float: left;
            /* 将文字在父元素中垂直居中
                数值和父元素的高相等
            */
            line-height: 48px;
        }
        /* 设置鼠标移入效果 */
        .nav a:hover{
            background-color: #3E3E3E;
            color: #E7E6E2;
        }
        /* 调整最后一项的宽度 */
        .nav li:last-child a{
            padding: 0 42px 0 41px;
        }
    </style>
</head>
<body>
    <!-- 创建导航条主体部分 -->
    <div class="nav">
        <ul>
            <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 Building</a>
            </li>
            <li>
                <a href="#">Reference</a>
            </li>
        </ul>
    </div>
</body>