全屏純CSS導(dǎo)航條的DIV+CSS導(dǎo)航條代碼怎么寫？

精華

tomcat080 2016-12-01 14:17:53 瀏覽(5978) 回復(fù)(4) 贊(0)

div css導(dǎo)航條(全屏css導(dǎo)航條)

標(biāo)簽： css

回答(4)

徐建凱精華 2016-12-01

DIV CSS導(dǎo)航條

DIV+CSS導(dǎo)航條代碼如下：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>W3Cschool導(dǎo)航條</title> 
<!--* html注釋：DIV+CSS導(dǎo)航條CSS樣式 * --> 
<style type="text/css"> 
<!-- 
#nav{width:100%;background:#B6B6B6;color:#B6B6B6; font-family:黑體;
 text-align:center; font-size:13px; font-weight:bold;} 
#nav a,span {border-left:#CCCCCC 1px solid; display:inline-block;
 height:40px; line-height:40px; padding:0px 10px; margin-left:-8px;} 
#nav a:link,a:visited,a:active{ text-decoration:none; color:#FFFFFF;} 
#nav a:hover { background:#CCCCCC;} 
--> 
</style></head> 
<div id="nav"> 
<a href="http://o2fo.com" title="w3cschool首頁(yè)">首頁(yè)</a>
<a href="http://o2fo.com/html/" title="HTML教程">HTML</a>
<a href="http://o2fo.com/css/" title="CSS教程">CSS</a>
<a href="http://o2fo.com/javascript/" title="Javascript教程">Javascript</a>
<a href="http://o2fo.com/jquery/" title="Jquery教程">Jquery</a>
<a href="http://o2fo.com/bootstrap/" title="Bootstrap教程">Bootstrap</a>
<a href="http://o2fo.com/php/" title="PHP教程">PHP</a>
<a href="http://o2fo.com/java/" title="Java教程">Java</a>
<a href="http://o2fo.com/python/" title="Python教程">Python</a>
<a href="http://o2fo.com/mysql/" title="MySQL教程">MySQL</a>
<a href="http://o2fo.com/sql/" title="SQL教程">SQL</a>
<a href="http://o2fo.com/json/" title="JSON教程">Json</a>
<!--<a href="http://o2fo.com/c/" title="C教程">C</a>-->
<a href="http://o2fo.com/weixinapp/" title="微信小程序開(kāi)發(fā)文檔">微信小程序</a>
<a href="http://123.w3cschool.cn/webtools" target="_blank" title="W3Cschool在線工具集合">在線工具</a>
<a href="http://123.w3cschool.cn" target="_blank" title="W3Cschool極客導(dǎo)航">極客導(dǎo)航</a>
<!--<a href="http://o2fo.com/position/positionList" title="職業(yè)路線">職業(yè)路線</a>-->
<a href="http://o2fo.com/tutorial" title="編程入門教程">更多...</a>
<span> </span> 
</div> 
</body> 
</html>

直接拷貝以上完整DIV+CSS代碼即可使用-CSS 導(dǎo)航條。

點(diǎn)擊運(yùn)行CSS橫向?qū)Ш綏l實(shí)例。