[分享]CSS内嵌做左右分类导航

CSS内嵌是网页设计中常用的技巧之一，可以将CSS样式直接写入HTML文件中，让页面更加简洁和方便维护。下面，我们来讲解一下如何利用CSS内嵌实现左右分类导航。 / 定义导航条容器的样式 / .nav...

CSS内嵌是网页设计中常用的技巧之一，可以将CSS样式直接写入HTML文件中，让页面更加简洁和方便维护。下面，我们来讲解一下如何利用CSS内嵌实现左右分类导航。

 <style>
    /* 定义导航条容器的样式 */
    .nav {
        display: flex;
        justify-content: space-between;
        background-color: #e1e1e1;
        height: 50px;
        align-items: center;
    }
    /* 定义左边的分类样式 */
    .nav-left {
        margin-left: 20px;
        font-weight: bold;
    }
    /* 定义右边的分类样式 */
    .nav-right {
        margin-right: 20px;
    }
    /* 定义导航链接的样式 */
    .nav-link {
        text-decoration: none;
        color: #333;
        margin: 0 10px;
    }
</style>

<div class="nav">
    <div class="nav-left">
        <a href="#" class="nav-link">推荐</a>
        <a href="#" class="nav-link">热门</a>
        <a href="#" class="nav-link">最新</a>
    </div>
    <div class="nav-right">
        <a href="#" class="nav-link">综合</a>
        <a href="#" class="nav-link">科技</a>
        <a href="#" class="nav-link">娱乐</a>
    </div>
</div>

在上面的代码中，我们首先定义了一个名为“nav”的class，用来表示包裹导航条的容器，并设置了一些基本样式。通过“display：flex”让导航条成为一个弹性盒子，使得左右两边的分类能够在同一行显示。然后，我们分别为左右两个分类定义了class名为“nav-left”和“nav-right”样式，在样式中可以设置不同的外边距和字体样式等。最后，我们用“class=nav”来包裹所有的导航链接，并为每个链接定义了一个class名为“nav-link”的样式，包括去掉下划线、设置字体颜色和外边距等。