Rumah > Artikel > hujung hadapan web > 导航菜单的一般做法
<title>导航栏的做法之一</title> <style> <span style="color: #008000;">/*<span style="color: #008000;">这是导航条***************************************************************************<span style="color: #008000;">*/ <span style="color: #008000;">/*<span style="color: #008000;">容器是用来装那个存放了a标签的div<span style="color: #008000;">*/<span style="color: #000000;"> .rongqi{ background:#2C323B; height:55px; width:<span style="color: #800080;">100%<span style="color: #000000;">; margin:80px 0px; } <span style="color: #008000;">/*<span style="color: #008000;">导航条里面各个a标签的总宽度,当前是六个a的宽度,每个a宽度默认是200px<span style="color: #008000;">*/<span style="color: #000000;"> #top{ <span style="color: #008000;">//<span style="color: #008000;">border:solid #fff 1px; <span style="color: #000000;"> margin:0px auto; width:1200px; height:55px; } <span style="color: #008000;">/*<span style="color: #008000;">hanghang是a标签的class<span style="color: #008000;">*/<span style="color: #000000;"> .hanghang{ font-<span style="color: #000000;">size:20px; color:#DDDDDD; text-<span style="color: #000000;">align:center; line-<span style="color: #000000;">height:50px; <span style="color: #0000ff;">float<span style="color: #000000;">:left; width:200px; height:55px; margin-<span style="color: #000000;">left:0px; list-style-<span style="color: #000000;">type:none; background:#2C323B; text-<span style="color: #000000;">decoration:none; } .hanghang:hover{ list-style-<span style="color: #000000;">type:none; color:#ffffff; font-weight:<span style="color: #800080;">800<span style="color: #000000;">; background:#0C8ED9; } <span style="color: #008000;">/*<span style="color: #008000;">****************************************************************************这是导航条/ </style> <!--这是导航条***************************************************************************--> <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> <!--***************************************************************************这是导航条-->