首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

一款纯css3实现的tab选项卡的实列教程

所属分类： 网页制作 / CSS 阅读数： 255
收藏 0 赞 0 分享

　　今天给大家带来一款纯css3实现的tab选项卡。单击左侧的选项的时候，右侧内容以动画的形式展示。效果图如下：

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <div class="night-tabs night-tabs-color-default night-tabs-animation-slide-right night-tabs-position-vleft">  
  2.         <!--Tab 1-->  
  3.         <input type="radio" name="night-tabs" checked="" id="tab1" class="content1">  
  4.         <!--Checked= Tab shown-->  
  5.         <label for="tab1">  
  6.             <!--Modify icon and name-->  
  7.             <span><span><em class="fa fa-home"></em>Night Tabs</span></span>  
  8.         </label>  
  9.         <!--Tab 2-->  
  10.         <input type="radio" name="night-tabs" id="tab2" class="content2">  
  11.         <label for="tab2">  
  12.             <!--Modify icon and name-->  
  13.             <span><span><em class="fa fa-font"></em>Typography</span></span>  
  14.         </label>  
  15.         <!--Tab 3-->  
  16.         <input type="radio" name="night-tabs" id="tab3" class="content3">  
  17.         <label for="tab3">  
  18.             <!--Modify icon and name-->  
  19.             <span><span><em class="fa fa-list"></em>Grid Systen</span></span>  
  20.         </label>  
  21.         <!--Tab 4-->  
  22.         <input type="radio" name="night-tabs" id="tab4" class="content4">  
  23.         <label for="tab4">  
  24.             <!--Modify icon and name-->  
  25.             <span><span><em class="fa fa-legal"></em>License</span></span>  
  26.         </label>  
  27.         <!--Content-->  
  28.         <ul class="night-tabs-content">  
  29.             <!--Tab 1-->  
  30.             <li class="content1">  
  31.                 <div class="content-1-content">  
  32.                     <!--Content goes here-->  
  33.                     <h1 class="h1">  
  34.                         Night Tabs</h1>  
  35.                     <p>  
  36.                         <span class="dropcap">N</span>ight Tabs (formerly TrueTabs) is an extensive CSS3   
  37.                         Tabbed Content snippet. It started out small as a typical CSS Tabs snippet, but   
  38.                         I have expanded it greatly. It offers many features, and can be easily modified   
  39.                         to fit your needs. Some of the features include: Cross browser support, preset animations,   
  40.                         colors, and layouts, a responsive grid system, and a typography set, among other   
  41.                         things.</p>  
  42.                 </div>  
  43.             </li>  
  44.             <!--Tab 2-->  
  45.             <li class="content2">  
  46.                 <div class="content-2-content">  
  47.                     <!--Content goes here-->  
  48.                     <h1 class="h1">  
  49.                         Custom Fonts</h1>  
  50.                     <h2 class="h2">  
  51.                         Open Sans Light</h2>  
  52.                     <h3 class="h3">  
  53.                         <em class="fa fa-check"></em>FontAwesome</h3>  
  54.                     <p>  
  55.                         <h2 class="h2">  
  56.                             Paragraphs and Quotes</h2>  
  57.                         <blockquote class="blockquote">  
  58.                             Maecenas tincidunt nunc est, nec pharetra odio porta ac. Morbi cursus lacinia neque,   
  59.                             tristique tincidunt ipsum tincidunt a.   
  60.                         </blockquote>  
  61.                         <div class="well">  
  62.                             <p>  
  63.                                 Maecenas tincidunt nunc est, nec pharetra odio porta ac. Morbi cursus lacinia neque,   
  64.                                 tristique tincidunt ipsum tincidunt a.</p>  
  65.                         </div>  
  66.                         <p>  
  67.                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada rutrum   
  68.                             felis, quis imperdiet nisl finibus id. Etiam commodo vitae purus a lobortis. Donec   
  69.                             lacinia dapibus metus nec feugiat. Integer blandit tellus vel dapibus efficitur.   
  70.                             Nulla placerat sollicitudin laoreet. Maecenas fermentum eros diam, at blandit lectus   
  71.                             volutpat ac.Proin ornare mauris dui, semper condimentum urna blandit non. Vestibulum   
  72.                             ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut   
  73.                             scelerisque justo sit amet sem commodo, ac porta arcu auctor.</p>  
  74.                         <h3 class="h3">  
  75.                             Unordered Lists</h3>  
  76.                         <ul class="night-tabs-unordered-list">  
  77.                             <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.   
  78.                                 <ul class="night-tabs-unordered-list">  
  79.                                     <li>Nulla vitae lacus sed dui fringilla elementum eu id eros.</li>  
  80.                                     <li>Vivamus euismod mauris sit amet iaculis porttitor.</li>  
  81.                                     <li>Donec condimentum massa non elit lobortis, a ultrices ante vulputate.</li>  
  82.                                 </ul>  
  83.                             </li>  
  84.                             <li>Nulla vitae lacus sed dui fringilla elementum eu id eros.</li>  
  85.                             <li>Vivamus euismod mauris sit amet iaculis porttitor.</li>  
  86.                             <li>Donec condimentum massa non elit lobortis, a ultrices ante vulputate.</li>  
  87.                         </ul>  
  88.                         <h3 class="h3">  
  89.                             Ordered Lists</h3>  
  90.                         <ol class="night-tabs-ordered-list">  
  91.                             <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.   
  92.                                 <ol class="night-tabs-ordered-list">  
  93.                                     <li>Nulla vitae lacus sed dui fringilla elementum eu id eros.</li>  
  94.                                     <li>Vivamus euismod mauris sit amet iaculis porttitor.</li>  
  95.                                     <li>Donec condimentum massa non elit lobortis, a ultrices ante vulputate.</li>  
  96.                                 </ol>  
  97.                             </li>  
  98.                             <li>Nulla vitae lacus sed dui fringilla elementum eu id eros.</li>  
  99.                             <li>Vivamus euismod mauris sit amet iaculis porttitor.</li>  
  100.                             <li>Donec condimentum massa non elit lobortis, a ultrices ante vulputate.</li>  
  101.                         </ol>  
  102.                         <div class="text-right">  
  103.                             <em>Typography Set</em>  
  104.                         </div>  
  105.                 </div>  
  106.             </li>  
  107.             <!--Tab 3-->  
  108.             <li class="content3">  
  109.                 <div class="content-3-content">  
  110.                     <!--Content goes here-->  
  111.                     <div class="grid-row">  
  112.                         <div class="grid-column grid-column-6">  
  113.                             <h2 class="h2">  
  114.                                 HTML5</h2>  
  115.                             <p>  
  116.                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ante nisl, condimentum   
  117.                                 nec dolor viverra, dignissim convallis est. In commodo rhoncus augue, a euismod   
  118.                                 felis placerat ut. Ut ullamcorper libero tortor, ut semper lectus congue ut. Morbi   
  119.                                 pulvinar, nisi at pharetra scelerisque, nibh magna ornare augue, vel aliquet ipsum   
  120.                                 ante eu sem. Maecenas id est risus. Nulla facilisis dui molestie euismod mollis.   
  121.                                 Duis vehicula elementum justo in porta. Maecenas erat lectus, finibus vel lectus   
  122.                                 non, consequat ultricies dolor. Nunc ultricies quam in purus facilisis, porttitor   
  123.                                 blandit odio volutpat. Sed sed posuere lectus, sit amet rutrum est. Duis porttitor   
  124.                                 purus blandit, lacinia nibh quis, ultricies augue.</p>  
  125.                         </div>  
  126.                         <div class="grid-column grid-column-6">  
  127.                             <h2 class="h2">  
  128.                                 CSS3</h2>  
  129.                             <p>  
  130.                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ante nisl, condimentum   
  131.                                 nec dolor viverra, dignissim convallis est. In commodo rhoncus augue, a euismod   
  132.                                 felis placerat ut. Ut ullamcorper libero tortor, ut semper lectus congue ut. Morbi   
  133.                                 pulvinar, nisi at pharetra scelerisque, nibh magna ornare augue, vel aliquet ipsum   
  134.                                 ante eu sem. Maecenas id est risus. Nulla facilisis dui molestie euismod mollis.   
  135.                                 Duis vehicula elementum justo in porta. Maecenas erat lectus, finibus vel lectus   
  136.                                 non, consequat ultricies dolor. Nunc ultricies quam in purus facilisis, porttitor   
  137.                                 blandit odio volutpat. Sed sed posuere lectus, sit amet rutrum est. Duis porttitor   
  138.                                 purus blandit, lacinia nibh quis, ultricies augue.</p>  
  139.                         </div>  
  140.                     </div>  
  141.                     <div class="grid-row">  
  142.                         <div class="grid-column grid-column-12">  
  143.                             <h2 class="h2">  
  144.                                 NO JavaScript</h2>  
  145.                             <p>  
  146.                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ante nisl, condimentum   
  147.                                 nec dolor viverra, dignissim convallis est. In commodo rhoncus augue, a euismod   
  148.                                 felis placerat ut. Ut ullamcorper libero tortor, ut semper lectus congue ut. Morbi   
  149.                                 pulvinar, nisi at pharetra scelerisque, nibh magna ornare augue, vel aliquet ipsum   
  150.                                 ante eu sem. Maecenas id est risus. Nulla facilisis dui molestie euismod mollis.   
  151.                                 Duis vehicula elementum justo in porta. Maecenas erat lectus, finibus vel lectus   
  152.                                 non, consequat ultricies dolor. Nunc ultricies quam in purus facilisis, porttitor   
  153.                                 blandit odio volutpat. Sed sed posuere lectus, sit amet rutrum est. Duis porttitor   
  154.                                 purus blandit, lacinia nibh quis, ultricies augue.</p>  
  155.                         </div>  
  156.                         <div class="text-right">  
  157.                             <em>Night Tabs - CSS3 Tabbed Content</em>  
  158.                         </div>  
  159.                     </div>  
  160.                 </div>  
  161.             </li>  
  162.             <!--Tab 4-->  
  163.             <li class="content4">  
  164.                 <div class="content-4-content">  
  165.                     <!--Content goes here-->  
  166.                     <h1 class="h1">  
  167.                         Night Tabs - v0.2.0</h1>  
  168.                     <p>  
  169.                         Coded by Jason Shi under the MIT License.</p>  
  170.                 </div>  
  171.             </li>  
  172.         </ul>  
  173.     </div>  

