漂亮的网页导航菜单

演示地址：http://www.souab.com/Demo/200909/Menu/

 <!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>漂亮的网页导航_不懂戀愛魚兒</title>
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{word-break:break-all;margin:0;padding:0;}
body{color:#666;line-height:1.3em;font:12px/1.231 "宋体",arial,helvetica,clean,sans-serif;}
table{border-collapse:collapse;border-spacing:0;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
#topnav {width:950px;margin:10px auto;height:31px;overflow:hidden;border-left:1px solid #FD8000;border-right:1px solid #FD8000;background:url(Img/topnav1.png) repeat-x}
#topnav ul {height:31px;padding-left:5px}
#topnav ul li{float:left;height:27px;margin-top:4px;margin-left:5px;display:inline;line-height:27px;padding-right:4px}
#topnav ul li a{font-size:14px;color:#fff;font-weight:bold;display:block;padding-left:4px}
#topnav ul li.on{padding-right:0}
#topnav ul li.on a{background:url(Img/topnav4.png) repeat-x left;padding-left:15px;}
#topnav ul li.on b {display:block;color:#F75608;background:url(Img/topnav4.png) repeat-x right;padding-right:15px}
#topnav .special{height:19px;width:2px;background:url(Img/topnav3.png) no-repeat center center;margin-top:7px;}
#topnav .fgx{width:24px;height:31px;margin:0 10px;background:url(Img/topnav2.png);padding:0}
#topnav .other{width:40px;color:#900;text-align:center;font-size:14px}
</style>
</head>

<body>

<div id="topnav"><ul>
            <li class="on"><a href="http://www.71hainan.com/"  target="_blank"><b>首页</b></a></li>
            <li class="special"></li>
            <li ><a href="#"><b>服饰</b></a></li>
            <li class="special"></li>
            <li ><a href="#"><b>妆颜</b></a></li>
            <li class="special"></li>
            <li ><a href="#"><b>家居</b></a></li>
            <li class="special"></li>
            <li ><a href="#"><b>鞋帽</b></a></li>
            <li class="special"></li>
            <li ><a href="#"><b>数码家电</b></a></li>
            <li class="special"></li>
            <li ><a href="#"><b>母婴</b></a></li>
            <li class="special"></li>
            <li ><a href="#"><b>运动</b></a></li>
            <li class="special"></li>
            <li ><a href="#"><b>网购中心</b></a></li>
   <li class="fgx"></li>
            <li class="other"><b>资讯</b></li>           
            <li ><a href="#"><b>服务</b></a></li>
            <li class="special"></li>
            <li ><a href="#"><b>人脉</b></a></li>
            <li class="special"></li>
            <li ><a href="#"><b>黄页</b></a></li>
            <li class="special"></li>
            <li ><a href="#"><b>招商</b></a></li>
            <li class="special"></li>
            <li ><a href="#"><b>优惠</b></a></li>
            <li class="special"></li>
            <li ><a href="http://bbs.71hainan.com" target="_blank"><b>论坛</b></a></li>
          </ul></div>
   
 <BR><BR><BR>
<table width="760" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center"><script type="text/javascript"><!--
google_ad_client = "pub-2176993388255317";
/* 728x90, 创建于 09-3-30 */
google_ad_slot = "7010104479";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
        <script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  </script>
    </td>
  </tr>
  <tr>
    <td height="8"></td>
  </tr>
  <tr>
    <td align="center"><script type="text/javascript"><!--
google_ad_client = "pub-2176993388255317";
/* 728x15, 创建于 09-2-28 */
google_ad_slot = "7729442397";
google_ad_width = 728;
google_ad_height = 15;
//-->
</script>
        <script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  </script></td>
  </tr>
  <tr>
    <td height="8"></td>
  </tr>
  <tr>
    <td align="center"><script type="text/javascript"><!--
google_ad_client = "pub-2176993388255317";
/* 728x90, 创建于 09-3-29 */
google_ad_slot = "3221108693";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
        <script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  </script></td>
  </tr>
</table>

</body>
</html>

附件下载：
Menu.rar 4.07KB

引用地址:

发表评论
post by 不懂戀愛魚兒 | 2009年9月18日 | 归档于 [导航菜单]
标签: 菜单 导航 漂亮

发表评论

sitemap