微软风格的CSS横向菜单

导航菜单
07年10月15日
编辑

sj33cn

headmeta http-equiv="Content-Type" content="text/html; charset=gb2312" /title水平导航菜单（P+CSS）/titlestyle type="text/css"body{ background: #FFF; font-family: Arial, Helvetica, sans-serif; color: #666666; padding: 0px; margin: 5px; text

<head><meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /><title>水平导航菜单（P+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><P id=”nav”><ul><li><a href=”#”>产品介绍</a></li><li class=”vline”></li><li><a href=”#”>服务支持</a></li><li class=”vline”></li><li><a href=”#”>联系我们</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></P></body></html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

{{userData.name}}已认证

微软风格的CSS横向菜单

CSS做的垂直导航菜单效果

过渡很平滑的下拉菜单代码

客厅装修效果图欣赏

卧室装修效果图欣赏

卫生间装修效果图欣赏