当前位置：首页 > 脚本 > 特效代码 > 导航菜单 > 微软风格的CSS横向菜单

微软风格的CSS横向菜单
日期：2021-09-13 21:21:30 来源：网络收集

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>水平导航菜单（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>产品介绍</li><li class="vline"></li>
<li>服务支持</li><li class="vline"></li>
<li>联系我们</li><li class="vline"></li>
<li>新闻中心</li><li class="vline"></li>
<li>公司简介</li><li class="vline"></li>
</ul></div>
<p>查找更多代码，请访问：<a href="http://www.yinxiaosucai.cn" target="_blank">音效素材</a></p>
</body>
</html>

运行代码保存代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

JS特效代码 jQuery特效 JS代码导航菜单代码

上一篇：绿色下划线的简洁CSS导航代码

下一篇：三级下拉菜单 (通用版)

+ 更多脚本 +

广告代码 全部 +: 焦点图; 全屏广告; 对联广告; 在线客服; 相册代码; 菜单导航; TAB标签; 悬浮漂浮; flash特效; 图片特效; 翻牌书角; 其他特效

特效代码 全部 +: 导航菜单; 表单按钮; 文字特效; 表格图层; 图片特效; 时间日期; 滚动代码; 窗口特效; 颜色背景; 网站常用; CSS样式; 其他特效

音效素材网提供各类素材，打造精品素材网站！

音效素材

微软风格的CSS横向菜单
日期：2021-09-13 21:21:30 来源：网络收集

您可能感兴趣的脚本

一个简洁的JS日历

一个漂亮的DIV搜索条

竖列Navigation导航菜单

CSS横向下拉菜单

漂亮的脚本日历

清空代码防止查看源代码

记录并显示网页的最后修改时间

用CSS实现水平虚线的两种方法

如何将链接的下划线做成虚线？

JS自动格式化输入的数字/千位分隔符

网页状态栏页面停留时间特效

iframe自适应高度

css写菜单：简洁注释版 [1]

一款经典的日期时间脚本

判断文本框只能输入中文汉字的代码

可选择Email和用户名登录的代码

最新脚本

热门标签

热门脚本

关于我们

版权声明

音效素材网提供各类素材，打造精品素材网站！

微软风格的CSS横向菜单 日期：2021-09-13 21:21:30 来源：网络收集

您可能感兴趣的脚本

最新脚本

热门标签

热门脚本

关于我们

版权声明

微软风格的CSS横向菜单
日期：2021-09-13 21:21:30 来源：网络收集