首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

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

Posted in HTML / CSS onDecember 11, 2014

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

一款纯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 label,   
  10. .night-tabs li,   
  11. .night-tabs ol,   
  12. .night-tabs p,   
  13. .night-tabs span,   
  14. .night-tabs ul {   
  15.     /* ->>> Structure <<<-*/  
  16.     border: 0;   
  17.     margin: 0;   
  18.     padding: 0;   
  19.     position: relative;   
  20.     box-sizing: border-box /* CSS3 */  
  21. }   
  22.   
  23.   
  24.   
  25.   
  26.   
  27. /*------------------------------------*\  
  28.     #TAB LABELS  
  29. \*------------------------------------*/  
  30. .night-tabs {   
  31.     /* ->>> Structure <<<-*/  
  32.     margin: 0 auto; /* Center Night Tabs; optional. */  
  33.     width: 70%; /* Define width. */  
  34.     font: 300 0px/1.5   
  35.     "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Typography */  
  36.     color: #ecf0f1 /* Colors */  
  37. }   
  38.   
  39.     .night-tabs input {display: none} /* Hide Checkbox. */  
  40.     .night-tabs input:checked+label {cursor: default} /* Set cursor type. */  
  41.   
  42.     .night-tabs label {   
  43.         /* ->>> Structure <<<-*/  
  44.         display: inline-block;   
  45.         z-index: 1;   
  46.         border-bottom: 2px solid #353535;   
  47.         border-right: 1px solid #444;   
  48.         border-left: 1px solid #222;   
  49.         /* ->>> Typography <<<-*/  
  50.         cursor: pointer;   
  51.         font-size: 18px;   
  52.         line-height: 40px;   
  53.         text-align: left;   
  54.         /* ->>> CSS3 <<<-*/  
  55.         -webkit-user-select: none; /* ->>> Prevents double-click selection. <<<-*/  
  56.         -moz-user-select: none;   
  57.         -ms-user-select: none  
  58.     }   
  59.         .night-tabs label span {   
  60.             display: block;   
  61.             padding: .2em;   
  62.             background: #404040  
  63.         }   
  64.             .night-tabs label span span {   
  65.                 /* Structure */  
  66.                 border: 2px solid transparent;   
  67.                 padding: 0 1em;   
  68.                 /* CSS3*/  
  69.                 -webkit-transition: background .4s;   
  70.                 transition: background .4s   
  71.             }   
  72.   
  73.   
  74.   
  75.   
  76.   
  77.   
  78. /*------------------------------------*\  
  79.     #TAB CONTENT  
  80. \*------------------------------------*/  
  81. .night-tabs .night-tabs-content {   
  82.     display: block; /* Structure */  
  83.     font-size: 18px /* Typography */  
  84. }   
  85.     .night-tabs .night-tabs-content > li {   
  86.         /* Structure */  
  87.         left: 0;   
  88.         opacity: 0;   
  89.         overflow: auto;   
  90.         padding: 1em 1.5em; /* ->>> Spacing for content. <<<-*/  
  91.         position: absolute;   
  92.         top: 0;   
  93.         visibility: hidden;   
  94.         width: 100%;   
  95.         background: #404040; /* Colors */  
  96.         /* CSS3 */  
  97.         -webkit-transform-origin: 0 0;   
  98.         -ms-transform-origin: 0 0;   
  99.         transform-origin: 0 0;   
  100.         -webkit-transition: all .8s .1s; /* ->>> Intensity of tab effects. <<<-*/  
  101.         transition: all .8s .1s   
  102. }   
  103.   
  104. @charset "UTF-8";   
  105.   
  106. /**  
  107.  * CONTENTS - effects.css  
  108.  *  
  109.  * GENERAL STYLES  
  110.  * Setup for tab effects.  
  111.  *  
  112.  * SLIDE EFFECTS  
  113.  * Basic slide effects from different directions.  
  114.  *  
  115.  * ADVANCED EFFECTS  
  116.  * Advanced effects (scale, rotate, flip)  
  117.  *  
  118.  */  
  119.   
  120.   
  121.   
  122.   
  123.   
  124.   
  125.   
  126. /*------------------------------------*\  
  127.     #GENERAL STYLES  
  128. \*------------------------------------*/  
  129. .night-tabs>.content1:checked~ul>.content1,   
  130. .night-tabs>.content2:checked~ul>.content2,   
  131. .night-tabs>.content3:checked~ul>.content3,   
  132. .night-tabs>.content4:checked~ul>.content4 {   
  133.     /* Structure */  
  134.     opacity: 1;   
  135.     visibility: visible;   
  136.     /* CSS3 */  
  137.     -webkit-transform: none;   
  138.     -ms-transform: none;   
  139.     transform: none  
  140. }   
  141.   
  142.   
  143.   
  144.   
  145.   
  146.   
  147.   
  148.   
  149.   
  150.   
  151.   
  152. /*------------------------------------*\  
  153.     #SLIDE EFFECTS  
  154. \*------------------------------------*/  
  155.   
  156.   
  157.   
  158. /* ->>> Slide Up <<<-*/  
  159. .night-tabs-animation-slide-up .night-tabs-content > li {   
  160.     -webkit-transform: translateY(30px);   
  161.     -ms-transform: translateY(30px);   
  162.     transform: translateY(30px)   
  163. }   
  164.   
  165.   
  166.   
  167. /* ->>> Slide Down <<<-*/  
  168. .night-tabs-slide-down .night-tabs-content > li {   
  169.     -webkit-transform: translateY(-30px);   
  170.     -ms-transform: translateY(-30px);   
  171.     transform: translateY(-30px)   
  172. }   
  173.   
  174.   
  175.   
  176. /* ->>> Slide Left <<<-*/  
  177. .night-tabs-animation-slide-left .night-tabs-content > li {   
  178.     -webkit-transform: translateX(-30px);   
  179.     -ms-transform: translateX(-30px);   
  180.     transform: translateX(-30px)   
  181. }   
  182.   
  183.   
  184.   
  185. /* ->>> Slide Right <<<-*/  
  186. .night-tabs-animation-slide-rightright .night-tabs-content > li {   
  187.     -webkit-transform: translateX(30px);   
  188.     -ms-transform: translateX(30px);   
  189.     transform: translateX(30px)   
  190. }   
  191.   
  192.   
  193.   
  194. /* ->>> Slide Up + Left <<<-*/  
  195. .night-tabs-slide-up-left .night-tabs-content > li {   
  196.     -webkit-transform: translate(-30px, -30px);   
  197.     -ms-transform: translate(-30px, -30px);   
  198.     transform: translate(-30px, -30px)   
  199. }   
  200.   
  201.   
  202.   
  203. /* ->>> Slide Up + Right <<<-*/  
  204. .night-tabs-animation-slide-up-rightright .night-tabs-content > li {   
  205.     -webkit-transform: translate(30px, -30px);   
  206.     -ms-transform: translate(30px, -30px);   
  207.     transform: translate(30px, -30px)   
  208. }   
  209.   
  210.   
  211.   
  212. /* ->>> Slide Down + Left <<<-*/  
  213. .night-tabs-animation-slide-down-left .night-tabs-content > li {   
  214.     -webkit-transform: translate(-30px, 30px);   
  215.     -ms-transform: translate(-30px, 30px);   
  216.     transform: translate(-30px, 30px)   
  217. }   
  218.   
  219.   
  220.   
  221. /* ->>> Slide Down + Right <<<-*/  
  222. .night-tabs-animation-slide-down-rightright .night-tabs-content > li {   
  223.     -webkit-transform: translate(30px, 30px);   
  224.     -ms-transform: translate(30px, 30px);   
  225.     transform: translate(30px, 30px)   
  226. }   
  227.   
  228.   
  229.   
  230.   
  231.   
  232.   
  233.   
  234.   
  235.   
  236.   
  237.   
  238. /*------------------------------------*\  
  239.     #SLIDE EFFECTS  
  240. \*------------------------------------*/  
  241.   
  242.   
  243.   
  244. /* ->>> Rotate <<<-*/  
  245. .night-tabs-rotate > ul > li {   
  246.     -o-transform: rotate(10deg);   
  247.     -ms-transform: rotate(10deg);   
  248.     -moz-transform: rotate(10deg);   
  249.     -webkit-transform: rotate(10deg)   
  250. }   
  251. .night-tabs-animation-rotate.night-tabs.night-tabs-position-vleft > ul > li,   
  252. .night-tabs-animation-rotate.night-tabs.night-tabs-position-vright > ul > li {   
  253.     -o-transform: rotate(-10deg);   
  254.     -ms-transform: rotate(-10deg);   
  255.     -moz-transform: rotate(-10deg);   
  256.     -webkit-transform: rotate(-10deg)   
  257. }   
  258.   
  259.   
  260.   
  261. /* ->>> Scale <<<-*/  
  262. .night-tabs-animation-scale > ul > li {   
  263.     -webkit-transform: scale(0.6, 0.6);   
  264.     -ms-transform: scale(0.6, 0.6);   
  265.     transform: scale(0.6, 0.6)   
  266. }   
  267.   
  268.   
  269.   
  270. /* ->>> Flip <<<-*/  
  271. .night-tabs-animation-flip .night-tabs-content {   
  272.     -webkit-perspective: 2000px;   
  273.     perspective: 2000px;   
  274.     -webkit-perspective-origin: 50% 50%;   
  275.     perspective-origin: 50% 50%   
  276. }   
  277. .night-tabs-animation-flip .night-tabs-content > li {   
  278.     -webkit-transform: rotateX(-90deg);   
  279.     transform: rotateX(-90deg)   
  280. }   
  281. .night-tabs-animation-flip.night-tabs-position-vleft > .night-tabs-content > li {   
  282.     -webkit-transform: rotateY(90deg);   
  283.     transform: rotateY(90deg)   
  284. }   
  285. .night-tabs-animation-flip.night-tabs-position-vright > .night-tabs-content > li {   
  286.     -webkit-transform: rotateY(-90deg);   
  287.     transform: rotateY(-90deg)   
  288. }   
  289.   
  290. /**  
  291.  * CONTENTS - layouts.css  
  292.  *  
  293.  * HORIZONTAL POSITIONS  
  294.  * Basic horizontal positions: top, left, right, and justify.  
  295.  *  
  296.  * VERTICAL POSITIONS  
  297.  * Basic vertical positions, vertical left and vertical right.  
  298.  *  
  299.  */  
  300.   
  301.   
  302.   
  303.   
  304.   
  305.   
  306.   
  307. /*------------------------------------*\  
  308.     #HORIZONTAL POSITIONS  
  309. \*------------------------------------*/  
  310.   
  311.   
  312.   
  313. /* ->>> Left, Center, Right <<<-*/  
  314. .night-tabs-position-left label,   
  315. .night-tabs-position-center label,   
  316. .night-tabs-position-rightright label {width: auto}   
  317.   
  318. .night-tabs-position-left {text-align: left}   
  319. .night-tabs-position-center {text-align: center}   
  320. .night-tabs-position-rightright {text-align: rightright}   
  321.   
  322.   
  323.   
  324. /* ->>> Justified <<<-*/  
  325. .night-tabs-position-justify > input:first-child + label {padding-left: 0}   
  326. .night-tabs-position-justify2 > label {width: 50%}   
  327. .night-tabs-position-justify3 > label {width: 33.33%}   
  328. .night-tabs-position-justify4 > label {width: 25%}   
  329.   
  330.   
  331.   
  332.   
  333.   
  334.   
  335.   
  336. /*------------------------------------*\  
  337.     #VERTICAL POSITIONS  
  338. \*------------------------------------*/  
  339.   
  340.   
  341.   
  342. /* ->>> General Styles <<<-*/  
  343. .night-tabs-position-vleft .night-tabs-content > li,   
  344. .night-tabs-position-vright .night-tabs-content > li {border-top: 0}   
  345.   
  346. .night-tabs-position-vleft > label,   
  347. .night-tabs-position-vright > label {   
  348.     clear: left;   
  349.     display: block;   
  350.     float: left;   
  351.     margin-right: 0;   
  352.     width: 25%   
  353. }   
  354.   
  355.   
  356.   
  357. /* ->>> Vertical Left <<<-*/  
  358. .night-tabs-position-vleft label {border-right: 2px solid #333}   
  359. .night-tabs-position-vleft > .night-tabs-content {margin-left: 25%}   
  360.   
  361.   
  362.   
  363. /* ->>> Vertical Right <<<-*/  
  364. .night-tabs-position-vright > label {   
  365.     clear: rightright;   
  366.     float: rightright  
  367. }   
  368. .night-tabs-position-vright ul li { border-right: 1px solid #333}   
  369. .night-tabs-position-vright > .night-tabs-content {margin-right: 25%}   
  370.   
  371. .night-tabs-position-vright .night-tabs-content > li {   
  372.     -webkit-transform-origin: 100% 0%;   
  373.     -ms-transform-origin: 100% 0%;   
  374.     transform-origin: 100% 0%   
  375. }   
  376.   
  377.   
  378. /**  
  379.  * CONTENTS - typography.css  
  380.  *  
  381.  * BASIC TYPOGRAPHY  
  382.  * Styles for headings,paragraphs, and links.  
  383.  *  
  384.  * EXTENDED TYPOGRAPHY  
  385.  * Styling for images, unordered and ordered lists, and utility classes.  
  386.  *  
  387.  * GRID SYSTEM  
  388.  * Basic 12 fluid column grid system with offset support.  
  389.  *  
  390.  */  
  391.   
  392.   
  393.   
  394.   
  395.   
  396.   
  397.   
  398. /*------------------------------------*\  
  399.     #BASIC TYPOGRAPHY  
  400. \*------------------------------------*/  
  401.   
  402.   
  403.   
  404. /* ->>> Headings <<<-*/  
  405. h1, h2, h3 { margin: 0; padding: 0 }   
  406.   
  407. .night-tabs .night-tabs-content li .h1,   
  408. .night-tabs .night-tabs-content li .h2,   
  409. .night-tabs .night-tabs-content li .h3 {   
  410.     font-weight: 300;   
  411.     line-height: 1.5   
  412. }   
  413. .night-tabs .night-tabs-content li .h1 {font-size: 3em}   
  414. .night-tabs .night-tabs-content li .h2 {font-size: 2.2em}   
  415. .night-tabs .night-tabs-content li .h3 {font-size: 1.4em}   
  416.   
  417.   
  418.   
  419. /* ->>> Paragraphs <<<-*/  
  420. .night-tabs .night-tabs-content li p {   
  421.     margin: .5em 0;   
  422.     font-size: 1em   
  423. }   
  424.   
  425.   
  426.   
  427. /* ->>> Links <<<-*/  
  428. .night-tabs .night-tabs-content li a {color: #ecf0f1}   
  429.   
  430. .night-tabs .night-tabs-content li a:hover,   
  431. .night-tabs .night-tabs-content li a:focus {text-decoration: none}   
  432.   
  433.   
  434. /* ->>> FontAwesome <<<-*/  
  435. .night-tabs .fa { margin-right: .5em }   
  436.   
  437.   
  438.   
  439.   
  440.   
  441.   
  442. /*------------------------------------*\  
  443.     #EXTENDED TYPOGRAPHY  
  444. \*------------------------------------*/  
  445.   
  446.   
  447.   
  448. /* ->>> Images <<<-*/  
  449. .night-tabs .night-tabs-content li img {   
  450.     max-width: 100%;   
  451.     height: auto  
  452. }   
  453.   
  454.   
  455.   
  456. /* ->>> Lists <<<-*/  
  457. .night-tabs .night-tabs-ordered-list,   
  458. .night-tabs .night-tabs-unordered-list {   
  459.     margin-top: .3em;   
  460.     padding-left: 2.5em   
  461. }   
  462. .night-tabs .night-tabs-ordered-list {list-style: decimal}   
  463. .night-tabs .night-tabs-unordered-list { list-style: disc}   
  464.   
  465.   
  466.   
  467. /* ->>> Utility <<<-*/  
  468.   
  469. /* Positioning */  
  470. .text-center {text-align: center}   
  471. .text-left {text-align: left}   
  472. .text-rightright {text-align: rightright}   
  473. .pull-left {float: left}   
  474. .pull-rightright {float: rightright}   
  475.   
  476.   
  477.   
  478. /* Preformatted */  
  479. .dropcap {   
  480.   font-family: "Sanchez", Rockwell, slab-serif;   
  481.     float: left;   
  482.     font-size: 5em;   
  483.     line-height: .9;   
  484.     }   
  485.        
  486. .blockquote {   
  487.   margin: 1em;   
  488.   padding: 0 0 0 1em;   
  489.   border-left: 3px solid #ecf0f1  
  490. }   
  491.   
  492. .well {   
  493.     background: #555;   
  494.     padding: 1em!important  
  495. }   
  496.   
  497.   
  498.   
  499.   
  500.   
  501.   
  502. /*------------------------------------*\  
  503.     #GRID SYSTEM  
  504. \*------------------------------------*/  
  505.   
  506.   
  507.   
  508. /* ->>> Micro-Clearfix <<<-*/  
  509. .night-tabs .grid-row:after {   
  510.     content: '';   
  511.     display: table;   
  512.     clear: both  
  513. }   
  514.   
  515.   
  516.   
  517. /* ->>> Basic Structure <<<-*/  
  518. .night-tabs .grid-row {margin-top: 1em}   
  519. .night-tabs .grid-row:first-child {margin-top: 0}   
  520.   
  521. .night-tabs .grid-column {   
  522.     display: block;   
  523.     float: left;   
  524.     width: 100%;   
  525.     margin-left: 2%   
  526. }   
  527. .night-tabs .grid-column:first-child { margin-left: 0}   
  528.   
  529.   
  530.   
  531. /* ->>> Grid System Config <<<-*/  
  532. .night-tabs .grid-column-1 {width: 6.5%}   
  533. .night-tabs .grid-column-2 {width: 15%}   
  534. .night-tabs .grid-column-3 {width: 23.5%}   
  535. .night-tabs .grid-column-4 {width: 32%}   
  536. .night-tabs .grid-column-5 {width: 40.5%}   
  537. .night-tabs .grid-column-6 {width: 49%}   
  538. .night-tabs .grid-column-7 {width: 57.5%}   
  539. .night-tabs .grid-column-8 {width: 66%}   
  540. .night-tabs .grid-column-9 {width: 74.5%}   
  541. .night-tabs .grid-column-10 {width: 83%}   
  542. .night-tabs .grid-column-11 {width: 91.5%}   
  543.   
  544.   
  545. .night-tabs .grid-column-offset-1,   
  546. .night-tabs .grid-column-offset-1:first-child{margin-left:8.5%}   
  547. .night-tabs .grid-column-offset-2,   
  548. .night-tabs .grid-column-offset-2:first-child{margin-left:17%}   
  549.   
  550. .night-tabs .grid-column-offset-3,   
  551. .night-tabs .grid-column-offset-3:first-child{margin-left:25.5%}   
  552.   
  553. .night-tabs .grid-column-offset-4,   
  554. .night-tabs .grid-column-offset-4:first-child{margin-left:34%}   
  555.   
  556. .night-tabs .grid-column-offset-5,   
  557. .night-tabs .grid-column-offset-5:first-child{margin-left:42.5%}   
  558.   
  559. .night-tabs .grid-column-offset-6,   
  560. .night-tabs .grid-column-offset-6:first-child{margin-left:51%}   
  561.   
  562. .night-tabs .grid-column-offset-7,   
  563. .night-tabs .grid-column-offset-7:first-child{margin-left:59.5%}   
  564.   
  565. .night-tabs .grid-column-offset-8,   
  566. .night-tabs .grid-column-offset-8:first-child{margin-left:68%}   
  567.   
  568. .night-tabs .grid-column-offset-9,   
  569. .night-tabs .grid-column-offset-9:first-child{margin-left:76.5%}   
  570.   
  571. .night-tabs .grid-column-offset-10,.night-tabs .grid-column-offset-10:first-child{margin-left:85%}   
  572. .night-tabs .grid-column-offset-11,.night-tabs .grid-column-offset-11:first-child{margin-left:93.5%}   
  573.   
  574. /**  
  575.  * CONTENTS - colors.css  
  576.  *  
  577.  * COLORS  
  578.  * Default (Gray/Grey), Red, Blue, Green, Purple, Orange, Yellow, Pink, Brown, Teal, Turquoise.  
  579.  *  
  580.  */  
  581.   
  582.   
  583.   
  584.   
  585.   
  586.   
  587.   
  588. /*------------------------------------*\  
  589.     #COLORS  
  590. \*------------------------------------*/  
  591.   
  592.   
  593. /* ->>> Default (Gray/Grey) <<<-*/  
  594. .night-tabs label:hover span span,   
  595. .night-tabs input:checked+label span span,   
  596. .night-tabs-color-default label:hover span span,   
  597. .night-tabs-color-default input:checked+label span span{background: #6c7a89}   
  598.   
  599.   
  600.   
  601. /* ->>> Blue <<<-*/  
  602. .night-tabs-color-blue label:hover span span,   
  603. .night-tabs-color-blue input:checked+label span span {background: #1e8bc3}   
  604.   
  605.   
  606.   
  607. /* ->>> Red <<<-*/  
  608. .night-tabs-color-red label:hover span span,   
  609. .night-tabs-color-red input:checked+label span span {background: #ef4836}   
  610.   
  611.   
  612. /* ->>> Green <<<-*/  
  613. .night-tabs-color-green label:hover span span,   
  614. .night-tabs-color-green input:checked+label span span {background: #27ae60}   
  615.   
  616. /* ->>> Purple <<<-*/  
  617. .night-tabs-color-purple label:hover span span,   
  618. .night-tabs-color-purple input:checked+label span span {background: #9b59b6}   
  619. /* ->>> Orange <<<-*/  
  620. .night-tabs-color-orange label:hover span span,   
  621. .night-tabs-color-orange input:checked+label span span {background: #F9690E}   
  622.   
  623.   
  624.   
  625. /* ->>> Yellow <<<-*/  
  626. .night-tabs-color-yellow label:hover span span,   
  627. .night-tabs-color-yellow input:checked+label span span {background: #a8880a}   
  628.   
  629. /* ->>> Pink <<<-*/  
  630. .night-tabs-color-pink label:hover span span,   
  631. .night-tabs-color-pink input:checked+label span span {background: #dB0a5b}   
  632.   
  633.   
  634.   
  635. /* ->>> Brown <<<-*/  
  636. .night-tabs-color-brown label:hover span span,   
  637. .night-tabs-color-brown input:checked+label span span {background: #926239}   
  638.   
  639. /* ->>> Teal <<<-*/  
  640. .night-tabs-color-teal label:hover span span,   
  641. .night-tabs-color-teal input:checked+label span span {background: #008080}   
  642. /* ->>> Turquoise <<<-*/  
  643. .night-tabs-color-turquoise label:hover span span,   
  644. .night-tabs-color-turquoise input:checked+label span span {background: #16a085}   
  645.   
  646.   
  647. /**  
  648.  * CONTENTS - mobile.css  
  649.  *  
  650.  * RESPONSIVE STACKING  
  651.  * Tabs stack on top of each other on mobile devices.  
  652.  *  
  653.  */  
  654.   
  655. /*------------------------------------*\  
  656.     #RESPONSIVE STACKING  
  657. \*------------------------------------*/  
  658. @media screen and (max-width: 48em) {   
  659.     .night-tabs .grid-column,   
  660.     .night-tabs .grid-column:first-child {   
  661.         float: none;   
  662.         width: 100%;   
  663.         margin: 1em 0 0 0   
  664.     }   
  665.     .night-tabs > label {   
  666.         display: block;   
  667.         float: none;   
  668.         width: 100%;   
  669.         padding-right: 0;   
  670.         padding-left: 0;   
  671.         text-align: left;   
  672.         margin: 0   
  673.     }   
  674.     .night-tabs > .night-tabs-content {   
  675.         margin-top: 0;   
  676.         margin-right: 0;   
  677.         margin-left: 0   
  678.     }   
  679.     .night-tabs > .night-tabs-content > li {   
  680.         -webkit-transform-origin: 50% 0%;   
  681.         -ms-transform-origin: 50% 0%;   
  682.         transform-origin: 50% 0%   
  683.     }   
  684.     .night-tabs.night-tabs-animation-flip > ul > li {   
  685.         -webkit-transform: rotateX(-90deg);   
  686.         transform: rotateX(-90deg)   
  687.     }   
  688. }   
  689.   
  690.         body {   
  691.             background: #111;   
  692.             margin-top: 2em   
  693.         } 
    694. 　

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
前端制作动画的几种方式（css3，js）
Dec 12 HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
html5+css3之CSS中的布局与Header的实现
Nov 21 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 HTML / CSS
详解CSS3的box-shadow属性制作边框阴影效果的方法
May 10 HTML / CSS
利用CSS3实现开门效果实例源码
Aug 22 HTML / CSS
CSS3制作hover下划线动画
Mar 27 HTML / CSS
html5新特性与用法大全
Sep 13 HTML / CSS
html5定位获取当前位置并在百度地图上显示
Aug 22 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
Apr 26 HTML / CSS
canvas与html5实现视频截图功能示例
Dec 15 HTML / CSS
HTML5 表单验证失败的提示语问题
Jul 13 HTML / CSS
纯css3实现的竖形无限级导航
Dec 10 #HTML / CSS
CSS3动画效果回调处理详解
Dec 10 #HTML / CSS
CSS3属性background-size使用指南
Dec 09 #HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 #HTML / CSS
CSS3属性box-sizing使用指南
Dec 09 #HTML / CSS
使用css3实现的tab选项卡代码分享
Dec 09 #HTML / CSS
使用css3实现的windows8开机加载动画
Dec 09 #HTML / CSS
切片(1) map(4) WeUI(1) Slice(1) Pillow(2) random(1) vue-esign(1) 指针(1) 结构体(1) 微信小程序(9)
You might like
php下实现农历日历的代码
2007/03/07 PHP
加速XP搜索功能堪比vista
2007/03/22 PHP
php配合jquery实现增删操作具体实例
2013/12/12 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
YII框架中搜索分页jQuery写法详解
2016/12/19 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
php实现微信企业转账功能
2018/10/02 PHP
javascript 命名空间以提高代码重用性
2008/11/13 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
Javascript浅谈之this
2013/12/17 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
2014/11/08 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
jQuery实用技巧必备（中）
2015/11/03 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
vue2组件之select2调用的示例代码
2017/10/12 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
python self,cls,decorator的理解
2009/07/13 Python
利用python将json数据转换为csv格式的方法
2018/03/22 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
django url到views参数传递的实例
2019/07/19 Python
Windows系统Python直接调用C++ DLL的方法
2019/08/01 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
顺丰快递Java软件工程师面试题
2015/07/31 面试题
大学生职业生涯规划书模板
2014/01/18 职场文书
《唯一的听众》教学反思
2014/02/20 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
四风自我剖析材料
2014/09/30 职场文书
小学教师个人总结
2015/02/05 职场文书
JavaScript执行机制详细介绍
2021/12/06 Javascript