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>