<!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 根據父級字型調節*/}}.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="“原創WordPress主題教程#4：熱門點擊文章”的固定連結">原創WordPress主題教程#4：熱門點擊文章</a></li><li><a href="/wordpress-feature-posts.html" title="“原創WordPress主題教程#3：精選推薦文章”的固定連結">原創WordPress主題教程#3：精選推薦文章</a></li><li><a href="/wordpress-sticky-posts.html" title="“原創WordPress主題教程#2：置頂推薦文章”的固定連結">原創WordPress主題教程#2：置頂推薦文章</a></li><li><a href="/wordpress-recent-update-posts-2.html" title="“原創WordPress主題教程#1：最近修改文章”的固定連結">原創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="淺談現代化搜尋引擎最佳化（SEO）">淺談現代化搜尋引擎最佳化（SEO）</a></li><li><a href="/10-best-free-jquery-mobile-theme.html" title="10個優秀的jQuery Mobile主題">10個優秀的jQuery Mobile主題</a></li><li><a href="/js-create-object.html" title="javascript學習15：建立對象">javascript學習15：建立對象</a></li><li><a href="/javascript-object-2.html" title="全面理解物件導向的 JavaScript">全面理解物件導向的 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="原創WordPress主題教程#1：最近修改文章" target="_blank">原創WordPress主題教程#1：最近修改文章</a></li><li><a href="/learn-bootstrap.html" title="bootstrap學習和使用的經驗總結" target="_blank">bootstrap學習和使用的經驗總結</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>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
