上一篇
下一篇
阿里妈妈社区动态工具栏代码
作者:admin 日期:2009-03-05
上过阿里妈妈的朋友不多不少都会发现在社区的页面上有上面截图的工具箱。
昨晚无聊就把他的代码截取下来了。代码改了一点没技术含量的东西。
下面是预览页面，打开即可以看到效果，很不错的。
http://www.iamwawa.cn/upfiles/sj/090309/almm.html
背景图片地址：http://www.iamwawa.cn/upfiles/sj/090309/club_tool_bg.gif
代码在此：
复制内容到剪贴板
程序代码
程序代码<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
*{ margin:0; padding:0; list-style:none;}
body { font-size:12px; color:#555555; font-family:Arial;}
a:link,a:visited{ color:#555555; text-decoration:none;}
a:hover{ color:#fe0017; text-decoration:underline;}
.clearing{ clear:both;font-size: 0px; line-height: 0; height: 0px;border-top:1px solid transparent;visibility: hidden;}
a.hover{ color:#fe0017; }
.red{ color:#ff8400;}
.hidden{ display:none;}
img{border-width:0;}
/* 工具箱 */
.s_tools,.tool_ul li,.s_tools .tools_div,.tool_ul li a{background-image:url(club_tool_bg.gif);background-repeat:no-repeat;
}
.s_tools{
float:left;
width:256px;
height:156px;
overflow:hidden;
margin:6px 0 0 4px;
_margin-left:0;
background-position:right top;
padding-top:26px;
padding-left:7px;
}
.s_tools .clearing{border-top-width:0; }
.tool_ul{ height:32px;padding-top:3px;overflow:hidden;}
.tool_ul li{ background-position:left -200px; float:left; width:123px; height:32px; margin-right:3px;}
.tool_ul li.current{background-position:left -250px;}
.tool_ul li a{ display:block; padding:7px 0 6px 27px; color:#4a5180;}
.tool_ul li a.ymxx{ background-position:8px -494px;}
.tool_ul li a.wzxx{ background-position:8px -534px;}
.tool_ul li a.seoxx{ background-position:9px -573px;}
.tool_ul li a.wzsy{ background-position:9px -613px;}
.s_tools .tools_div{ display:none; height:72px;padding-top:5px;padding-left:6px;}
.s_tools .tools_left{ background-position:left -400px;}
.s_tools .tools_right{ background-position:left -300px;}
.tools_div .tul_link{padding-left:6px;}
.tools_div .tul_link li{float:left;padding-left:8px; width:104px;line-height:18px;height:18px;margin-top:4px;}
-->
</style>
<script type="text/javascript">
function toggleTools(c,toolid){
$i("toolli_1").className="";
$i("toolli_2").className="";
$i("toolli_3").className="";
$i("toolli_4").className="";
$i("tooldiv_1").style.display="none";
$i("tooldiv_2").style.display="none";
$i("tooldiv_3").style.display="none";
$i("tooldiv_4").style.display="none";
c.className = "current";
$i(toolid).style.display="block";
}
function $i(s){return document.getElementById(s);
}
</script>
</head>
<body>
<div class="s_tools">
<ul class="tool_ul">
<li id="toolli_1" class="current" onmouseover="toggleTools(this,'tooldiv_1')"><a class="ymxx" href="#">域名信息查询</a></li>
<li id="toolli_2" onmouseover="toggleTools(this,'tooldiv_2')"><a class="wzxx" href="#">网站信息查询</a></li>
</ul>
<div class="tools_left tools_div" id="tooldiv_1" style="display:block;">
<ul class="tul_link">
<li><a target="_blank" href="http://tool.alimama.com/engine.php">搜索引擎收录查询</a></li>
<li><a target="_blank" href="http://tool.alimama.com/linkin.php">反向链接查询</a></li>
<li><a target="_blank" href="http://tool.alimama.com/keyword.php">关键词密度查询</a></li>
<li><a target="_blank" href="http://tool.alimama.com/meta.php">网页meta信息检测</a></li>
<li><a target="_blank" href="http://tool.alimama.com/code.php">网页源代码查看</a></li>
<li><a target="_blank" href="http://tool.alimama.com/color.php">颜色代码选择器</a></li>
</ul>
</div>
<div class="tools_right tools_div" id="tooldiv_2">
<ul class="tul_link">
<li><a target="_blank" href="http://tool.alimama.com/engine.php">搜索引擎收录查询</a></li>
<li><a target="_blank" href="http://tool.alimama.com/linkin.php">反向链接查询</a></li>
<li><a target="_blank" href="http://tool.alimama.com/keyword.php">关键词密度查询</a></li>
<li><a target="_blank" href="http://tool.alimama.com/meta.php">网页meta信息检测</a></li>
<li><a target="_blank" href="http://tool.alimama.com/code.php">网页源代码查看</a></li>
<li><a target="_blank" href="http://tool.alimama.com/color.php">颜色代码选择器</a></li>
</ul>
</div>
<ul class="tool_ul">
<li id="toolli_3" onmouseover="toggleTools(this,'tooldiv_3')"><a class="seoxx" href="#">SEO信息查询</a></li>
<li id="toolli_4" onmouseover="toggleTools(this,'tooldiv_4')"><a class="wzsy" href="#">网站实用工具</a></li>
</ul>
<div class="tools_left tools_div" id="tooldiv_3">
<ul class="tul_link">
<li><a target="_blank" href="http://tool.alimama.com/engine.php">搜索引擎收录查询</a></li>
<li><a target="_blank" href="http://tool.alimama.com/linkin.php">反向链接查询</a></li>
<li><a target="_blank" href="http://tool.alimama.com/keyword.php">关键词密度查询</a></li>
<li><a target="_blank" href="http://tool.alimama.com/meta.php">网页meta信息检测</a></li>
<li><a target="_blank" href="http://tool.alimama.com/code.php">网页源代码查看</a></li>
<li><a target="_blank" href="http://tool.alimama.com/color.php">颜色代码选择器</a></li>
</ul>
</div>
<div class="tools_right tools_div" id="tooldiv_4">
<ul class="tul_link">
<li><a target="_blank" href="http://tool.alimama.com/html.php">Html特殊符号查询</a></li>
<li><a target="_blank" href="http://tool.alimama.com/gettext.php">蜘蛛抓取模拟</a></li>
<li><a target="_blank" href="http://tool.alimama.com/htmltojs.php">Html/js代码转换</a></li>
<li><a target="_blank" href="http://tool.alimama.com/htmltoubb.php">Html/UBB代码转换</a></li>
<li><a target="_blank" href="http://tool.alimama.com/code.php">网页源代码查看</a></li>
<li><a target="_blank" href="http://tool.alimama.com/color.php">颜色代码选择器</a></li>
</ul>
</div>
</div>
<P></P>
<P style="float:left;">更多网页特效代码<a href="http://www.iamwawa.cn/blog/">http://www.iamwawa.cn/blog/</a></P>
</body>
</html>
文章来自: 
引用通告: 
Tags: 
相关日志:
评论: 2 | 引用: 0 | 查看次数: 1317
回复
docohou[2009-01-14 09:06 PM | 
]怎么最近没有任何更新？
谢谢分享，不错，很漂亮啊。
发表评论
