CSS 导航条

导航栏

拥有易用的导航条对于任何网站都很重要。

通过 CSS，您能够把乏味的 HTML 菜单转换为漂亮的导航栏。

导航栏:

<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

去掉<li>标签的圆点：

ul
{
list-style-type:none;
margin:0;
padding:0;
}

垂直导航栏：

如需构建垂直导航栏，我们只需要定义 <a> 元素的样式，除了上面的代码之外：

a
{
display:block;
width:60px;
}

水平导航栏

有两种创建水平导航栏的方法。使用行内或浮动列表项。

两种方法都不错，但是如果您希望链接拥有相同的尺寸，就必须使用浮动方法。

行内列表项

除了上面的“标准”代码，构建水平导航栏的方法之一是将 <li> 元素规定为行内元素：

实例：

li
{
display:inline;
}

对列表项进行浮动

在上面的例子中，链接的宽度是不同的。

为了让所有链接拥有相等的宽度，浮动 <li> 元素并规定 <a> 元素的宽度：

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