CSS导航栏

浏览数：22 / 时间：2015年06月09日

CSS导航栏：http://www.w3school.com.cn/css/css_navbar.asp#
导航栏基本上是一个链接列表，因此使用 <ul> 和 <li> 元素是非常合适的：

 1 水平导航栏：（此例子中链接的宽度不同）
 2 <!DOCTYPE html>
 3 <html>
 4 <head>
 5 <style>
 6 ul
 7 {
 8 list-style-type:none;
 9 margin:0;
10 padding:0;
11 padding-top:6px;
12 padding-bottom:6px;
13 }
14 li
15 {
16 display:inline;
17 }
18 a:link,a:visited
19 {
20 font-weight:bold;
21 color:#FFFFFF;
22 background-color:#98bf21;
23 text-align:center;
24 padding:6px;
25 text-decoration:none;
26 text-transform:uppercase;
27 }
28 a:hover,a:active
29 {
30 background-color:#7A991A;
31 }
32 
33 </style>
34 </head>

水平导航栏2：
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#bebebe;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#cc0000;
}

</style>
</head>

<body>
<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>
</body>
</html>

水平导航栏3：

<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
text-decoration:none;        // 去掉a标签的下划线
}
</style>
</head>

<body>
<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>

<p><b>注释：</b>如果没有规定 !DOCTYPE，则浮动项目会产生意想不到的结果。</p>

<p>为了显示出链接区域，我们为链接添加了背景色。</p>

<p><b>注释：</b>向 ul 元素添加 overflow:hidden，是为了防止 li 元素出现在列表之外。</p>

</body>
</html>

水平导航栏4：

<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:60px;
font-weight:bold;
color:#FFFFFF;
background-color:#bebebe;
text-align:center;
text-decoration:none;
text-transform:uppercase;    // 英文转换为大写
}
a:hover,a:active
{
color:#cc0000;
}
</style>
</head>

<body>
<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>

<p><b>注释：</b>如果没有规定 !DOCTYPE，则浮动项目会产生意想不到的结果。</p>

<p>为了显示出链接区域，我们为链接添加了背景色。</p>

<p><b>注释：</b>向 ul 元素添加 overflow:hidden，是为了防止 li 元素出现在列表之外。</p>

</body>
</html>

垂直导航栏
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#bebebe;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#cc0000;
}
</style>
</head>

<body>
<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>
</body>
</html>

<body>
<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>

<p><b>注释：</b>如果您只为 a 元素设置内边距（而不设置 ul 元素），那么链接会出现在 ul 元素之外。所以，我们为 ul 元素添加了 top 和 bottom 内边距。</p>
</body>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

CSS导航栏