您当前的位置: 首页 » DIV+CSS编程 » DIV+CSS的一个导航条（测试代码）
DIV+CSS的一个导航条（测试代码）
论坛链接
<style>
#m{height:26px; width:480px; font-size:12px;}
#m li{ float:left;width:86px;margin-right:2px;}
#m li a{cursor:pointer;float:left;width:86px;color:#666;font-weight: bold;text-align:center;background:
#e1e1e1; line-height:24px; border-top:2px solid #FFFFFF}
#m li a:hover,#meuna li a:active{line-height:24px;}
#q1 a:hover,#q1 a:active{background:#CC00FF;color: #FFF;}
#q2 a:hover,#q2 a:active{background:#0033FF;color: #FFF;}
#q3 a:hover,#q3 a:active{background:#660000;color: #FFF;}
#q4 a:hover,#q4 a:active{background:#006633;color: #FFF;}
#q5{font-weight: bold;text-align:center;cursor:pointer;width:86px;margin-right:2px;background:#990066;color: #FFF;line-height:26px;}
#b{font-size:12px;background:#990066; text-align:center; line-height:26px; color:#FFF; clear:both;}
</style>
<div id="m">
<ul>
<li id="q1"><a href="http://www.tzlink.com">台州Link</a></li>
<li id="q2"><a href="http://www.tzlink.com">网页设计</a></li>
<li id="q3"><a href="http://www.tzlink.com">网站编程</a></li>
<li id="q4"><a href="http://www.tzlink.com">网站欣赏</a></li>
<li id="q5">台州Link学习乐园</li>
</ul>
</div>
<div id="b">台州Link欢迎您</div>
#m{height:26px; width:480px; font-size:12px;}
#m li{ float:left;width:86px;margin-right:2px;}
#m li a{cursor:pointer;float:left;width:86px;color:#666;font-weight: bold;text-align:center;background:
#e1e1e1; line-height:24px; border-top:2px solid #FFFFFF}
#m li a:hover,#meuna li a:active{line-height:24px;}
#q1 a:hover,#q1 a:active{background:#CC00FF;color: #FFF;}
#q2 a:hover,#q2 a:active{background:#0033FF;color: #FFF;}
#q3 a:hover,#q3 a:active{background:#660000;color: #FFF;}
#q4 a:hover,#q4 a:active{background:#006633;color: #FFF;}
#q5{font-weight: bold;text-align:center;cursor:pointer;width:86px;margin-right:2px;background:#990066;color: #FFF;line-height:26px;}
#b{font-size:12px;background:#990066; text-align:center; line-height:26px; color:#FFF; clear:both;}
</style>
<div id="m">
<ul>
<li id="q1"><a href="http://www.tzlink.com">台州Link</a></li>
<li id="q2"><a href="http://www.tzlink.com">网页设计</a></li>
<li id="q3"><a href="http://www.tzlink.com">网站编程</a></li>
<li id="q4"><a href="http://www.tzlink.com">网站欣赏</a></li>
<li id="q5">台州Link学习乐园</li>
</ul>
</div>
<div id="b">台州Link欢迎您</div>