繁體
|
簡體
Sclub交友聊天~加入聊天室當版主
(檢舉)
分享
新浪微博
QQ空间
人人网
腾讯微博
Facebook
Google+
Plurk
Twitter
Line
標題:
[分享]
仿制固定左下角精美导航栏
[打印本頁]
作者:
无界
時間:
2013-5-20 19:42
標題:
仿制固定左下角精美导航栏
老规矩,先看截图:
下載
(14.75 KB)
2013-5-20 19:39
预览地址:
http://tlb.258club.com/
新建页头通栏广告,将下面代码复制进去。文字内容和链接自己改一下即可。
<div style="position:fixed; left:0px; bottom:10px;z-index:9999;">
<style type="text/css">
body {margin:0px;border:0px;font-size:12px;background-color:#fff;}
a:link{color: #003278;text-decoration: none;}
a:visited{color: #003278;text-decoration: none;}
a:hover{color: #FF6600;text-decoration: underline;}
#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;}
#slide{padding-top:5px}
#slide li img{margin-right:3px}
#box_TLB ul{padding:0;margin:0;clear:both;list-style:none;overflow:hidden}
#box_TLB li{float:left;font-weight:bold;height:37px !important;height:27px;}
#box_TLB li a:link,#box_TLB li a:visited{color:#000;}
#box_TLB li a:hover{color:#ff7300;text-decoration: none}
#box_TLB .l{background:url(http://fc03.deviantart.net/fs70/f/2013/139/7/0/slidebox_tableft_by_bjwujie-d65swg4.gif);width:80px;}
#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}
#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;}
#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;}
#box_TLB .hide{display:none}
#box_TLB .l a{width:52px;}
#box_TLB .r a{width:68px;}
.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;}
#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;}
.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;}
.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;}
.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;}
.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;}
.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;}
.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;}
#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}
#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}
#box_TLB .oneline{line-height:33px;}
</style>
<div id="box_TLB">
<div id="slide">
<ul>
<li class="l_h"><a href="logging.php?action=login" class="btn_zchy">登陆</a></li>
<li class="r"><a href="my.php" class="btn_cxt">我的帖子</a></li>
</ul>
<div class="cont_l" id="app_1">
TLB爱我吧俱乐部欢迎你!
</div>
<div class="hide" id="app_2">
TLB爱我吧俱乐部欢迎你!
</div>
<ul>
<li class="l"><a href="task.php" class="btn_tggs">我的任务</a></li>
<li class="r"><a href="register.php" class="btn_fbxx">注册会员</a></li>
</ul>
<div class="hide" id="app_3">
TLB爱我吧俱乐部欢迎你!
</div>
<div class="hide" id="app_4">
TLB爱我吧俱乐部欢迎你!
</div>
<ul>
<li class="l"><a href="search.php" class="btn_xzmj">搜索</a></li>
<li class="r"><a href="" class="btn_alisoft">我的宠物</a></li>
</ul>
<div class="hide" id="app_5">
TLB爱我吧俱乐部欢迎你!
</div>
<div class="hide" id="app_6">
TLB爱我吧俱乐部欢迎你!
</div>
</div>
</div>
<script type="text/javascript">
var slideTabIndex=1;
var sTabList = document.getElementById("box_TLB").getElementsByTagName("li");
for(var i=0;i<sTabList.length;i++){
var obj = sTabList[i].getElementsByTagName("a")[0];
sTabList[i].getElementsByTagName("a")[0].id="slideBtn_"+(i+1);
if (obj.addEventListener) {
obj.addEventListener( "mouseover", overSlide, false );
}
else if (obj.attachEvent) {
obj.attachEvent( "onmouseover", overSlide );
}
}
function overSlide(e){
e = window.event || e;
var srcElement = e.srcElement || e.target;
var newTabIndex=srcElement.id.replace("slideBtn_","");
var pos = srcElement.parentNode.className;
if(newTabIndex==""||pos.indexOf("_h")!=-1)return;
document.getElementById("slideBtn_"+slideTabIndex).parentNode.className=document.getElementById("slideBtn_"+slideTabIndex).parentNode.className.replace("_h","");
document.getElementById("app_"+slideTabIndex).className="hide";
document.getElementById("app_"+newTabIndex).className="cont_"+pos;
srcElement.parentNode.className = pos+"_h";
slideTabIndex=newTabIndex;
}
</script>
</div>
複製代碼
圖片附件:
QQ截图20130520193604.jpg
(2013-5-20 19:39, 14.75 KB) / 下載次數 1798
http://utmall.com/discuz/attachment.php?aid=20617&k=68d85751e2bf64e782a920853070be19&t=1732379472&sid=cFw1Dc
作者:
3526639
時間:
2013-5-20 20:58
强 我喜欢
作者:
3526639
時間:
2013-5-20 21:04
强 我喜欢 代码太多哟 诶 用不起
作者:
xuan
時間:
2013-5-20 22:23
謝謝分享,提供
作者:
4rphotoclub
時間:
2013-5-21 00:13
本帖最後由 4rphotoclub 於 2013-5-21 00:18 編輯
大家一定要收下這好東西啊
作者:
pigeon
時間:
2013-5-21 11:54
感谢分享。
歡迎光臨 SCLUB免費論壇申請-使用者論壇 (http://utmall.com/discuz/)
Powered by Discuz! 7.2