CSS3实例学习2-tab_css中的tabcontent是什么意思

制作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下显示效果如下：