<!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="20170711122112.html"><span class="font_webdings">4</span> 首 頁</a></li>
<li><a href="20170711122112.html"><span class="font_webdings">4</span> 産品介紹</a></li>
<li><a href="20170711122112.html"><span class="font_webdings">4</span> 服務介紹</a></li>
<li><a href="20170711122112.html"><span class="font_webdings">4</span> 技術支持</a></li>
<li><a href="20170711122112.html"><span class="font_webdings">4</span> 立刻購買</a></li>
<li><a href="20170711122112.html"><span class="font_webdings">4</span> 聯系我(wǒ)(wǒ)們</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="20170711122112.html"><span class="font_webdings">4</span> 首 頁</a></li>
<li><a href="20170711122112.html"><span class="font_webdings">4</span> 産品介紹</a></li>
<li><a href="20170711122112.html"><span class="font_webdings">4</span> 服務介紹</a></li>
<li><a href="20170711122112.html"><span class="font_webdings">4</span> 技術支持</a></li>
<li><a href="20170711122112.html"><span class="font_webdings">4</span> 立刻購買</a></li>
<li><a href="20170711122112.html"><span class="font_webdings">4</span> 聯系我(wǒ)(wǒ)們</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