您的位置：首页 > Web前端 > CSS

css3圆角tab选项卡代码

2015-06-02 14:53 701 查看

<!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>

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航