标签：
转自：http://code.hcharts.cn/about.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 7 <title>title</title> 8 <meta name="description" content=""> 9 <meta name="keywords" content=""> 10 <style type="text/css"> 11 *, *:after, *:before{box-sizing:border-box;-webkit-box-sizing:border-box;} 12 .wrapper{width: 80em;margin: 0px auto} 13 .tabs-section [type="radio"]{display:none;} 14 .tabs-section [type="radio"] + label{display: inline-block; position: relative;color: #777;padding: .5em 1em; left: 6px;} 15 .tabs-section [type="radio"] + label:after{background-color: #fff;border:1px solid #999;border-bottom: none; display: block; width: 100%;height: 100%;content:‘‘; position: absolute; top: 0px;border-radius: .5em .5em 0 0; transform:perspective(100px) rotateX(30deg); background-color: #f0f0f0; left: 0px} 16 17 .tabs-section [type="radio"]:checked + label:after{background-color: #fff; z-index: 4} 18 19 .tabs-section [type="radio"] + label span{position: relative; cursor: pointer; z-index:5} 20 .tabs-section [type="radio"]:checked + label span{} 21 22 .tabs-content{border:1px solid #999; border-top:none; height: 32em; position: relative; overflow: hidden; box-shadow:0 -1px 0 #222; border-radius:0 0 .2em .2em} 23 .tabs-section section{z-index: 0; position: absolute; height: 100%; transition:all .4s ease; top: 0px;left: 0px; width: 100%; padding: 2em; visibility: hidden;} 24 25 26 .tabs-section [type="radio"]:nth-of-type(1):checked ~ .tabs-content section:nth-child(1){visibility: visible;} 27 .tabs-section [type="radio"]:nth-of-type(2):checked ~ .tabs-content section:nth-child(2){visibility: visible;} 28 .tabs-section [type="radio"]:nth-of-type(3):checked ~ .tabs-content section:nth-child(3){visibility: visible;} 29 .tabs-section [type="radio"]:nth-of-type(4):checked ~ .tabs-content section:nth-child(4){visibility: visible;} 30 </style> 31 </head> 32 <body> 33 34 <div class="wrapper"> 35 <div class="tabs-section"> 36 <div class="tabs-wrapper"> 37 <input type="radio" name="tab" id="about" checked="checked"/> 38 <label for="about"><span>About</span> 39 </label> 40 <input type="radio" name="tab" id="usage"/> 41 <label for="usage"><span>How to use</span> 42 </label> 43 <input type="radio" name="tab" id="cdn" /> 44 <label for="cdn"><span>CDN Files</span> 45 </label> 46 <input type="radio" name="tab" id="changelog" /> 47 <label for="changelog"><span>Change log</span> 48 </label> 49 50 <div class="tabs-content"> 51 <section>About</section> 52 <section>How to use</section> 53 <section>CDN Files</section> 54 <section>Change log</section> 55 </div> 56 </div> 57 </div> 58 59 </div> 60 </body> 61 </html>
标签：
原文地址：http://www.cnblogs.com/popos/p/4244364.html
