CSS3实例学习2-tab
制作tab选择栏，原理就是使用radio作为标签，因为每次只能选择一个，所以和tab效果一样。
1、html5代码如下：
<section class="radiotabs">
<input type="radio" name="tab" id="tab1" class="tabs" checked="checked">
<label for="tab1">
tab1
</label>
<input type="radio" name="tab" id="tab2" class="tabs">
<label for="tab2">
tab2
</label>
<input type="radio" name="tab" id="tab3" class="tabs">
<label for="tab3">
tab3
</label>
<input type="radio" name="tab" id="tab4" class="tabs">
<label for="tab4">
tab4
</label>
<input type="radio" name="tab" id="tab5" class="tabs">
<label for="tab5">
tab5
</label>
<section id="view1" class="tabcontent">
内容一
</section>
<section id="view2" class="tabcontent">
内容二
</section>
<section id="view3" class="tabcontent">
内容三
</section>
<section id="view4" class="tabcontent">
内容四
</section>
<section id="view5" class="tabcontent">
内容五
</section>
</section>
2、css代码比较复杂：
/*单选标签*/
input.tabs {
display:none;
}
/*单选标签及相邻的label：+符号代表相邻元素*/
input.tabs + label {
display:block; /*显示*/
font:normal 12px/30px arial, sans-serif; /*字体*/
border:1px solid #aaa; /*边框*/
background:#69c; /*背景*/
text-decoration:none; /*下划线*/
color:#fff; /*颜色*/
float:left; /*浮动对齐*/
position:relative; /*位置*/
padding:0 20px; /*内边距*/
margin-right:2px; /*右外边距*/
border-radius:5px 5px 0 0; /*圆角半径*/
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, rgba(255, 255, 255, 0.7)), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.3))); /*背景（gradient：渐变效果，linear：线性渐变）*/
background-image:-moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:-ms-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:-o-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
}
/*标签下图片效果*/
input.tabs + label img {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
cursor:pointer;
}
/*标签内容*/
.tabcontent {
width:700px; /*宽度*/
padding:20px; /*内边距*/
border:1px solid #aaa; /*边框*/
border-radius:0 5px 5px 5px; /*圆角半径*/
background:#fff; /*背景颜色*/
position:relative; /*位置*/
z-index:10; /*层次*/
display:none; /*显示效果*/
clear:left; /*清理左边*/
top:-1px; /*上边缘位置*/
box-shadow:0 15px 10px -15px rgba(0,0,0,0.4); /*阴影*/
}
/*标签内容*/
.tabcontent {
display:none; /*显示*/
color:#000; /*颜色*/
}
/*被选中的radio按钮和label*/
input.tabs:checked + label {
background-color:#fff;
border-bottom:1px solid #fff;
color:#000; z-index:20;
}
/*选中的radio按钮*/
input#tab1:checked ~ section#view1 {display:block;}
input#tab2:checked ~ section#view2 {display:block;}
input#tab3:checked ~ section#view3 {display:block;}
input#tab4:checked ~ section#view4 {display:block;}
input#tab5:checked ~ section#view5 {display:block;}
input#tab5:checked ~ section#view5 {display:block;}
在chrome下显示效果如下：