DIV+CSS導航條效果

來源:互聯網
上載者:User
css CSS檔案:

 程式碼 <style>
#nav{background:#000; font-size:12px; float:left; margin-left:50px; width:250px; padding:50px;}
#nav div{margin:8px;}
#nav span{display:none; display:block;}
#nav a{color:#666;text-decoration:none; display:block;}
#nav a:hover{color:#FFFF00; position:relative;}
#nav a:hover span{display:block;left:-10px;position:absolute;color:#FFff00;border-top: 12px solid #ffff00;border-left:4px solid #ffff00;line-height:0px;}
</style>

DIV檔案:

 程式碼 <div id="nav">
  <div><a href="http://www.zishu.cn"><span></span>網站首頁</a></div>
  <div><a href="http://www.zishu.cn"><span></span>網站首頁</a></div>
  <div><a href="http://www.zishu.cn"><span></span>網站首頁</a></div>
  <div><a href="http://www.zishu.cn"><span></span>網站首頁</a></div>
  <div><a href="http://www.zishu.cn"><span></span>網站首頁</a></div>
  <div><a href="http://www.zishu.cn"><span></span>網站首頁</a></div>
</div>

示範效果:

 HTML代碼 <style>#nav{background:#000; font-size:12px; float:left; margin-left:50px;width:250px; padding:50px;}#nav div{margin:8px;}#nav span{display:none; display:block;}#nav a{color:#666;text-decoration:none; display:block;}#nav a:hover{color:#FFFF00; position:relative;}#nav a:hoverspan{display:block;left:-10px;position:absolute;color:#FFff00;border-top:12px solid #ffff00;border-left:4px solid #ffff00;line-height:0px;}</style><div id="nav"> <div><ahref="http://www.zishu.cn"><span></span>網站首頁</a></div> <div><ahref="http://www.zishu.cn"><span></span>網站首頁</a></div> <div><ahref="http://www.zishu.cn"><span></span>網站首頁</a></div> <div><ahref="http://www.zishu.cn"><span></span>網站首頁</a></div> <div><ahref="http://www.zishu.cn"><span></span>網站首頁</a></div> <div><ahref="http://www.zishu.cn"><span></span>網站首頁</a></div></div>


chenhuili最佳化後的!
 HTML代碼 CSS部分:<style>*{ margin: 0; padding: 0; }#nav{ width: 250px; font-size: 12px; background: #000; }#nav ul{ display: block; list-style-type: none; }#nav li{ display: block; }#nav li a{ padding: 0 0 0 10px; width: 200px; display: block; color: #666; text-decoration: none; }#nav li a:link,#nav li a:visited{ color: #666; }#nav li a:hover{ padding: 0 0 0 8px; border-left: 2px solid #FF0000; color: #FFFF00; }</style>結構部分:<div id="nav"> <ul> <li><a href="http://www.zishu.cn">網站首頁</a></li> <li><a href="http://www.zishu.cn">網站首頁</a></li> <li><a href="http://www.zishu.cn">網站首頁</a></li> <li><a href="http://www.zishu.cn">網站首頁</a></li> <li><a href="http://www.zishu.cn">網站首頁</a></li> <li><a href="http://www.zishu.cn">網站首頁</a></li> </ul></div>

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.