当我们创建网页时，导航栏的作用非常重要。它可以帮助用户快速访问网站内容，提高用户体验。在设计导航栏时，我们有多种方式实现。其中分列式导航栏是经典且常用的一种形式。下面我们将介绍如何使用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元素的高度、水平居中、字体大小、透明度、鼠标悬停效果等样式。最终效果是四个导航菜单等宽分布，随着窗口大小调整自适应分列网页，同时鼠标悬停显示突出效果，使得用户更加方便地浏览网页内容。