已下载并使用: http://www.16z.com/ 这个风格的.人请继续往下看:
我重新更新了这个叫-"滑动门"的东西? IE-火狐下都可以滑~~
由于风格不会再重新整理发布(原因很简单:不喜被挨骂.特别是无辜被骂), 所以我把滑动门的核心代码提出来,便于已下载的朋友想更新朋友更新.
演示: http://tool.16z.com/my163.htm
1.请更据链接把几个CSS中要用的背景图片下载回去.
2.到SS后台生成相应的需要调用的代码替换11111...222...之类的相关文字即可.
3.再用现在的滑动门替换原来你需要替换的相关内容.
前提是你需要或愿意用现在这个滑动门. 如果不需要或认以前的不错的,请当作这贴不存在.
复制内容到剪贴板
代码:
<style type="text/css">
<!--
*{ padding:0; margin:0;list-style-type:none;}
.col1{float:left; width:438px;padding:0px 0px 5px 0px;}
.leftRoll0{width:438px;padding:8px 0px 8px 0px;}
.leftRoll0 .head{width:438px;height:23px;}
.leftRoll0 .head li{float:left;height:23px; line-height:23px;}
.leftRoll0 .head .b1{width:73px; background:url(http://www.16z.com/images/163com/i1.gif) no-repeat}
.leftRoll0 .head .b1a{width:73px; background:url(http://www.16z.com/images/163com/i1a.gif) no-repeat}
.leftRoll0 .head .b2{width:73px; background:url(http://www.16z.com/images/163com/i2.gif) no-repeat}
.leftRoll0 .head .b2a{width:73px; background:url(http://www.16z.com/images/163com/i2a.gif) no-repeat}
.leftRoll0 .ti{width:430px;margin:0 auto; text-align:left; font-weight:700;}
.leftRoll0 table td{border-top:1px dotted #CECECE; text-align:left; height:22px; line-height:22px; padding-top:3px;}
.leftRoll0 table .gray{color:#656565;}
.leftRoll0 table .orange{color:#DE6306;}
.leftRoll1{width:436px;margin:0 auto; text-align:left;}
.leftRoll1 .ti{width:436px;}
.leftRoll1 .ti li{ float:left; width:109px; height:23px; line-height:23px; text-align:center;}
.leftRoll1 .ti .b3{ background:url(http://www.16z.com/images/163com/i61.gif) no-repeat;}
.leftRoll1 .ti .b3a{ background:url(http://www.16z.com/images/163com/i3a.gif) no-repeat;}
.leftRoll1 .ti .b4{ background:url(http://www.16z.com/images/163com/i4.gif) no-repeat;}
.leftRoll1 .ti .b4a{ background:url(http://www.16z.com/images/163com/i4a.gif) no-repeat;}
.leftRoll1 .con{width:436px;height:200px;text-align:left;border-left:1px solid #cbcbcb;border-bottom:1px solid #cbcbcb;border-right:1px solid #cbcbcb;}
.leftRoll1 .zon{width:425px;float:center;text-align:left;border-left:6px solid #fff;}
.leftRoll1 .pon{width:425px;float:center;text-align:left;border-top:5px solid #fff;}
.leftRoll1 li { height: 1.6em; background: url(../images/new/) no-repeat 0.3em 0.7em; }
-->
</style>
</head>
<body>
<script language="javascript">
function setFocus3(i)
{
selectLayer3(i);
}
function selectLayer3(i)
{
switch(i)
{
case 1:
document.getElementById("N1").style.display="block";
document.getElementById("N2").style.display="none";
document.getElementById("N3").style.display="none";
document.getElementById("N4").style.display="none";
break;
case 2:
document.getElementById("N1").style.display="none";
document.getElementById("N2").style.display="block";
document.getElementById("N3").style.display="none";
document.getElementById("N4").style.display="none";
break;
case 3:
document.getElementById("N1").style.display="none";
document.getElementById("N2").style.display="none";
document.getElementById("N3").style.display="block";
document.getElementById("N4").style.display="none";
break;
case 4:
document.getElementById("N1").style.display="none";
document.getElementById("N2").style.display="none";
document.getElementById("N3").style.display="none";
document.getElementById("N4").style.display="block";
break;
}
}
</script>
<div class="leftRoll1" id="N1" style="display:block;">
<div class="ti">
<ul>
<li class="b4"><a href="/action_blog.16z" target="_blank">最新日志</a></li>
<li class="b3"><a href="javascript:setFocus3(2);" onMouseOver="javascript:setFocus3(2);" target="_self">情感绿洲</a></li>
<li class="b3"><a href="javascript:setFocus3(3);" onMouseOver="javascript:setFocus3(3);" target="_self">娱乐休闲</a></li>
<li class="b3"><a href="javascript:setFocus3(4);" onMouseOver="javascript:setFocus3(4);" target="_self">电脑网络</a></li>
</ul></div>
<div class="con">
11111111111
</div></div>
<div class="leftRoll1" id="N2" style="display:none;">
<div class="ti">
<ul>
<li class="b4a"><a href="javascript:setFocus3(1);" onMouseOver="javascript:setFocus3(1);" target="_self">最新日志</a></li>
<li class="b3a"><a href="/category_7.16z" target="_blank">情感绿洲</a></li>
<li class="b3"><a href="javascript:setFocus3(3);" onMouseOver="javascript:setFocus3(3);" target="_self">娱乐休闲</a></li>
<li class="b3"><a href="javascript:setFocus3(4);" onMouseOver="javascript:setFocus3(4);" target="_self">电脑网络</a></li>
</ul></div>
<div class="con">
2222222222
</div></div>
<div class="leftRoll1" id="N3" style="display:none;">
<div class="ti">
<ul>
<li class="b4a"><a href="javascript:setFocus3(1);" onMouseOver="javascript:setFocus3(1);" target="_self">最新日志</a></li>
<li class="b3"><a href="javascript:setFocus3(2);" onMouseOver="javascript:setFocus3(2);" target="_self">情感绿洲</a></li>
<li class="b3a"><a href="/category_8.16z" target="_blank">娱乐休闲</a></li>
<li class="b3"><a href="javascript:setFocus3(4);" onMouseOver="javascript:setFocus3(4);" target="_self">电脑网络</a></li>
</ul></div>
<div class="con">
33333333
</div></div>
<div class="leftRoll1" id="N4" style="display:none;">
<div class="ti">
<ul>
<li class="b4a"><a href="javascript:setFocus3(1);" onMouseOver="javascript:setFocus3(1);" target="_self">最新日志</a></li>
<li class="b3"><a href="javascript:setFocus3(2);" onMouseOver="javascript:setFocus3(2);" target="_self">情感绿洲</a></li>
<li class="b3"><a href="javascript:setFocus3(3);" onMouseOver="javascript:setFocus3(3);" target="_self">娱乐休闲</a></li>
<li class="b3a"><a href="/category_30.16z" target="_blank">电脑网络</a></li>
</ul></div>
<div class="con">
4444444
</div></div>
<script language="javascript">
function setFocus1_bak(i)
{
selectLayer1("all");
}
function selectLayer1(city) {
showTab("all", "none");
showTab("beijing", "none");
showTab("wuhan", "none");
showTab("shanghai", "none");
showTab("nanjing", "none");
showTab("guangzhou", "none");
showTab(city, "block");
}
function showTab(city, type) {
var className = "b2";
if (type == "block") {
className = "b1a";
}
document.getElementById("tab_"+city).style.display = type;
document.getElementById("tab_li_"+city).className = className;
}
</script>
<div class="leftRoll0" id="fN1" style="display:block;">
<div class="head">
<ul>
<li class="b1a" id="tab_li_all"><a href="/action_news.16z" onMouseOver="selectLayer1('all');" target="_blank">最新资讯</a></li>
<li class="b2" id="tab_li_beijing"><a href="/category_4.16z" onMouseOver="selectLayer1('beijing');" target="_blank">网络安全</a></li>
<li class="b2" id="tab_li_wuhan"><a href="/category_67.16z" onMouseOver="selectLayer1('wuhan');" target="_blank">动态报道</a></li>
<li class="b2" id="tab_li_shanghai"><a href="/category_66.16z" onMouseOver="selectLayer1('shanghai');" target="_blank">站长分享</a></li>
<li class="b2" id="tab_li_nanjing"><a href="/category_1.16z" onMouseOver="selectLayer1('nanjing');" target="_blank">科技世界</a></li>
<li class="b2" id="tab_li_guangzhou"><a href="/category_3.16z" onMouseOver="selectLayer1('guangzhou');" target="_blank">网络财经</a></li>
</ul>
</div>
<table cellspacing="0" cellpadding="0" id="tab_all" style="display:none;width:438px;height:200px;text-align:left;border-left:1px solid #cbcbcb;border-bottom:1px solid #cbcbcb;border-right:1px solid #cbcbcb;">
<tr>
<td >www.16z.com</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" id="tab_beijing" style="display:none;width:438px;height:200px;text-align:left;border-left:1px solid #cbcbcb;border-bottom:1px solid #cbcbcb;border-right:1px solid #cbcbcb;">
<tr>
<td >555555</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" id="tab_wuhan" style="display:none;width:438px;height:200px;text-align:left;border-left:1px solid #cbcbcb;border-bottom:1px solid #cbcbcb;border-right:1px solid #cbcbcb;">
<tr>
<td >444444</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" id="tab_shanghai" style="display:none;width:438px;height:200px;text-align:left;border-left:1px solid #cbcbcb;border-bottom:1px solid #cbcbcb;border-right:1px solid #cbcbcb;">
<tr>
<td >222222</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" id="tab_nanjing" style="display:none;width:438px;height:200px;text-align:left;border-left:1px solid #cbcbcb;border-bottom:1px solid #cbcbcb;border-right:1px solid #cbcbcb;">
<tr>
<td >111111</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" id="tab_guangzhou" style="display:none;width:438px;height:200px;text-align:left;border-left:1px solid #cbcbcb;border-bottom:1px solid #cbcbcb;border-right:1px solid #cbcbcb;">
<tr>
<td >0000000</td>
</tr>
</table>
</div>
<script language="JavaScript">
selectLayer1("all");
</script>
</body>
</html>节日到了QQ在线时间少了, 风格不会也没时间再次整理发布了.还有需要的朋友请让已下载的朋友分享一下.
[
本帖最后由 cdx61 于 2006-12-30 23:01 编辑 ]
