网页横向Tab效果实现

最近在做一个PHP的MVC,需要用一个横向tab效果,然后就写了个,希望有人用得着…
Tab效果实现的方法很多,每个人都可能会有自己的实现方式,既然是万国牌,再写写我的方法也无妨,相信这种做法的人也会很多。

这种tab分为左右两块,左边是tab,右边是内容,由于选中的tab把右边框架的边框盖住了,所以会给人一种整体的效果。
已测试浏览器:IE6,IE8,ff,chrome,opera.

CSS:

#Tab{margin:3px; min-width:150px;}
#Tab .tab{width:121px; border:#cccccc solid 1px; border-right:none; border-bottom:none; position:absolute;}
#Tab .tab ul{margin:0; padding:0;}
#Tab .tab li{line-height:31px; width:110px; border-bottom:#CCCCCC solid 1px; padding-left:10px; background:url(images/tabbg.jpg) repeat-x;}
#Tab .tab li a{color:#696969; font-weight:bold; text-decoration:none;}
#Tab .tab li a:hover{color:#DA1007;}
#Tab .tab li.focus{background:white; width:111px;}
#Tab .tab li.focus a{color:#DA1007;}
#Tab .tcont{padding-left:121px;}
#Tab .tcont .cont{border:#CCCCCC solid 1px; height:200px;}

HTML:

<div id="Tab">
	<div class="tab">
		<ul>
			<li><a href="">menu1</a></li>
			<li class="focus"><a href="">menu2</a></li>
			<li><a href="">menu3</a></li>
		</ul>
	</div>
	<div class="tcont">
		<div class="cont">

		</div>
	</div>
</div>

Leave a comment

Your email address will not be published. Required fields are marked *