微软风格的CSS横向菜单代码,Css代码库,德仔网

代码语言

代码分类

【Css】微软风格的CSS横向菜单

作者:Dezai.CN / 发布于2012/4/1/ 498

<div><head></div>
<div><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /></div>
<div><title>水平导航菜单（DIV+CSS）</title></div>
<div><style type="text/css"></div>
<div>body{</div>
<div>background: #FFF;</div>
<div>font-family: Arial, Helvetica, sans-serif;</div>
<div>color: #666666;</div>
<div>padding: 0px;</div>
<div>margin: 5px;</div>
<div>text-align: center;</div>
<div>font-size: 12px;</div>
<div>}
<div></div>
<div>nav{</div>
<div>height: 44px;</div>
<div>width: 425px;</div>
<div>background: #FFF;</div>
<div>margin:10px auto;</div>
<div>}
<div>.vline{</div>
<div>background: #999;</div>
<div>width: 1px;</div>
<div>height: 20px;</div>
<div>}
<div>nav ul{</div>
<div>margin:0px;</div>
<div>padding: 0px;</div>
<div>list-style-type: none;</div>
<div>}
<div>nav li{</div>
<div>float: left;</div>
<div>font-family: Arial;</div>
<div>font-weight: bold;</div>
<div>font-size: 12px;</div>
<div>text-align: center;</div>
<div>}
<div>nav li a{</div>
<div>display: block;</div>
<div>width: 84px;</div>
<div>line-height: 28px;</div>
<div>color: #666;</div>
<div>text-decoration: none;</div>
<div>border-top: 4px solid #0F35A5;</div>
<div>}
<div>nav li a:hover{</div>
<div>color: #7C8DD9;</div>
<div>border-top: 4px solid #7C8DD9;</div>
<div>}
<div></style></div>
<div></head></div>
<div></div>
<div><body><div id="nav"><ul><li><a href="#">产品介绍</a></li><li class="vline"></li></div>
<div><li><a href="#">服务支持</a></li><li class="vline"></li></div>
<div><li><a href="#">联系我们</a></li><li class="vline"></li></div>
<div><li><a href="#">新闻中心</a></li><li class="vline"></li></div>
<div><li><a href="#">公司简介</a></li><li class="vline"></li></div>
<div></ul></div></div>
<div></body></div>
<div></html></div>

试试其它关键字

　CSS横向菜单　

同语言下

可能有用的

Dezai.CN贡献的其它代码(4037)