CSS滑动门完美解决方案

按常规,应该叫仿TAB页框,而不是滑动门。

在一页可以放多个类似的内容框,当然,样式也得有多个对应。

这段代码是在其他人的代码的基础上修改而来的,主要是解决了内容框的宽度受限制的问题。因为之前的Menubox 的背景图片是带四个边框,并分格的样式,限制了内容框的宽度需要是背景图片格宽的整数倍,<li>标签的分隔是通过border-right来实现的。
修改后的背景图片只带下边框,上、左、右框都是通过最外面的一个DIV的边框来实现。

修改前的Menubox 背景图片


修改后的Menubox 背景图片


修改前的hover背景图片


修改后的hover背景图片



样式代码:

<style type="text/css">
<!--
.tabfrm1{width:490px;border:1px solid #A8C29F;padding:0px;margin:1 auto;}
.tabfrm2{width:576px;border:1px solid #A8C29F;padding:0px;margin:1 auto;}
.tabfrm3{width:876px;border:1px solid #A8C29F;padding:0px;margin:1 auto;}
#Tab1{width:100%;margin:0px;padding:0px;}/*选项卡1*/
#Tab2{width:100%;margin:0px;padding:0px;margin:0 auto;}/*选项卡2*/
#Tab3{width:100%;margin:0px;padding:0px;margin:0 auto;}
/*菜单class*/
.Menubox {width:100%;padding:0px;background:url(http://img.kqyx.cn/bg/tab_2010.gif);height:28px;line-height:28px;border-left:0px solid #A8C29F;border-right:0px solid #A8C29F;border-top:0px solid #A8C29F;}
.Menubox ul{margin:0px;padding:0px;}
.Menubox li{float:left;display:block;cursor:pointer;width:114px;text-align:center;color:#949694;font-weight:bold;padding:0;height:27px;line-height:27px;margin:0px;background:url(http://img.kqyx.cn/bg/tab_2010.gif);border-right:1px solid #A8C29F;
/*background:#FFFFFF;*/
}
.Menubox li.hover{
margin-top:-1px;margin-left:-1px;padding:0px;background:#fff;width:116px;border:0px;background:url(http://img.kqyx.cn/bg/tab_2010_hover.gif);color:#739242;font-weight:bold;height:29px;line-height:28px;}
.Contentbox{clear:both;width:100%;margin-top:0px;border-left:0px solid #A8C29F;border-right:0px solid #A8C29F;border-bottom:0px solid #A8C29F;border-top:none;height:181px;text-align:center;padding-top:8px;background:#FFFFFF;}
-->
</style>

<script>
<!--
/*第一种形式 第二种形式 更换显示样式*/
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
//-->
</script>


具体表现的代码:

<div class=tabfrm1>
<div id="Tab1">
<div class="Menubox">
<ul>
    <li class="hover" id="one1" onclick="setTab('one',1,4)">新闻1 </li>
    <li id="one2" onclick="setTab('one',2,4)">新闻2 </li>
    <li id="one3" onclick="setTab('one',3,4)">新闻3 </li>
    <li id="one4" onclick="setTab('one',4,4)">新闻4 </li>
</ul>
</div>
<div class="Contentbox">
<div class="hover" id="con_one_1">新闻列表1</div>
<div id="con_one_2" style="DISPLAY: none">新闻列表2</div>
<div id="con_one_3" style="DISPLAY: none">新闻列表3</div>
<div id="con_one_4" style="DISPLAY: none">新闻列表4</div>
</div>
</div>
</div>


修改前的效果是:


修改后的效果是:


如果要说这个方案的不足之处的话,那就是分隔的线条没有图片的效果来得有质感,没那么立体。

[本日志由 ancher 于 2011-01-04 02:09 AM 编辑]
上一篇: ADODB.Stream 错误“800a0bbc” 写入文件失败 备忘
下一篇: 把网页文字图片变成灰色的CSS代码
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: CSS 滑动门 仿TAB
相关日志:
评论: 0 | 引用: 0 | 查看次数: 3066
发表评论
你没有权限发表评论!