Tip: You can modify some of the code before running
<! DOCTYPE html> <ptml lang= "en" > <pead> <meta charset= "UTF-8" > <title>pure CSS3 tab</title& Gt <style type= "Text/css" > *{margin:0; padding:0; body{font-size:14px; line-height:2;} Li{list-style:none;} A{color: #666; text-decoration:none;} A:hover{color: #f00;} . sidebar{width:80%; margin:0 Auto; . inline-ul {font-size:0;/* All browsers/*word-spacing:-1px;/* IE6, 7 */} Inline-ul ul li{font-size:12px; Letter-spacing:normal; Word-spacing:normal; Vertical-align:top; Display:inline-block; *display:inline; *zoom:1; @media screen and (-webkit-min-device-pixel-ratio:0) {/* Firefox letter-spacing can cause horizontal displacement of elements out of the normal stream. inline-ul{Let ter-spacing:-5px;/* Safari and so on does not support the font size is 0 browser, N according to the parent font adjustment */}}. widget-title {font-size:13px; Font-weight:normal; Color: #888888; padding:20px 20px 0px; }. Widget-tab. widget-title{font-size:0;} . Widget-tab. widget-box{margin:0 20px 20px;background: #F7F7F7} widget-tab. widget-titLe ul li{margin-left:0;width:30%;text-align:center;margin-right:1.3%;p adding:8px 1%;} . widget-tab. Widget-title ul li:hover{background: #F7F7F7} widget-tab. Widget-title label{cursor:pointer;display: Block font-size:14px;} . widget-tab. Widget-title ul li.active{background: #F7F7F7}. Widget-tab Input{display:none} widget-tab. Widget-box ul{ Display:none} #new: Checked ~ widget-title. New, #hot: Checked ~ widget-title. Hot, #random: Checked ~ widget-title. Rando M{background: #F7F7F7} #new: Checked ~ widget-box new-list, #hot: Checked ~ widget-box. Hot-list, #random: Checked ~. Widget-box. Random-list{display:block}. Widget-box ul Li a{padding-left:20px; </style> </pead> <body> <div class= "sidebar" > <div class= "widget Widget-tab" > <input Type= "Radio" name= "Widget-tab" id= "new" checked= "checked"/> <input "type=" Radio "name=" Widget-tab "Hot" id= <input type= "Radio" name= "Widget-tab" id= "random"/> <div class= "Widget-title inLine-ul "> <ul> <li class=" new "> <label for=" new "> Latest entries </label> </li> & Lt;li class= "Hot" > <label for= "Warm" > Thermal review Bowen </label> </li> <li class= "random" > &L T;label for= "random" > Random posts </label> </li> </ul> </div> <div class= "Widget-box" > <ul class= "New-list" > <li> original wordpress Theme Tutorials #4: Hot Click articles </li> <li> original wordpres S Theme Tutorials #3: Featured Articles </li> <li> original WordPress Theme Tutorials: Top Recommended articles </li> <li> original wordpres S Theme Tour #: recently modified articles </li> </ul> <ul class= "hot-list" > <li> how I learn JavaScript < /li> <li> about modern search engine optimization (SEO) </li> <li> 10 excellent jquery mobile Theme </li> <li> JavaScript Learning 15: Creating Objects </li> <li> Fully understanding object-oriented JavaScript </li> <LI&G T Mobile End Touch Sliding plugin SWIPE.Js </li> <li> Pure css Slides </li> <li> win7 installation Nodejs and Solutions </li> & lt;/ul> <ul class= "random-list" > <li> how to use font awesome font </li> <li> on PS Original WordPress Theme Tutorial #: Recently modified articles </li> <li> bootstrap Learning and Usage summary </li> <li> using C SS3 change the color of selected text </li> <li> js15-5:javascript inheritance </li> <li> 4.20-6.11, busy interview, think Future </li> <li> Grunt: Task run manager </li> <li> Sublime Text2 Open File as dump format < /li> </ul> </div> </div> </div> </body> </ptml></td> </tr> &L T;/table>
Tip: You can modify some of the code before running
