您的位置：首页 > Web前端 > CSS

微软风格的CSS横向菜单

2007-07-31 15:31 239 查看

<head>x4u站长资讯
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />x4u站长资讯
<title>水平导航菜单（DIV+CSS）</title>x4u站长资讯
<style type="text/css">x4u站长资讯
body{x4u站长资讯
background: #FFF;x4u站长资讯
font-family: Arial, Helvetica, sans-serif;x4u站长资讯
color: #666666;x4u站长资讯
padding: 0px;x4u站长资讯
margin: 5px;x4u站长资讯
text-align: center; x4u站长资讯
font-size: 12px;x4u站长资讯
}

#nav{x4u站长资讯
height: 44px;x4u站长资讯
width: 425px;x4u站长资讯
background: #FFF;x4u站长资讯
margin:10px auto;x4u站长资讯
}x4u站长资讯
.vline{x4u站长资讯
background: #999;x4u站长资讯
width: 1px;x4u站长资讯
height: 20px;x4u站长资讯
}x4u站长资讯
#nav ul{x4u站长资讯
margin:0px;x4u站长资讯
padding: 0px;x4u站长资讯
list-style-type: none;x4u站长资讯
}x4u站长资讯
#nav li{x4u站长资讯
float: left;x4u站长资讯
font-family: Arial;x4u站长资讯
font-weight: bold;x4u站长资讯
font-size: 12px;x4u站长资讯
text-align: center;x4u站长资讯
}x4u站长资讯
#nav li a{x4u站长资讯
display: block;x4u站长资讯
width: 84px;x4u站长资讯
line-height: 28px;x4u站长资讯
color: #666; x4u站长资讯
text-decoration: none;x4u站长资讯
border-top: 4px solid #0F35A5;x4u站长资讯
}x4u站长资讯
#nav li a:hover{x4u站长资讯
color: #7C8DD9;x4u站长资讯
border-top: 4px solid #7C8DD9; x4u站长资讯
}x4u站长资讯
</style>x4u站长资讯
</head>

<body><div id="nav"><ul><li><a href="#">产品介绍</a></li><li class="vline"></li>x4u站长资讯
<li><a href="#">服务支持</a></li><li class="vline"></li>x4u站长资讯
<li><a href="#">联系我们</a></li><li class="vline"></li>x4u站长资讯
<li><a href="#">新闻中心</a></li><li class="vline"></li>x4u站长资讯
<li><a href="#">公司简介</a></li><li class="vline"></li>x4u站长资讯
</ul></div>x4u站长资讯

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航