这是我参与「第五届青训营」伴学笔记创作活动的第 35 天
今天完成了导航栏（两个顶部tab），但是一些细节还没有优化。

导航栏

首先在HTML里创建一个无序列表，输入导航栏各个标签的名称与网址，这样就会在网页生成一个简易的列表。

<ul>
            <li><a class="active" href="https://juejin.cn/">首页</a></li>
            <li><a href="https://juejin.cn/pins">沸点</a></li>
            <li><a href="https://juejin.cn/course">课程</a></li>
            <li><a href="https://juejin.cn/live">直播</a></li>
            <li><a href="https://juejin.cn/events/all">活动</a></li>
            <li><a href="https://juejin.cn/challenge">竞赛</a></li>
            <li><a href="https://detail.youzan.com/show/goods/newest?kdt_id=104340304">商城</a></li>
</ul>

然后外联一个CSS，设置无序列表样式。首先去掉列表的内边距和外边距，移除无序列表前的圆点。

ul { 
    list-style-type: none; //移除列表前的小标志圆点。//
    margin: 0; //外边距为零//
    padding: 0; //内边距为零//
    overflow: hidden;
    background-color: black;//tab背景颜色设置为黑色//
    }

然后创建横向导航栏使用浮动列表项。

li {
    float: left;
}
a {
    display: block;
    width: 60px;
    }

设置鼠标悬停时标签的颜色变化。

li a:hover {
    background-color: rgb(51, 48, 48);
}

对tab所在页的颜色进行突出。

    .active{              //“首页”在列表中设置了class=“active”// 
    color:rgb(2, 255, 195);//“首页”的字体颜色设置为了绿色//
}

对tab的文字设置样式。字体颜色为白色，段落居中，内边距逆时针上右下左开始10px，20px，10px，20px。

li a {
    display: block;
    color: white;//除“首页”外其他字体颜色为白色//
    text-align: center;
    padding: 10px 20px;
    text-decoration: none;
    }

同理设置了第二层tab，在背景颜色、字体大小上做了一些改变，由于两个tab不太一样，所以对无序列表ul设置了class属性，值分别为tab1和tab2，方便在CSS中设置好每个tab的样式。

.tab1 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: black;
}
.tab2 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgb(101, 98, 98);//第二层tab颜色偏灰//
    font-size: small;
}

[大项目（一）|青训营笔记]

导航栏