css3圆角tab选项卡代码

2020-01-27 14:19:38

字体：大中小

来源：转载

供稿：网友

CSS3+jquery实现圆角选项卡，鼠标点击时候才切换的那种选项卡，无图片修饰，全部代码写出来的，基于CSS3技术，测试请用火狐。IE8下看不到圆角效果。

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery+css3圆角tab选项卡切换</title><style>*{margin: 0;padding: 0;}body{font: 14px Georgia, serif;}h1{width: 310px;margin: 0 auto;padding: 20px 0;color: #222;}.group: before,.group: after{content: "";display: table;}.group: after{clear: both;}.group{zoom: 1;}body{background: #222;}#content{background: white;min-height: 400px;}.tabs{list-style: none;margin: 60px auto 0;width: 660px;}.tabs li{float: left;position: relative;}.tabs a{float: left;padding: 10px 40px;text-decoration: none;color: black;background: #ddc385;-webkit-border-top-left-radius: 15px;-webkit-border-top-right-radius: 15px;-moz-border-radius-topleft: 15px;-moz-border-radius-topright: 15px;border-top-left-radius: 15px;border-top-right-radius: 15px;}.tabs .active{z-index: 3;}.tabs .active a{background: white;color: black;}.tabs li: before, .tabs li: after,.tabs li a: before, .tabs li a: after{position: absolute;bottom: 0;}.tabs li: last-child: after, .tabs li: last-child a: after,.tabs li: first-child: before, .tabs li: first-child a: before,.tabs .active: after, .tabs .active: before,.tabs .active a: after, .tabs .active a: before{content: "";}.tabs .active: before, .tabs .active: after{background: white;z-index: 1;}.tabs li: before, .tabs li: after{background: #ddc385;width: 10px;height: 10px;}.tabs li: before{left: -10px;}.tabs li: after{right: -10px;}.tabs li a: after, .tabs li a: before{width: 20px;height: 20px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;background: #222;z-index: 2;}.tabs .active a: after, .tabs .active a: before{background: #ddc385;}.tabs li: first-child.active a: before,.tabs li: last-child.active a: after{background: #222;}.tabs li a: before{left: -20px;}.tabs li a: after{right: -20px;}</style><script src="/ajaxjs/jquery-1.6.2.min.js"></script><script>$(function(){	$("li").click(function(e) {		e.preventDefault();		$("li").removeClass("active");		$(this).addClass("active");	});});</script></head><body>	<ul class="tabs group">	  <li class="active"><a href="#one">One</a></li> 	  <li><a href="#two">Two</a></li> 	  <li><a href="#three">Three</a></li>	  <li><a href="#three">Four</a></li> 	</ul><div id="content"><h1>Round Out Tabs</h1></div></body></html>

上一篇：CSS Hack最新写法汇总

下一篇：Div实现表格布局一例

学习交流

phpwind的rewrite重写原理

phpwind的rewrite重写原理...

热门图片

猜你喜欢的新闻

猜你喜欢的关注