萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 純CSS實現漂亮tab選項卡切換特效
純CSS實現漂亮tab選項卡切換特效
<!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>DivCSS教程排行
程序編程推薦
相關文章
圖片文章
copyright © 萬盛學電腦網 all rights reserved