css怎么导航 |css属性display值

CSS中有三种常用的选择器：id选择器、class选择器和标签选择器。其中标签选择器是最常用的一种。

要设计一个基本的导航栏，大家可以把每个选项放在一个li标签里，再把这些li标签放在ul标签里，最后用CSS设置相应的样式即可。

<ul class="nav-bar">
<li><a href="#">首页</a></li>
<li><a href="#">关于大家</a></li>
<li><a href="#">产品中心</a></li>
<li><a href="#">联系大家</a></li>
</ul>
.nav-bar {
list-style: none;
padding: 0;
margin: 0;
background-color: #0088cc;
}
.nav-bar li {
display: inline-block;
margin-right: 20px;
}
.nav-bar li a {
display: block;
color: #fff;
text-decoration: none;
padding: 10px;
}
.nav-bar li a:hover {
background-color: #005580;
}

上面的代码展示了一个简单的导航栏设计。其中ul标签的class属性为nav-bar，用来设置整个导航栏的样式。li标签用来放置各个选项，a标签则为其添加超链接。CSS中对应的样式设置了背景色、间距、文字颜色及鼠标悬停时的背景色等。

当然，如果需要更加复杂的导航栏样式，大家也可以使用其他的选择器和属性来定义。例如，使用class选择器来设置导航栏选项的样式：

<ul class="nav-bar">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">关于大家</a></li>
<li><a href="#">产品中心</a></li>
<li><a href="#">联系大家</a></li>
</ul>
.nav-bar li.active a {
background-color: #ff0000;
color: #fff;
}

上述代码中，大家给当前页面对应导航栏选项的li标签添加了active的class，然后使用CSS设置了该选项的背景色和文字颜色。