微软风格的CSS横向菜单

最新推荐文章于 2021-10-12 14:54:51 发布

zhouminghong

最新推荐文章于 2021-10-12 14:54:51 发布

阅读量763

点赞数 2

分类专栏： css专栏文章标签： css 资讯微软 class float div

本文链接：https://blog.csdn.net/zhouminghong/article/details/1719321

版权

css专栏专栏收录该内容

41 篇文章 1 订阅

订阅专栏

<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站长资讯