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>