Discuz!官方免费开源建站系统

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索

[展示] 什么什么仿163.什么同城VK.什么什么巴中RX

[复制链接]
cdx61 发表于 2006-11-27 23:31:13 | 显示全部楼层 |阅读模式
已下载并使用:  http://www.16z.com/  这个风格的.人请继续往下看:


我重新更新了这个叫-"滑动门"的东西?  IE-火狐下都可以滑~~:)


由于风格不会再重新整理发布(原因很简单:不喜被挨骂.特别是无辜被骂), 所以我把滑动门的核心代码提出来,便于已下载的朋友想更新朋友更新.   

演示: http://tool.16z.com/my163.htm   

1.请更据链接把几个CSS中要用的背景图片下载回去.
2.到SS后台生成相应的需要调用的代码替换11111...222...之类的相关文字即可.
3.再用现在的滑动门替换原来你需要替换的相关内容.

前提是你需要或愿意用现在这个滑动门.  如果不需要或认以前的不错的,请当作这贴不存在.
  1. <style type="text/css">
  2. <!--
  3. *{ padding:0; margin:0;list-style-type:none;}
  4. .col1{float:left; width:438px;padding:0px 0px 5px 0px;}
  5. .leftRoll0{width:438px;padding:8px 0px 8px 0px;}
  6. .leftRoll0 .head{width:438px;height:23px;}
  7. .leftRoll0 .head li{float:left;height:23px; line-height:23px;}
  8. .leftRoll0 .head .b1{width:73px; background:url(http://www.16z.com/images/163com/i1.gif) no-repeat}
  9. .leftRoll0 .head .b1a{width:73px; background:url(http://www.16z.com/images/163com/i1a.gif) no-repeat}
  10. .leftRoll0 .head .b2{width:73px; background:url(http://www.16z.com/images/163com/i2.gif) no-repeat}
  11. .leftRoll0 .head .b2a{width:73px; background:url(http://www.16z.com/images/163com/i2a.gif) no-repeat}
  12. .leftRoll0 .ti{width:430px;margin:0 auto; text-align:left; font-weight:700;}
  13. .leftRoll0 table td{border-top:1px dotted #CECECE; text-align:left; height:22px; line-height:22px; padding-top:3px;}
  14. .leftRoll0 table .gray{color:#656565;}
  15. .leftRoll0 table .orange{color:#DE6306;}
  16. .leftRoll1{width:436px;margin:0 auto; text-align:left;}
  17. .leftRoll1 .ti{width:436px;}
  18. .leftRoll1 .ti li{ float:left; width:109px; height:23px; line-height:23px; text-align:center;}
  19. .leftRoll1 .ti .b3{ background:url(http://www.16z.com/images/163com/i61.gif) no-repeat;}
  20. .leftRoll1 .ti .b3a{ background:url(http://www.16z.com/images/163com/i3a.gif) no-repeat;}
  21. .leftRoll1 .ti .b4{ background:url(http://www.16z.com/images/163com/i4.gif) no-repeat;}
  22. .leftRoll1 .ti .b4a{ background:url(http://www.16z.com/images/163com/i4a.gif) no-repeat;}
  23. .leftRoll1 .con{width:436px;height:200px;text-align:left;border-left:1px solid #cbcbcb;border-bottom:1px solid #cbcbcb;border-right:1px solid #cbcbcb;}
  24. .leftRoll1 .zon{width:425px;float:center;text-align:left;border-left:6px solid #fff;}
  25. .leftRoll1 .pon{width:425px;float:center;text-align:left;border-top:5px solid #fff;}
  26. .leftRoll1 li { height: 1.6em;   background: url(../images/new/) no-repeat 0.3em 0.7em; }
  27. -->
  28. </style>
  29. </head>
  30. <body>
  31. <script language="javascript">
  32. function setFocus3(i)
  33. {
  34. selectLayer3(i);
  35. }
  36. function selectLayer3(i)
  37. {
  38. switch(i)
  39. {
  40. case 1:
  41. document.getElementById("N1").style.display="block";
  42. document.getElementById("N2").style.display="none";
  43. document.getElementById("N3").style.display="none";
  44. document.getElementById("N4").style.display="none";
  45. break;
  46. case 2:
  47. document.getElementById("N1").style.display="none";
  48. document.getElementById("N2").style.display="block";
  49. document.getElementById("N3").style.display="none";
  50. document.getElementById("N4").style.display="none";
  51. break;
  52. case 3:
  53. document.getElementById("N1").style.display="none";
  54. document.getElementById("N2").style.display="none";
  55. document.getElementById("N3").style.display="block";
  56. document.getElementById("N4").style.display="none";
  57. break;
  58. case 4:
  59. document.getElementById("N1").style.display="none";
  60. document.getElementById("N2").style.display="none";
  61. document.getElementById("N3").style.display="none";
  62. document.getElementById("N4").style.display="block";
  63. break;
  64. }
  65. }
  66. </script>     
  67.    
  68. <div class="leftRoll1" id="N1" style="display:block;">
  69.   <div class="ti">
  70.    <ul>
  71.    
  72.           <li class="b4"><a href="/action_blog.16z" target="_blank">最新日志</a></li>
  73.     <li class="b3"><a href="javascript:setFocus3(2);" onMouseOver="javascript:setFocus3(2);" target="_self">情感绿洲</a></li>
  74.     <li class="b3"><a href="javascript:setFocus3(3);" onMouseOver="javascript:setFocus3(3);" target="_self">娱乐休闲</a></li>
  75.     <li class="b3"><a href="javascript:setFocus3(4);" onMouseOver="javascript:setFocus3(4);" target="_self">电脑网络</a></li>
  76.     </ul></div>
  77.   <div class="con">
  78. 11111111111
  79.   </div></div>
  80.      
  81. <div class="leftRoll1" id="N2" style="display:none;">
  82.   <div class="ti">
  83.    <ul>
  84.     <li class="b4a"><a href="javascript:setFocus3(1);" onMouseOver="javascript:setFocus3(1);" target="_self">最新日志</a></li>
  85.    
  86.           <li class="b3a"><a href="/category_7.16z" target="_blank">情感绿洲</a></li>
  87.     <li class="b3"><a href="javascript:setFocus3(3);" onMouseOver="javascript:setFocus3(3);" target="_self">娱乐休闲</a></li>
  88.     <li class="b3"><a href="javascript:setFocus3(4);" onMouseOver="javascript:setFocus3(4);" target="_self">电脑网络</a></li>
  89.     </ul></div>
  90.   <div class="con">
  91. 2222222222
  92.   </div></div>
  93.      
  94.   <div class="leftRoll1" id="N3" style="display:none;">
  95.   <div class="ti">
  96.    <ul>
  97.     <li class="b4a"><a href="javascript:setFocus3(1);" onMouseOver="javascript:setFocus3(1);" target="_self">最新日志</a></li>
  98.     <li class="b3"><a href="javascript:setFocus3(2);" onMouseOver="javascript:setFocus3(2);" target="_self">情感绿洲</a></li>
  99.    
  100.           <li class="b3a"><a href="/category_8.16z" target="_blank">娱乐休闲</a></li>
  101.     <li class="b3"><a href="javascript:setFocus3(4);" onMouseOver="javascript:setFocus3(4);" target="_self">电脑网络</a></li>
  102.     </ul></div>
  103.   <div class="con">
  104. 33333333
  105.   </div></div>
  106.      
  107. <div class="leftRoll1" id="N4" style="display:none;">
  108.   <div class="ti">
  109.    <ul>
  110.     <li class="b4a"><a href="javascript:setFocus3(1);" onMouseOver="javascript:setFocus3(1);" target="_self">最新日志</a></li>
  111.     <li class="b3"><a href="javascript:setFocus3(2);" onMouseOver="javascript:setFocus3(2);" target="_self">情感绿洲</a></li>
  112.     <li class="b3"><a href="javascript:setFocus3(3);" onMouseOver="javascript:setFocus3(3);" target="_self">娱乐休闲</a></li>
  113.    
  114.           <li class="b3a"><a href="/category_30.16z" target="_blank">电脑网络</a></li>
  115.     </ul></div>
  116.   <div class="con">
  117. 4444444
  118.   </div></div>     

  119.      



  120. <script language="javascript">
  121. function setFocus1_bak(i)
  122. {
  123.     selectLayer1("all");
  124. }
  125. function selectLayer1(city) {
  126.     showTab("all", "none");
  127.     showTab("beijing", "none");
  128.     showTab("wuhan", "none");
  129.     showTab("shanghai", "none");
  130.     showTab("nanjing", "none");
  131.     showTab("guangzhou", "none");
  132.     showTab(city, "block");
  133. }
  134. function showTab(city, type) {
  135.     var className = "b2";
  136.     if (type == "block") {
  137.         className = "b1a";
  138.     }
  139.     document.getElementById("tab_"+city).style.display = type;
  140.     document.getElementById("tab_li_"+city).className = className;
  141. }
  142. </script>   
  143. <div class="leftRoll0" id="fN1" style="display:block;">
  144. <div class="head">
  145.   <ul>
  146.    <li class="b1a" id="tab_li_all"><a href="/action_news.16z" onMouseOver="selectLayer1('all');" target="_blank">最新资讯</a></li>
  147.    <li class="b2" id="tab_li_beijing"><a href="/category_4.16z" onMouseOver="selectLayer1('beijing');" target="_blank">网络安全</a></li>
  148.    <li class="b2" id="tab_li_wuhan"><a href="/category_67.16z" onMouseOver="selectLayer1('wuhan');" target="_blank">动态报道</a></li>
  149.    <li class="b2" id="tab_li_shanghai"><a href="/category_66.16z" onMouseOver="selectLayer1('shanghai');" target="_blank">站长分享</a></li>
  150.    <li class="b2" id="tab_li_nanjing"><a href="/category_1.16z" onMouseOver="selectLayer1('nanjing');" target="_blank">科技世界</a></li>
  151.    <li class="b2" id="tab_li_guangzhou"><a href="/category_3.16z" onMouseOver="selectLayer1('guangzhou');" target="_blank">网络财经</a></li>
  152.       </ul>
  153. </div>
  154. <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;">
  155.   
  156.   <tr>
  157.     <td >www.16z.com</td>
  158.   </tr>
  159.   
  160. </table>
  161.   



  162. <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;">
  163.   
  164.   <tr>
  165.     <td >555555</td>
  166.   </tr>
  167.   
  168. </table>
  169.   



  170. <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;">
  171.   
  172.   <tr>
  173.     <td >444444</td>
  174.   </tr>
  175.   
  176. </table>
  177.   



  178. <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;">
  179.   
  180.   <tr>
  181.     <td >222222</td>
  182.   </tr>
  183.   
  184. </table>
  185.   



  186. <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;">
  187.   
  188.   <tr>
  189.     <td >111111</td>
  190.   </tr>
  191.   
  192. </table>
  193.   



  194. <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;">
  195.   
  196.   <tr>
  197.     <td >0000000</td>
  198.   </tr>
  199.   
  200. </table>
  201. </div>
  202. <script language="JavaScript">
  203.     selectLayer1("all");
  204. </script>

  205. </body>
  206. </html>
复制代码


节日到了QQ在线时间少了, 风格不会也没时间再次整理发布了.还有需要的朋友请让已下载的朋友分享一下.

[ 本帖最后由 cdx61 于 2006-12-30 23:01 编辑 ]

评分

1

查看全部评分

木和尚 发表于 2006-11-28 00:38:10 | 显示全部楼层
嘿嘿!~!~  你那个在线音乐  我现在一直在用
回复

使用道具 举报

木和尚 发表于 2006-11-28 00:39:26 | 显示全部楼层
那个风格能分享下吗
回复

使用道具 举报

mikeppsk 发表于 2006-11-28 11:11:57 | 显示全部楼层
顶啊,欢迎提供啊
回复

使用道具 举报

ydp1108 发表于 2006-11-28 11:25:05 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

 楼主| cdx61 发表于 2006-11-28 12:20:11 | 显示全部楼层
木人顶算了.~~~

[ 本帖最后由 cdx61 于 2006-11-28 16:38 编辑 ]
回复

使用道具 举报

 楼主| cdx61 发表于 2006-11-28 16:43:32 | 显示全部楼层
原帖由 ydp1108 于 2006-11-28 11:25 发表
楼主借了我东西哟  哈哈  不错   能整合就是牛啊

鼠标感应嘛是抄的.至于你顶部菜单的CSS样式我老早就在用了  ,请看 http://dz.16z.com
回复

使用道具 举报

开心一生 发表于 2006-11-28 17:13:13 | 显示全部楼层
:) 暂时没有发现任何错位,赞!
回复

使用道具 举报

jaryer 发表于 2006-11-28 18:06:54 | 显示全部楼层
不错..提供一下吧..
回复

使用道具 举报

 楼主| cdx61 发表于 2006-11-28 22:53:48 | 显示全部楼层
风格来了,
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2024-11-16 12:49 , Processed in 0.066937 second(s), 7 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表