　　css3代码：

CSS Code复制内容到剪贴板
  1. /*------------------------------------*\  
  2.     #RESET  
  3. \*------------------------------------*/  
  4. .night-tabs a,   
  5. .night-tabs div,   
  6. .night-tabs em,   
  7. .night-tabs img,   
  8. .night-tabs ul,   
  9. .night-tabs&n
更多精彩内容其他人还在看

CSS3实现背景透明文字不透明的示例代码

这篇文章主要介绍了CSS3实现背景透明文字不透明的示例代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

浅谈CSS中的尺寸单位

这篇文章主要介绍了浅谈CSS中的尺寸单位的相关资料,浏览器的兼容性越来越好，移动端基本是清一色的webkit，经常会用到css的不同尺寸/长度单位，这里做个整理。感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

CSS中有些属性的前面会加上“*”或“_”所代表的意思

这篇文章主要介绍了CSS中有些属性的前面会加上“*”或“_”所代表的意思,需要的朋友可以参考下
收藏 0 赞 0 分享

CSS 设置滚动条样式的实例代码

这篇文章主要介绍了CSS 设置滚动条样式的实例代码，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
收藏 0 赞 0 分享

纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）

这篇文章主要介绍了纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

纯css实现多级折叠菜单折叠树效果

这篇文章主要介绍了纯css实现多级折叠菜单折叠树效果，运用checkbox的checked值来判断下级栏目是否展开，通过css3选择器提供的checked伪类来实现此效果，感兴趣的朋友参考下吧
收藏 0 赞 0 分享

CSS Grid 网格布局全解析

这篇文章主要介绍了CSS Grid 网格布局全解析的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

css flex 弹性布局详解

这篇文章主要介绍了css flex 弹性布局详解的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

CSS3 二级导航菜单的制作的示例

这篇文章主要介绍了CSS3 二级导航的制作的示例的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

使用css禁用input、checkbox、select等html控件实现disable效果

这篇文章主要介绍了使用css禁用input、checkbox、select等html控件实现disable效果,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 www.zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22