css导航栏分列网页

当我们创建网页时，导航栏的作用非常重要。它可以帮助用户快速访问网站内容，提高用户体验。在设计导航栏时，我们有多种方式实现。其中分列式导航栏是经典且常用的一种形式。下面我们将介绍如何使用CSS创建分列式导航栏。

HTML部分：div id="nav">
    ul id="nav-menu">
    li>
    a href="#">
    首页/a>
    /li>
    li>
    a href="#">
    新闻资讯/a>
    /li>
    li>
    a href="#">
    产品服务/a>
    /li>
    li>
    a href="#">
    联系我们/a>
    /li>
    /ul>
    /div>
CSS部分：#nav {
    width: 100%;
    height: 50px;
    background-color: #333;
}
#nav-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}
#nav-menu li {
    float: left;
    width: 25%;
    height: 50px;
    text-align: center;
    line-height: 50px;
}
#nav-menu li a {
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    display: inline-block;
    width: 100%;
    height: 100%;
}
#nav-menu li:hover {
    background-color: #444;
}
    

在HTML部分中，我们使用div和ul标签包裹导航栏，并使用li和a标签定义导航栏菜单。在CSS部分，我们使用了float属性将li元素从左到右分列显示，其中每个li元素的宽度都是25%。我们设置了li元素的高度、水平居中、字体大小、透明度、鼠标悬停效果等样式。最终效果是四个导航菜单等宽分布，随着窗口大小调整自适应分列网页，同时鼠标悬停显示突出效果，使得用户更加方便地浏览网页内容。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！