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>

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。