免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
Board logo

标题: [建站代码] 超酷的海贼王主页风格 [打印本页]
作者: 竞技鱼    时间: 2017-6-1 10:28     标题: 超酷的海贼王主页风格

效果图：
[attach]766[/attach][attach]768[/attach][attach]767[/attach]


新建模块，名称自己取，然后网页地址是http://你的论坛地址/你模板地址（例如：templates/default）/你的模块地址（例如：haizeiwang)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html;charset=gb2312">
  5. <!--把下面代码加到<head>与</head>之间-->
  6. <style type="text/css">
  7. html,body{height:100%;overflow:hidden;}
  8. body{margin:0px;text-align:left;font:12px/140% Arial,Verdana,"微软雅黑";}
  9. img{border:0;}
  10. div,dl,dt,td,dd,ul,ol,li,h1,h3,h4,h5,h6,pre,code,form,fieldset,legend,p,blockquote{list-style:none;margin:0px;padding:0px;}
  11. address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font-style:normal;}
  12. #top{width:100%;height:65px;position:absolute;top:0px;left:0px; background:url(http://www.zzsky.cn/effect/images/201112/302145/top.png) no-repeat center;z-index:1;}
  13. #box{width:100%;height:100%;position:absolute;top:59px;left:0px; background:url(http://www.zzsky.cn/effect/images/201112/302145/bj.jpg) no-repeat center top;}
  14. #content{width:960px;height:620px; position:absolute;left:50%;top:76px;margin:0 0 0 -480px;z-index:2;}
  15. #content li{width:209px;height:600px;float:left;display:inline; margin-left:30px;}
  16. #content li span{width:100%;float:left;}
  17. #content li span.top{height:27px;background:url(http://www.zzsky.cn/effect/images/201112/302145/lian_2.png) no-repeat center;}
  18. #content li span.conter{height:76px;background:url(http://www.zzsky.cn/effect/images/201112/302145/lian.png) repeat-y center top;}
  19. #content li span.bottom{width:100%;height:270px;background:url(http://www.zzsky.cn/effect/images/201112/302145/tu.png) no-repeat center top;overflow:hidden;}
  20. #content li span.bottom_1{width:209px;height:294px;background:url(http://www.zzsky.cn/effect/images/201112/302145/tu_1.png) no-repeat center top;overflow:hidden;}
  21. #content li .title{width:162px;height:31px;float:left;display:inline;margin:24px 0 0 25px;text-align:center;overflow:hidden;position:relative;}
  22. #content li .titl{position:absolute;top:0px;left:0px;}
  23. #content li .tit{width:162px;height:31px;float:left;background:url(http://www.zzsky.cn/effect/images/201112/302145/but.png) no-repeat;text-align:center;}
  24. #content li .tit_1{width:162px;height:31px;float:left;background:url(http://www.zzsky.cn/effect/images/201112/302145/but.png) no-repeat 0 -31px;text-align:center;}
  25. #content li .tit span{width:100%;height:17px;overflow:hidden;display:inline;margin-top:6px;}
  26. #content li .tit_1 span{width:100%;height:17px;overflow:hidden;display:inline;margin-top:6px;}
  27. #content li .img{width:162px;height:202px;float:left;display:inline;margin:6px 0 0 25px;filter:alpha(opacity=20);opacity:0.2;cursor:pointer;}
  28. #content li .img_1{width:178px;height:220px;float:left;display:inline;margin:6px 0 0 16px;filter:alpha(opacity=100);opacity:1;}
  29. .bg{width:100%;height:100%;position:absolute;background:#000;filter:alpha(opacity=0);opacity:0;display:none;z-index:10;}
  30. .load{width:16px;height:16px;position:absolute;top:50%;left:50%;margin:-8px 0 0 -8px;display:none;z-index:102;background:url(http://www.zzsky.cn/effect/images/201112/302145/load_1.gif) no-repeat;}
  31. .picBg{width:100%;height:100%;position:absolute;top:0;left:0;z-index:100;display:none;background:#000;filter:alpha(opacity=70);opacity:0.7;}
  32. .picLoad{width:16px;height:16px;position:absolute;top:50%;left:50%;display:none;margin:-8px 0 0 -8px;z-index:102;background:url(http://www.zzsky.cn/effect/images/201112/302145/load_1.gif) no-repeat;}
  33. .oimg{width:0px;height:0px;position:absolute;top:50%;left:50%; background:#f1f1f1 url(http://www.zzsky.cn/effect/images/201112/302145/img_bg.jpg) no-repeat 14px 24px;padding:30px 20px 30px 20px;display:none;z-index:101;border:8px solid #151515;filter:alpha(opacity=100);opacity:1;}
  34. .oimg .opimg{filter:alpha(opacity=0);opacity:0;}
  35. .oimg .tit_close{width:590px;height:34px;position:absolute;top:0px;left:0px;}
  36. .oimg .tit_close h2{width:300px;height:34px;float:left;margin:0px;padding:0px;font-size:14px;line-height:34px; text-indent:20px;color:#1e2123;}
  37. .oimg .tit_close em{width:100px;height:34px;line-height:34px;float:right;font-style:normal;text-align:right;color:#999999;font-size:12px;padding-right:18px;font-weight:normal;}
  38. .oimg .tit_close em a{color:#999999;text-decoration:none;}
  39. .oimg .tit_close em a:hover{text-decoration:underline;}
  40. .oimg .bottom{width:590px;height:34px;position:absolute;bottom:0px;left:0px;}
  41. .oimg .bottom span{width:570px;height:32px;display:inline-block;font-size:12px;line-height:34px;padding-right:18px;text-align:right;}
  42. .oimg .bottom span a{color:#006699;text-decoration:underline;}
  43. .oimg img{float:left;filter:alpha(opacity=100);opacity:1;}
  44. .oimg .left_1{width:50%;height:70%;position:absolute;top:34px;left:0px;filter:alpha(opacity=0);opacity:0;cursor:pointer;background:#000;}
  45. .oimg .right_1{width:50%;height:70%;position:absolute;top:34px;right:0px;filter:alpha(opacity=0);opacity:0;cursor:pointer;background:#ff0000;}
  46. .oimg .l{width:28px;height:28px;position:absolute;top:50%;left:50px;margin:-14px 0 0 0;display:none;cursor:pointer;background:url(http://www.zzsky.cn/effect/images/201112/302145/fancybox.png) no-repeat -40px -28px;z-index:1;}
  47. .oimg .r{width:28px;height:28px;position:absolute;top:50%;right:50px;margin:-14px 0 0 0;display:none;cursor:pointer;background:url(http://www.zzsky.cn/effect/images/201112/302145/fancybox.png) no-repeat -40px -58px;z-index:1;}
  48. .xian_t{width:0px;height:2px;position:absolute;top:320px;left:0px;background: url(http://www.zzsky.cn/effect/images/201112/302145/xian.jpg);overflow:hidden;z-index:11;}
  49. .xian_b{width:0px;height:2px;position:absolute;top:385px;right:0px;background: url(http://www.zzsky.cn/effect/images/201112/302145/xian.jpg) 0 -2px;overflow:hidden;z-index:11;}
  50. .box{width:0px;height:0px;position:absolute;top:352px;left:50%;margin:0 0 0 -5px;background:#1c1c1c;z-index:12;display:none;border:5px solid #1c1c1c;}
  51. .con{width:898px;height:398px;float:left;border:1px solid #757575;background:url(http://www.zzsky.cn/effect/images/201112/302145/bg_1.jpg);overflow:hidden;position:relative;}
  52. .con_1{width:10000px;height:398px;position:absolute;top:0px;left:0px;overflow:hidden;}
  53. .img_big{width:898px;height:0px;position:absolute;top:0px;left:0px;z-index:100px;overflow:hidden;background:#000;}
  54. .close{width:23px;height:0px;position:absolute;top:-5px;right:-5px;z-index:12; background:url(http://www.zzsky.cn/effect/images/201112/302145/close.png) no-repeat; overflow:hidden;cursor:pointer;}
  55. .left{width:16px;height:28px;position:absolute;top:50%;left:-30px;margin:-14px 0 0 0;z-index:12; background:url(http://www.zzsky.cn/effect/images/201112/302145/sj.png) no-repeat; overflow:hidden;cursor:pointer;filter:alpha(opacity=0);opacity:0;}
  56. .right{width:16px;height:28px;position:absolute;top:50%;right:-30px;margin:-14px 0 0 0;z-index:12; background:url(http://www.zzsky.cn/effect/images/201112/302145/sj.png) no-repeat -16px 0; overflow:hidden;cursor:pointer;filter:alpha(opacity=0);opacity:0;}
  57. #loading{width:100%;height:100%;position:absolute;top:0px;left:0px;background:#000;z-index:10;filter:alpha(opacity=100);opacity:1;}
  58. #loading div{background:#242424;border-radius:8px 8px 8px 8px;box-shadow:2px 2px 2px #1e1e1e;height:50px;left:50%;line-height:50px;margin:-25px 0 0 -100px;position:absolute;text-align:center;top:50%;width:200px; color:#ededed;font-size:14px;letter-spacing:2px;text-align:left;filter:alpha(opacity=100);opacity:1;}
  59. #loading div span{width:16px;height:16px;float:left;display:inline;margin:16px 10px 0 20px;background:url(http://www.zzsky.cn/effect/images/201112/302145/load_1.gif) no-repeat;}
  60. </style>
  61. </head>
  62. <body>
  63. <!--把下面代码加到<body>与</body>之间-->
  64. <div class="bg"></div>
  65. <div class="load"></div>
  66. <div id="loading">
  67.         <div><span></span>页面正在加载中……</div>
  68. </div>
  69. <div class="oimg" style="overflow:hidden;">
  70.     <div class="picBg"></div>
  71.         <div class="picLoad"></div>
  72.         <div class="tit_close"><h2></h2><em><a href="javascript:;" id="clos">×关闭</a></em></div>
  73.     <div class="bottom"><span><a href="javascript:;" target="_blank">>>点击浏览</a></span></div>
  74.     <div class="left_1"></div>
  75.     <div class="right_1"></div>
  76.     <div class="l"></div>
  77.     <div class="r"></div>
  78.     <img class="opimg">
  79. </div>
  80. <div class="xian_t"></div>
  81. <div class="xian_b"></div>
  82. <div class="box">
  83.     <div>
  84.         <span class="close"></span>
  85.         <span class="left"></span>
  86.         <span class="right"></span>
  87.     </div>
  88.         <div class="con">
  89.             <div class="con_1"></div>
  90.     </div>
  91. </div>
  92. <div id="top"></div>
  93. <div id="box"></div>
  94. <div id="content">
  95.         <ul>
  96.             <li>
  97.             <span class="top"></span>
  98.             <span class="conter"></span>
  99.             <span class="bottom">
  100.                 <div class="title">
  101.                         <div class="titl">
  102.                         <div class="tit"><span style="background:url(http://www.zzsky.cn/effect/images/201112/302145/sy.png) no-repeat center;"></span></div>
  103.                         <div class="tit_1"><span style="background:url(http://www.zzsky.cn/effect/images/201112/302145/sy_1.png) no-repeat center;"></span></div>
  104.                     </div>
  105.             </div>
  106.                 <div class="img"><img src="http://www.zzsky.cn/effect/images/201112/302145/demo.png"></div>
  107.             </span>
  108.         </li>
  109.         <li>
  110.                 <span class="top"></span>
  111.             <span class="conter"></span>
  112.             <span class="bottom">
  113.             <div class="title">
  114.                     <div class="titl">
  115.                         <div class="tit"><span style="background:url(http://www.zzsky.cn/effect/images/201112/302145/cgal.png) no-repeat center;"></span></div>
  116.                         <div class="tit_1"><span style="background:url(http://www.zzsky.cn/effect/images/201112/302145/cgal_1.png) no-repeat center;"></span></div>
  117.                     </div>
  118.         </div>
  119.                 <div class="img"><img src="http://www.zzsky.cn/effect/images/201112/302145/demo.png"></div>
  120.             </span>
  121.         </li>
  122.         <li>
  123.                 <span class="top"></span>
  124.             <span class="conter"></span>
  125.             <span class="bottom">
  126.             <div class="title">
  127.                     <div class="titl">
  128.                         <div class="tit"><span style="background:url(http://www.zzsky.cn/effect/images/201112/302145/xxnr.png) no-repeat center;"></span></div>
  129.                         <div class="tit_1"><span style="background:url(http://www.zzsky.cn/effect/images/201112/302145/xxnr_1.png) no-repeat center;"></span></div>
  130.                     </div>
  131.         </div>
  132.                 <div class="img"><img src="http://www.zzsky.cn/effect/images/201112/302145/demo.png"></div>
  133.             </span>
  134.         </li>
  135.         <li>
  136.                 <span class="top"></span>
  137.             <span class="conter"></span>
  138.             <span class="bottom">
  139.                 <div class="title">
  140.                     <div class="titl">
  141.                         <div class="tit"><span style="background:url(http://www.zzsky.cn/effect/images/201112/302145/zwjs.png) no-repeat center;"></span></div>
  142.                         <div class="tit_1"><span style="background:url(http://www.zzsky.cn/effect/images/201112/302145/zwjs_1.png) no-repeat center;"></span></div>
  143.                     </div>
  144.                 </div>
  145.                 <div class="img"><img src="http://www.zzsky.cn/effect/images/201112/302145/demo.png"></div>
  146.             </span>
  147.         </li>
  148.     </ul>
  149. </div>
  150. <script src="http://www.zzsky.cn/effect/images/201112/302145/js.js" type="text/javascript"></script>
  151. </body>
  152. </html>
复制代码




欢迎光临 竞技鱼-电子竞技|体育竞技|唯美壁纸|火爆影音|代码素材 (http://jju.funbbs.me/) Powered by Discuz! 7.2