迅雷主站最新的导航栏制作方法
效果可见迅雷首页或者：http://www.souho.net/tool
代码:
<!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" c />
<title>无标题文档</title>
<style type="text/css" media="screen">
#nav {width:100%; height:29px; background:url(1.gif) repeat-x; margin:0; padding:0;line-height:29px; padding-left:140px; }
#nav li{ float:left;padding:4px 5px 0 5px;width:68px; text-align:center;}
#nav li a{ font:bold 14px/160% "宋体";color:#fff;height:23px;text-align:center; display:block;text-decoration:none;}
#nav li a:hover{background:url(2.gif) no-repeat;width:68px; height:23px;text-align:center; display:block;text-decoration:none;}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">导航</a></li>
<li><a href="#">导航</a></li>
<li><a href="#">导航</a></li>
<li><a href="#">导航</a></li>
<li><a href="#">导航</a></li>
</ul>
</body>
</html>
2张图片命名1.gif
2.gif
和网页再同目录
http://www.souho.net/attachments/month_0803/20080315_2207b1c33df0c7f3049b256tbqcdejdp.gif
http://www.souho.net/attachments/month_0803/20080315_e6ad8f6cb5a75f85799aor7rev9gymdw.gif
页:
[1]