免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
返回列表 發帖

[分享] 仿制固定左下角精美导航栏

老规矩,先看截图:
QQ截图20130520193604.jpg

预览地址:http://tlb.258club.com/

新建页头通栏广告,将下面代码复制进去。文字内容和链接自己改一下即可。
  1. <div  style="position:fixed; left:0px; bottom:10px;z-index:9999;">
  2. <style type="text/css">
  3. body {margin:0px;border:0px;font-size:12px;background-color:#fff;}
  4. a:link{color: #003278;text-decoration: none;}
  5. a:visited{color: #003278;text-decoration: none;}
  6. a:hover{color: #FF6600;text-decoration: underline;}
  7. #box_TLB{background:url(http://fc08.deviantart.net/fs70/f/2013/139/6/9/slidebox_bg_by_bjwujie-d65swgq.gif);height:168px;width:178px;padding-left:5px;padding-right:5px;}
  8. #slide{padding-top:5px}
  9. #slide li img{margin-right:3px}
  10. #box_TLB ul{padding:0;margin:0;clear:both;list-style:none;overflow:hidden}
  11. #box_TLB li{float:left;font-weight:bold;height:37px !important;height:27px;}
  12. #box_TLB li a:link,#box_TLB li a:visited{color:#000;}
  13. #box_TLB li a:hover{color:#ff7300;text-decoration: none}
  14. #box_TLB .l{background:url(http://fc03.deviantart.net/fs70/f/2013/139/7/0/slidebox_tableft_by_bjwujie-d65swg4.gif);width:80px;}
  15. #box_TLB .r{background:url(http://fc08.deviantart.net/fs71/f/2013/139/d/2/slidebox_tabright_by_bjwujie-d65swfw.gif);width:94px;float:right}
  16. #box_TLB .l_h{background:url(http://fc04.deviantart.net/fs71/f/2013/139/6/5/slidebox_tableft_h_by_bjwujie-d65swfy.gif);width:80px;}
  17. #box_TLB .r_h{background:url(http://fc03.deviantart.net/fs70/f/2013/139/c/f/slidebox_tabright_h_by_bjwujie-d65swfs.gif);width:94px;float:right;}
  18. #box_TLB .hide{display:none}
  19. #box_TLB .l a{width:52px;}
  20. #box_TLB .r a{width:68px;}
  21. .arrow{padding-left:8px;background:url(http://fc05.deviantart.net/fs70/f/2013/139/5/f/icon_arrow03_right_08x_by_bjwujie-d65swhh.gif) no-repeat;}
  22. #box_TLB .l a,#box_TLB .r a,#box_TLB .l_h a,#box_TLB .r_h a{padding-left:24px;display:block;height:100%;padding-top:10px;}
  23. .btn_zchy{background:url(http://fc05.deviantart.net/fs70/f/2013/139/f/e/icon_zchy01_12x_by_bjwujie-d65swgu.gif) 5px 10px no-repeat;}
  24. .btn_cxt{background:url(http://fc05.deviantart.net/fs70/f/2013/139/4/a/icon_cxt01_12x_by_bjwujie-d65swhb.gif) 5px 10px no-repeat;}
  25. .btn_tggs{background:url(http://fc06.deviantart.net/fs70/f/2013/139/4/b/icon_tggs01_12x_by_bjwujie-d65swh2.gif) 5px 10px no-repeat;}
  26. .btn_fbxx{background:url(http://fc04.deviantart.net/fs70/f/2013/139/1/8/icon_fbxx01_12x_by_bjwujie-d65swh8.gif) 5px 10px no-repeat;}
  27. .btn_xzmj{background:url(http://fc02.deviantart.net/fs70/f/2013/139/8/2/icon_xzmj01_12x_by_bjwujie-d65swgy.gif) 5px 10px no-repeat;}
  28. .btn_alisoft{background:url(http://fc07.deviantart.net/fs71/f/2013/139/7/2/icon_alisoft01_12x_by_bjwujie-d65swhn.gif) 5px 10px no-repeat;}
  29. #box_TLB .cont_l{float:left;background:url(http://fc09.deviantart.net/fs70/f/2013/139/e/b/slidebox_conleft_by_bjwujie-d65swgj.gif);width:157px;height:31px;padding:9px 7px 7px 14px;margin-bottom:4px;overflow:hidden}
  30. #box_TLB .cont_r{float:left;background:url(http://fc01.deviantart.net/fs71/f/2013/139/7/b/slidebox_conright_by_bjwujie-d65swge.gif);width:157px;height:31px;padding:9px 7px 7px 14px;margin-bottom:4px;overflow:hidden}
  31. #box_TLB .oneline{line-height:33px;}
  32. </style>

  33. <div id="box_TLB">
  34. <div id="slide">
  35.   <ul>
  36.   <li class="l_h"><a href="logging.php?action=login" class="btn_zchy">登陆</a></li>
  37.   <li class="r"><a href="my.php" class="btn_cxt">我的帖子</a></li>
  38.   </ul>
  39.   <div class="cont_l" id="app_1">
  40. TLB爱我吧俱乐部欢迎你!
  41.   </div>
  42.   <div class="hide" id="app_2">
  43. TLB爱我吧俱乐部欢迎你!
  44.   </div>
  45.    <ul>
  46.   <li class="l"><a href="task.php" class="btn_tggs">我的任务</a></li>
  47.   <li class="r"><a href="register.php" class="btn_fbxx">注册会员</a></li>
  48.   </ul>
  49.    <div class="hide" id="app_3">
  50. TLB爱我吧俱乐部欢迎你!
  51.   </div>
  52.   <div class="hide" id="app_4">
  53. TLB爱我吧俱乐部欢迎你!
  54. </div>
  55.   <ul>
  56.   <li class="l"><a href="search.php" class="btn_xzmj">搜索</a></li>
  57.   <li class="r"><a href="" class="btn_alisoft">我的宠物</a></li>
  58.   </ul>
  59.   <div class="hide" id="app_5">
  60. TLB爱我吧俱乐部欢迎你!
  61.   </div>
  62.   <div class="hide" id="app_6">
  63. TLB爱我吧俱乐部欢迎你!
  64.   </div>
  65. </div>   
  66. </div>
  67. <script type="text/javascript">
  68. var slideTabIndex=1;
  69. var sTabList = document.getElementById("box_TLB").getElementsByTagName("li");
  70. for(var i=0;i<sTabList.length;i++){
  71. var obj = sTabList[i].getElementsByTagName("a")[0];
  72. sTabList[i].getElementsByTagName("a")[0].id="slideBtn_"+(i+1);
  73. if (obj.addEventListener) {
  74. obj.addEventListener( "mouseover", overSlide, false );
  75. }
  76. else if (obj.attachEvent) {
  77. obj.attachEvent( "onmouseover", overSlide );
  78. }
  79. }
  80. function overSlide(e){
  81. e = window.event || e;
  82. var srcElement = e.srcElement || e.target;
  83. var newTabIndex=srcElement.id.replace("slideBtn_","");
  84. var pos = srcElement.parentNode.className;
  85. if(newTabIndex==""||pos.indexOf("_h")!=-1)return;
  86. document.getElementById("slideBtn_"+slideTabIndex).parentNode.className=document.getElementById("slideBtn_"+slideTabIndex).parentNode.className.replace("_h","");
  87. document.getElementById("app_"+slideTabIndex).className="hide";
  88. document.getElementById("app_"+newTabIndex).className="cont_"+pos;
  89. srcElement.parentNode.className = pos+"_h";
  90. slideTabIndex=newTabIndex;
  91. }
  92. </script>
  93. </div>
複製代碼
2

評分人數

强 我喜欢

TOP

强 我喜欢 代码太多哟 诶 用不起

TOP

謝謝分享,提供
   請各位多多支持,謝謝ww

TOP

本帖最後由 4rphotoclub 於 2013-5-21 00:18 編輯

大家一定要收下這好東西啊

TOP

感谢分享。

TOP

返回列表