微软风格的CSS横向菜单
生活随笔
收集整理的這篇文章主要介紹了
微软风格的CSS横向菜单
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>水平導(dǎo)航菜單（DIV+CSS）</title>
<style type="text/css">
body{
background: #FFF;
font-family: Arial, Helvetica, sans-serif;
color: #666666;
padding: 0px;
margin: 5px;
text-align: center;
font-size: 12px;
}
#nav{
height: 44px;
width: 425px;
background: #FFF;
margin:10px auto;
}
.vline{
background: #999;
width: 1px;
height: 20px;
}
#nav ul{
margin:0px;
padding: 0px;
list-style-type: none;
}
#nav li{
float: left;
font-family: Arial;
font-weight: bold;
font-size: 12px;
text-align: center;
}
#nav li a{
display: block;
width: 84px;
line-height: 28px;
color: #666;
text-decoration: none;
border-top: 4px solid #0F35A5;
}
#nav li a:hover{
color: #7C8DD9;
border-top: 4px solid #7C8DD9;
}
</style>
</head>
<body><div id="nav"><ul><li><a href="http://www.js323.com">產(chǎn)品介紹</a></li><li class="vline"></li>
<li><a href="http://www.sjzlixing.com">石家莊拓展</a></li><li class="vline"></li>
<li><a href="#">聯(lián)系我們</a></li><li class="vline"></li>
<li><a href="#">新聞中心</a></li><li class="vline"></li>
<li><a href="#">公司簡介</a></li><li class="vline"></li>
</ul></div>
</body>
</html>
?
轉(zhuǎn)載于:https://www.cnblogs.com/youtianxia/p/3969567.html
總結(jié)
以上是生活随笔為你收集整理的微软风格的CSS横向菜单的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 民生爱奇艺联名金卡额度多少？5万额度是极
- 下一篇： CSS兼容IE6,IE7,FF的技巧（C