<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pure css3 tab</title>
<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;/* 所有瀏覽器 */
*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 會導致脫離普通流的元素水平位移 */
.inline-ul{
letter-spacing:-5px;/* Safari 等不支持字體大小為 0 的瀏覽器, N 根據(jù)父級字體調(diào)節(jié)*/
}
}
.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%;padding: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 .random{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>
</head>
<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" id="hot"/>
<input type="radio" name="widget-tab" id="random"/>
<div class="widget-title inline-ul">
<ul>
<li class="new">
<label for="new">最新博文</label>
</li>
<li class="hot">
<label for="hot">熱評博文</label>
</li>
<li class="random">
<label for="random">隨機博文</label>
</li>
</ul>
</div>
<div class="widget-box">
<ul class="new-list">
<li>
<a href="/wordpress-popular-view-posts.html" title="“原創(chuàng)WordPress主題教程#4：熱門點擊文章”的固定鏈接">原創(chuàng)WordPress主題教程#4：熱門點擊文章</a>
</li>
<li>
<a href="/wordpress-feature-posts.html" title="“原創(chuàng)WordPress主題教程#3：精選推薦文章”的固定鏈接">原創(chuàng)WordPress主題教程#3：精選推薦文章</a>
</li>
<li>
<a href="/wordpress-sticky-posts.html" title="“原創(chuàng)WordPress主題教程#2：置頂推薦文章”的固定鏈接">原創(chuàng)WordPress主題教程#2：置頂推薦文章</a>
</li>
<li>
<a href="/wordpress-recent-update-posts-2.html" title="“原創(chuàng)WordPress主題教程#1：最近修改文章”的固定鏈接">原創(chuàng)WordPress主題教程#1：最近修改文章</a>
</li>
</ul>
<ul class="hot-list">
<li>
<a href="/how-i-learn-javascript.html" title="我是如何學習JavaScript">我是如何學習JavaScript</a>
</li>
<li>
<a href="/my-seo-topic.html" title="淺談現(xiàn)代化搜索引擎優(yōu)化（SEO）">淺談現(xiàn)代化搜索引擎優(yōu)化（SEO）</a>
</li>
<li>
<a href="/10-best-free-jquery-mobile-theme.html" title="10個優(yōu)秀的jQuery Mobile主題">10個優(yōu)秀的jQuery Mobile主題</a>
</li>
<li>
<a href="/js-create-object.html" title="javascript學習15：創(chuàng)建對象">javascript學習15：創(chuàng)建對象</a>
</li>
<li>
<a href="/javascript-object-2.html" title="全面理解面向?qū)ο蟮?JavaScript">全面理解面向?qū)ο蟮?JavaScript</a>
</li>
<li>
<a href="/swipe.html" title="移動端觸摸滑動插件swipe.js">移動端觸摸滑動插件swipe.js</a>
</li>
<li>
<a href="/css-slide.html" title="純CSS幻燈片">純CSS幻燈片</a>
</li>
<li>
<a href="/nodejs-roll-back.html" title="win7安裝不了nodejs及解決方法">win7安裝不了nodejs及解決方法</a>
</li>
</ul>
<ul class="random-list">
<li>
<a href="/693.html" title="如何在PS上使用Font Awesome字體" target="_blank">如何在PS上使用Font Awesome字體</a>
</li>
<li>
<a href="/wordpress-recent-update-posts-2.html" title="原創(chuàng)WordPress主題教程#1：最近修改文章" target="_blank">原創(chuàng)WordPress主題教程#1：最近修改文章</a>
</li>
<li>
<a href="/learn-bootstrap.html" title="bootstrap學習和使用的經(jīng)驗總結(jié)" target="_blank">bootstrap學習和使用的經(jīng)驗總結(jié)</a>
</li>
<li>
<a href="/css3-selection.html" title="使用css3改變選中文本的顏色" target="_blank">使用css3改變選中文本的顏色</a>
</li>
<li>
<a href="/js-function-5.html" title="js15-5:javascript繼承" target="_blank">js15-5:javascript繼承</a>
</li>
<li>
<a href="/2012-2.html" title="4.20-6.11,忙碌面試，思考前途" target="_blank">4.20-6.11,忙碌面試，思考前途</a>
</li>
<li>
<a href="/grunt.html" title="GRUNT:任務運行管理器" target="_blank">GRUNT:任務運行管理器</a>
</li>
<li>
<a href="/sublime-text2-dump.html" title="sublime text2打開文件為dump格式" target="_blank">sublime text2打開文件為dump格式</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html></td>
</tr>
</table>
