适合企业站的DIV+CSS导航菜单

2024-09-05 12:19:38

字体：大中小

来源：转载

供稿：网友

在一些企业网站里经常能见到这种横向简洁的CSS菜单，完全基于CSS+DIV技术实现，符合WEB标准，而且代码也不多，容易理解和修改，新手就当学习一下吧。

<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: #555555;	padding: 0px;	margin: 5px;	text-align: center;		font-size: 12px;}#nav{	height: 43px;	width: 566px;	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: 86px;	line-height: 28px;	color:  #555555;		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><li>语言切换</li><li class="vline"></li></ul></div></body></html>

上一篇：很漂亮的CSS水平导航条

下一篇：仿网易漂亮的TAB选项卡(标签)