<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>用Div加CSS样式做导航栏</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div class="test">
<ul>
<li><a href="#"><span class="font_webdings">4</span> 首 页</a></li>
<li><a href="#"><span class="font_webdings">4</span> 产品介绍</a></li>
<li><a href="#"><span class="font_webdings">4</span> 服务介绍</a></li>
<li><a href="#"><span class="font_webdings">4</span> 技术支持</a></li>
<li><a href="#"><span class="font_webdings">4</span> 立刻购买</a></li>
<li><a href="#"><span class="font_webdings">4</span> 联系我们</a></li>
</ul>
</div>
</body>
</html>
======================================================
css.css文件
======================================================
body,div{font-size:12px;}
.test ul{list-style:none;}
.test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}
.test a{display:block;text-align:center;height:30px;}
.test a:link{color:#666;background:url(arrow_off.gif) #CCC no-repeat 5px 12px;text-decoration:none;}
.test a:visited{color:#666;text-decoration:underline;text-decoration:none;}
.test a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(arrow_on.gif) #F00 no-repeat 5px 12px;}
.font_webdings{font-family:webdings;}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>用Div加CSS样式做导航栏</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div class="test">
<ul>
<li><a href="#"><span class="font_webdings">4</span> 首 页</a></li>
<li><a href="#"><span class="font_webdings">4</span> 产品介绍</a></li>
<li><a href="#"><span class="font_webdings">4</span> 服务介绍</a></li>
<li><a href="#"><span class="font_webdings">4</span> 技术支持</a></li>
<li><a href="#"><span class="font_webdings">4</span> 立刻购买</a></li>
<li><a href="#"><span class="font_webdings">4</span> 联系我们</a></li>
</ul>
</div>
</body>
</html>
======================================================
css.css文件
======================================================
body,div{font-size:12px;}
.test ul{list-style:none;}
.test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}
.test a{display:block;text-align:center;height:30px;}
.test a:link{color:#666;background:url(arrow_off.gif) #CCC no-repeat 5px 12px;text-decoration:none;}
.test a:visited{color:#666;text-decoration:underline;text-decoration:none;}
.test a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(arrow_on.gif) #F00 no-repeat 5px 12px;}
.font_webdings{font-family:webdings;}
文章来源：桂林唯创网络
475003427