仿淘宝网的漂亮导航菜单代码

编程入门 行业动态 更新时间:2024-10-08 12:35:25

仿<a href=https://www.elefans.com/category/jswz/34/1754968.html style=淘宝网的漂亮导航菜单代码"/>

仿淘宝网的漂亮导航菜单代码

代码简介:

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

代码内容:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
<head>
<title>仿淘宝网的漂亮导航菜单代码_网页代码站(www.webdm)</title>
<style type="text/css">
#nav{
background-image:url(.gif);
}
#nav div{
background-image:url(.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(.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(.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(.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(.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=".gif" width="3" height="34"></td><td id="nav"><table width="960" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><a href="#" id="curTab" class="nav" οnclick="changeId('curTab',this)"><span>网页代码站</span></a><div></div><a href="#" class="nav" οnclick="changeId('curTab',this)"><span>最新更新</span></a><div></div><a href="/" class="nav" οnclick="changeId('curTab',this)"><span>下载排行</span></a><div></div><a href="/" class="nav" οnclick="changeId('curTab',this)"><span>源码分类</span></a><div></div><a href="/" class="nav" οnclick="changeId('curTab',this)"><span>网页特效</span></a><div></div><a href="/" class="nav" οnclick="changeId('curTab',this)"><span>ASP源码</span></a><div></div><a href="/" class="nav" οnclick="changeId('curTab',this)"><span>PHP源码</span></a><div></div><a href="/" class="nav" οnclick="changeId('curTab',this)"><span>.NET源码</span></a><div></div><a href="/" class="nav" οnclick="changeId('curTab',this)"><span>JAVA源码</span></a></td></tr></table></td><td width="3"><img src=".gif" width="3" height="34"></td></tr>
</table>
</body>
</html>
<br>
<p><a href="">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>

代码来自:.html

转载于:.html

更多推荐

仿淘宝网的漂亮导航菜单代码

本文发布于:2024-02-07 11:12:02,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1756571.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:淘宝网   菜单   漂亮   代码

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!