仿淘宝支付宝网站的漂亮导航菜单

2024-09-05 12:19:40

字体：大中小

来源：转载

供稿：网友

仿淘宝支付宝网站的漂亮导航菜单，暖色调风格，响应鼠标悬停动作，结构清淅，不过用到了一些修饰图片，你可以顺着源代码找到这些图片地址，然后下载下来，这款菜单其实很不错哦。

<!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><title>仿淘宝支付宝网站的漂亮导航菜单</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">#nav{background-image:url(/jscss/demoimg/200904/navM.gif);}#nav div{background-image:url(/jscss/demoimg/200904/nav_S.gif);float:left;width:4px; height:34px; font-size:0px; margin:0px 4px; background-repeat:no-repeat; background-position:top; background-repeat:no-repeat;}a.nav{display:block; float:left; padding-left:12px; font-weight:bold; color:#fff; height:34px; font-size:14px; text-decoration:none; cursor:pointer;}a.nav span{display:block; float:left; padding-right:12px; font-weight:bold; height:24px; padding-top:10px;}a.nav:hover{display:block; float:left; padding-left:12px; font-weight:bold; color:#fff; height:34px; font-size:14px; background-image:url(/jscss/demoimg/200904/nav_Over_L.gif); background-position:left center; background-repeat:no-repeat; text-decoration:none;}a.nav:hover span{display:block; float:left; padding-right:12px; font-weight:bold; height:24px; padding-top:10px;background-image:url(/jscss/demoimg/200904/nav_Over_R.gif); background-position:right center; background-repeat:no-repeat;}#curTab{display:block; float:left; padding-left:12px; font-weight:bold; color:#f00; height:34px; font-size:14px;background-image:url(/jscss/demoimg/200904/nav_On_L.gif); background-position:left center; background-repeat:no-repeat;}#curTab span{display:block; float:left; padding-right:12px; font-weight:bold;height:24px; padding-top:10px;background-image:url(/jscss/demoimg/200904/nav_On_R.gif);background-position:right center; background-repeat:no-repeat;}</style><script language="javascript">function $(objId){	return document.getElementById(objId);}function changeId(idName,obj){	$(idName).id="";	obj.id=idName;	obj.blur();}</script></head><body><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">  <tr>    <td width="3"><img src="http://www.aspku.com/jscss/demoimg/200904/navL.gif" width="3" height="34"></td>    <td id="nav">      <table width="960" border="0" align="center" cellpadding="0" cellspacing="0">        <tr>          <td>            <span>网站首页</span>            <div></div>            <span>最新更新</span>            <div></div>            <span>下载排行</span>            <div></div>            <span>源码分类</span>            <div></div>            <span>网页特效</span>            <div></div>            <span>ASP源码</span>            <div></div>            <span>PHP源码</span>            <div></div>            <span>.NET源码</span>            <div></div>            <span>JAVA源码</span>          </td>        </tr>      </table>    </td>    <td width="3"><img src="http://www.aspku.com/jscss/demoimg/200904/navR.gif" width="3" height="34"></td>  </tr></table></body></html>

上一篇：CSS鼠标感应的滑动门菜单

下一篇：绿色大按钮式的CSS导航条