热门源码
|
热门软件
|
高级搜索
|
网站地图
|
文章
·
软件投稿
免费收录你的网站，现在加入广捷居！
庆祝Admin5·站长网广告联盟开通，抢先注册中.
CSS代码在线格式化、美化工具
首页
站长资讯
源码下载
素材图库
脚本特效
电子书籍
专题
开源者社区
智能模糊搜索
资源名称检索
本站推荐
：
共享世纪推荐的2010·互联网建站品牌CMS
Windows/Linux高性能主机
2G 155元，3G 198元，5G 300元，欢迎联系本站站长选购！
圆角背景自适应加选项卡
脚本类别：
综合技巧
添加时间：
2009-04-23
查看次数：
作者：
bluebirdsky
脚本代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Author" content="青鸟" /> <meat name="Author BlogURL" content="www.bluebirdsky.cn［Bluebirdsky］" /> <title>背景自适应</title> <script language="javascript" type="text/javascript"> <!-- /*各选项间切换*/ function setTab(name,cursel,n){ for(i=1;i<=n;i++){ var nav=document.getElementById(name+i); var con=document.getElementById("con_"+name+"_"+i); nav.className=i==cursel?"hover":""; con.style.display=i==cursel?"block":"none";} } //--> </script> <style type="text/css"> <!-- body{ background:#FFF; font:12px normal Arial, Helvetica, sans-serif; color:#444; } h1{ font-size:16px;/*h1字体大小和行高最好用px定义,用em容易导致字体放大后产生裂缝*/ line-height:22px; color:#014A99; font-weight:bold; text-align:center; } h2{ font-size:14px; line-height:20px; color:#444; font-weight:bold; text-align:left } p{ color:#444; font-size:12px; line-height:18px; text-align:left; text-indent:24px; } #details{ width:690px; height:auto; margin:0 auto; } /*==============选项卡===============*/ #setTab{ width:600px; padding:0px; margin:0 auto; } .menuBox{ width:564px; height:30px; line-height:30px; background:url(/Pri_upfile/jspic/2009/settab_bg.gif); padding:0 18px; } .menuBox ul{ margin:0px; padding:0px; } .menuBox li{ width:188px; height:30px; float:left; display:block; cursor:pointer; font-size:12px; color:#444; text-align:center; color:#000; font-weight:bold; line-height:30px; } .menuBox li.hover{ width:188px; height:30px; padding:0px; background:url(/Pri_upfile/jspic/2009/settabhover.gif); color:#fff; font-weight:bold; line-height:30px; } .detailBox{ width:600px; margin:0 auto;/*ff下调用*/ *margin:0 45px;/*ie下调用*/ } //--> </style> </head> <body> <div id="details"> <table cellspacing="0" cellpadding="0"> <tr><td style="width:690px; height:65px; background:url(/Pri_upfile/jspic/2009/bg_detailstop.gif) no-repeat center;"><h1>Details</h1></td></tr> <tr><td style="width:600px; height:auto; background:url(/Pri_upfile/jspic/2009/bg_detailsmiddle.gif) repeat-y;"> <div id="setTab"> <ul class="menuBox"> <li id="one1" class="hover" onmouseover="setTab('one',1,4)" >这里是五行文字</li> <li id="one2" onmouseover="setTab('one',2,4)" >这里是十行文字</li> <li id="one3" onmouseover="setTab('one',3,4)">这里是七行文字</li> </ul> <div class="detailBox"> <div id="con_one_1" > <p>这里是五行文字这里是五行文字这里是五行文字这里是五行文字这里是五行文字这里是五行文字这里是五行文字这里是五行文字这里是五行文字这里是五行文字这里是五行文字这里是五行文字这里是五行文字这里是五行文字这里是五行文字这里是五行文字这里是五行文字这里是五行文字这里是五行文字这里是五行文字这里是五行文字这里是五行文字这里是五行文字这里是五行文字这里是五行文字这里是五行文字这里是五行文字这里是五行文字这里是五行文字这里是五行文字这里是五行文字这里是五行文字这里是五行文字这里是五行文字这里是五行文字</p> </div> <div id="con_one_2" style="display:none"> <p>这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字这里是十行文字 </div> <div id="con_one_3" style="display:none"> <p>这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字这里是七行文字</p> </div> </div> </div> </td></tr> <tr><td style="width:690px; height:38px; background:url(/Pri_upfile/jspic/2009/bg_detailsbottom.gif) no-repeat center;"></td></tr> </table> </div> </body> </html>
loading...
当前页面所处路径为
共享世纪
/
脚本特效
/
综合技巧
/ ，本特效的Tag为：
共享世纪
圆角背景自适应加选项卡角背景自适应及滑动选项卡,IE,FF测试均通过...
会员登陆
close X
用户名
密 码
验证码
