首页>>TAB标签>>纯CSS3实现Tab标签菜单(2014-07-24)

纯CSS3实现Tab标签菜单

纯CSS3实现Tab标签菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="widget">  
  2.   <ol class="widget-list" id="managers">  
  3.     <li>  
  4.       <a class="widget-list-link">  
  5.         <img src="">  
  6.         Manager #1 <span>481 followers</span>  
  7.       </a>  
  8.     </li>  
  9.     <li>  
  10.       <a class="widget-list-link">  
  11.         <img src="">  
  12.         Manager #2 <span>5162 followers</span>  
  13.       </a>  
  14.     </li>  
  15.     <li>  
  16.       <a class="widget-list-link">  
  17.         <img src="">  
  18.         Manager #3 <span>342 followers</span>  
  19.       </a>  
  20.     </li>  
  21.   </ol>  
  22.   
  23.   <ol class="widget-list" id="designers">  
  24.     <li>  
  25.       <a class="widget-list-link">  
  26.         <img src="">  
  27.         Designer #1 <span>481 followers</span>  
  28.       </a>  
  29.     </li>  
  30.     <li>  
  31.       <a class="widget-list-link">  
  32.         <img src="">  
  33.         Designer #2 <span>5162 followers</span>  
  34.       </a>  
  35.     </li>  
  36.     <li>  
  37.       <a class="widget-list-link">  
  38.         <img src="">  
  39.         Designer #3 <span>342 followers</span>  
  40.       </a>  
  41.     </li>  
  42.   </ol>  
  43.   
  44.   <ol class="widget-list" id="developers">  
  45.     <li>  
  46.       <a class="widget-list-link">  
  47.         <img src="">  
  48.         Developer #1 <span>481 followers</span>  
  49.       </a>  
  50.     </li>  
  51.     <li>  
  52.       <a class="widget-list-link">  
  53.         <img src="">  
  54.         Developer #2 <span>5162 followers</span>  
  55.       </a>  
  56.     </li>  
  57.     <li>  
  58.       <a class="widget-list-link">  
  59.         <img src="">  
  60.         Developer #3 <span>342 followers</span>  
  61.       </a>  
  62.     </li>  
  63.   </ol>  
  64.   
  65.   <ul class="widget-tabs">  
  66.     <li class="widget-tab">  
  67.       <a href="#managers" class="widget-tab-link">Managers</a>  
  68.       <!-- Omitting the end tag is valid HTML and removes the space in-between inline blocks. -->  
  69.     <li class="widget-tab">  
  70.       <a href="#designers" class="widget-tab-link">Designers</a>  
  71.     <li class="widget-tab">  
  72.       <a href="#developers" class="widget-tab-link">Developers</a>  
  73.   </ul>  
  74. </div>  

 


原文地址:http://www.freejs.net/article_tabbiaoqian_384.html