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

Rank: 7Rank: 7Rank: 7

積分
5068 
威望
5068  
金錢
2878  
最後登錄
2024-11-19 

熱心會員貢獻特別級會員資深版主正式版主中級會員高級會員金牌會員論壇元老
1# 跳轉到 » 倒序看帖
打印
tT
无界發表於 2013-5-20 19:42 | 只看該作者

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

老规矩，先看截图：
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>

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

評分人數

收藏 分享
爱秀代码

Rank: 4

積分
671 
威望
671  
金錢
7  
最後登錄
2019-12-6 
2#
3526639發表於 2013-5-20 20:58 | 只看該作者
强 我喜欢

TOP

Rank: 4

積分
671 
威望
671  
金錢
7  
最後登錄
2019-12-6 
3#
3526639發表於 2013-5-20 21:04 | 只看該作者
强 我喜欢 代码太多哟 诶 用不起

TOP

Rank: 6Rank: 6

積分
1666 
威望
1666  
金錢
1127  
最後登錄
2014-11-16 
4#
xuan發表於 2013-5-20 22:23 | 只看該作者
謝謝分享，提供
   請各位多多支持，謝謝ww

TOP

Rank: 7Rank: 7Rank: 7

積分
8659 
威望
8659  
金錢
10077  
最後登錄
2024-11-23 

中級會員高級會員金牌會員論壇元老正式版主資深版主熱心會員
5#
4rphotoclub發表於 2013-5-21 00:13 | 只看該作者
本帖最後由 4rphotoclub 於 2013-5-21 00:18 編輯

大家一定要收下這好東西啊
歡迎大家齊來加入4R網上攝影會

TOP

Rank: 6Rank: 6

積分
2835 
威望
2835  
金錢
2475  
最後登錄
2018-10-27 

金牌會員中級會員高級會員
6#
pigeon發表於 2013-5-21 11:54 | 只看該作者
感谢分享。

TOP

返回列表