<!DOCTYPE html> <html> <head> <title>导航栏的做法之一</title> <style> /*这是导航条****************************************************************************/ /*容器是用来装那个存放了a标签的div*/ .rongqi{ background:#2C323B; height:55px; width:100%; margin:80px 0px; } /*导航条里面各个a标签的总宽度，当前是六个a的宽度，每个a宽度默认是200px*/ #top{ //border:solid #fff 1px; margin:0px auto; width:1200px; height:55px; } /*hanghang是a标签的class*/ .hanghang{ font-size:20px; color:#DDDDDD; text-align:center; line-height:50px; float:left; width:200px; height:55px; margin-left:0px; list-style-type:none; background:#2C323B; text-decoration:none; } .hanghang:hover{ list-style-type:none; color:#ffffff; font-weight:800; background:#0C8ED9; } /*****************************************************************************这是导航条/ </style> </head> <body> <!--这是导航条***************************************************************************--> <div class="rongqi"> <div id="top"> <a class="hanghang" href="#">首页</a> <a class="hanghang" href="#">导航1</a> <a class="hanghang" href="#">导航2</a> <a class="hanghang" href="#">导航3</a> <a class="hanghang" href="#">导航4</a> <a class="hanghang" href="#">导航5</a> </div> </div> <!--***************************************************************************这是导航条--> </body> </html>
原文：http://www.cnblogs.com/swmiusi/p/5785213.html