一款纯css3如何实现的tab选项卡的实列好代码教程

互联网
我们从自然手上收到的最大礼物就是生命。我必须拼命的奔跑我知道有很多人等着看我狼狈跌倒的下场嘲笑我不自量力

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

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <divclass="night-tabsnight-tabs-color-defaultnight-tabs-animation-slide-rightnight-tabs-position-vleft">
  2. <!--Tab1-->
  3. <inputtype="radio"name="night-tabs"checked=""id="tab1"class="content1">
  4. <!--Checked=Tabshown-->
  5. <labelfor="tab1">
  6. <!--Modifyiconandname-->
  7. <span><span><emclass="fafa-home"></em>NightTabs</span></span>
  8. </label>
  9. <!--Tab2-->
  10. <inputtype="radio"name="night-tabs"id="tab2"class="content2">
  11. <labelfor="tab2">
  12. <!--Modifyiconandname-->
  13. <span><span><emclass="fafa-font"></em>Typography</span></span>
  14. </label>
  15. <!--Tab3-->
  16. <inputtype="radio"name="night-tabs"id="tab3"class="content3">
  17. <labelfor="tab3">
  18. <!--Modifyiconandname-->
  19. <span><span><emclass="fafa-list"></em>GridSysten</span></span>
  20. </label>
  21. <!--Tab4-->
  22. <inputtype="radio"name="night-tabs"id="tab4"class="content4">
  23. <labelfor="tab4">
  24. <!--Modifyiconandname-->
  25. <span><span><emclass="fafa-legal"></em>License</span></span>
  26. </label>
  27. <!--Content-->
  28. <ulclass="night-tabs-content">
  29. <!--Tab1-->
  30. <liclass="content1">
  31. <divclass="content-1-content">
  32. <!--Contentgoeshere-->
  33. <h1class="h1">
  34. NightTabs</h1>
  35. <p>
  36. <spanclass="dropcap">N</span>ightTabs(formerlyTrueTabs)isanextensiveCSS3
  37. TabbedContentsnippet.ItstartedoutsmallasatypicalCSSTabssnippet,but
  38. Ihaveexpandeditgreatly.Itoffersmanyfeatures,andcanbeeasilymodified
  39. tofityourneeds.Someofthefeaturesinclude:Crossbrowsersupport,presetanimations,
  40. colors,andlayouts,aresponsivegridsystem,andatypographyset,amongother
  41. things.</p>
  42. </div>
  43. </li>
  44. <!--Tab2-->
  45. <liclass="content2">
  46. <divclass="content-2-content">
  47. <!--Contentgoeshere-->
  48. <h1class="h1">
  49. CustomFonts</h1>
  50. <h2class="h2">
  51. OpenSansLight</h2>
  52. <h3class="h3">
  53. <emclass="fafa-check"></em>FontAwesome</h3>
  54. <p>
  55. <h2class="h2">
  56. ParagraphsandQuotes</h2>
  57. <blockquoteclass="blockquote">
  58. Maecenastinciduntnuncest,necpharetraodioportaac.Morbicursuslacinianeque,
  59. tristiquetinciduntipsumtincidunta.
  60. </blockquote>
  61. <divclass="well">
  62. <p>
  63. Maecenastinciduntnuncest,necpharetraodioportaac.Morbicursuslacinianeque,
  64. tristiquetinciduntipsumtincidunta.</p>
  65. </div>
  66. <p>
  67. Loremipsumdolorsitamet,consecteturadipiscingelit.Donecmalesuadarutrum
  68. felis,quisimperdietnislfinibusid.Etiamcommodovitaepurusalobortis.Donec
  69. laciniadapibusmetusnecfeugiat.Integerblandittellusveldapibusefficitur.
  70. Nullaplaceratsollicitudinlaoreet.Maecenasfermentumerosdiam,atblanditlectus
  71. volutpatac.Proinornaremaurisdui,sempercondimentumurnablanditnon.Vestibulum
  72. anteipsumprimisinfaucibusorciluctusetultricesposuerecubiliaCurae;Ut
  73. scelerisquejustositametsemcommodo,acportaarcuauctor.</p>
  74. <h3class="h3">
  75. UnorderedLists</h3>
  76. <ulclass="night-tabs-unordered-list">
  77. <li>Loremipsumdolorsitamet,consecteturadipiscingelit.
  78. <ulclass="night-tabs-unordered-list">
  79. <li>Nullavitaelacussedduifringillaelementumeuideros.</li>
  80. <li>Vivamuseuismodmaurissitametiaculisporttitor.</li>
  81. <li>Doneccondimentummassanonelitlobortis,aultricesantevulputate.</li>
  82. </ul>
  83. </li>
  84. <li>Nullavitaelacussedduifringillaelementumeuideros.</li>
  85. <li>Vivamuseuismodmaurissitametiaculisporttitor.</li>
  86. <li>Doneccondimentummassanonelitlobortis,aultricesantevulputate.</li>
  87. </ul>
  88. <h3class="h3">
  89. OrderedLists</h3>
  90. <olclass="night-tabs-ordered-list">
  91. <li>Loremipsumdolorsitamet,consecteturadipiscingelit.
  92. <olclass="night-tabs-ordered-list">
  93. <li>Nullavitaelacussedduifringillaelementumeuideros.</li>
  94. <li>Vivamuseuismodmaurissitametiaculisporttitor.</li>
  95. <li>Doneccondimentummassanonelitlobortis,aultricesantevulputate.</li>
  96. </ol>
  97. </li>
  98. <li>Nullavitaelacussedduifringillaelementumeuideros.</li>
  99. <li>Vivamuseuismodmaurissitametiaculisporttitor.</li>
  100. <li>Doneccondimentummassanonelitlobortis,aultricesantevulputate.</li>
  101. </ol>
  102. <divclass="text-right">
  103. <em>TypographySet</em>
  104. </div>
  105. </div>
  106. </li>
  107. <!--Tab3-->
  108. <liclass="content3">
  109. <divclass="content-3-content">
  110. <!--Contentgoeshere-->
  111. <divclass="grid-row">
  112. <divclass="grid-columngrid-column-6">
  113. <h2class="h2">
  114. HTML5</h2>
  115. <p>
  116. Loremipsumdolorsitamet,consecteturadipiscingelit.Aliquamantenisl,condimentum
  117. necdolorviverra,dignissimconvallisest.Incommodorhoncusaugue,aeuismod
  118. felisplaceratut.Utullamcorperliberotortor,utsemperlectuscongueut.Morbi
  119. pulvinar,nisiatpharetrascelerisque,nibhmagnaornareaugue,velaliquetipsum
  120. anteeusem.Maecenasidestrisus.Nullafacilisisduimolestieeuismodmollis.
  121. Duisvehiculaelementumjustoinporta.Maecenaseratlectus,finibusvellectus
  122. non,consequatultriciesdolor.Nuncultriciesquaminpurusfacilisis,porttitor
  123. blanditodiovolutpat.Sedsedposuerelectus,sitametrutrumest.Duisporttitor
  124. purusblandit,lacinianibhquis,ultriciesaugue.</p>
  125. </div>
  126. <divclass="grid-columngrid-column-6">
  127. <h2class="h2">
  128. CSS3</h2>
  129. <p>
  130. Loremipsumdolorsitamet,consecteturadipiscingelit.Aliquamantenisl,condimentum
  131. necdolorviverra,dignissimconvallisest.Incommodorhoncusaugue,aeuismod
  132. felisplaceratut.Utullamcorperliberotortor,utsemperlectuscongueut.Morbi
  133. pulvinar,nisiatpharetrascelerisque,nibhmagnaornareaugue,velaliquetipsum
  134. anteeusem.Maecenasidestrisus.Nullafacilisisduimolestieeuismodmollis.
  135. Duisvehiculaelementumjustoinporta.Maecenaseratlectus,finibusvellectus
  136. non,consequatultriciesdolor.Nuncultriciesquaminpurusfacilisis,porttitor
  137. blanditodiovolutpat.Sedsedposuerelectus,sitametrutrumest.Duisporttitor
  138. purusblandit,lacinianibhquis,ultriciesaugue.</p>
  139. </div>
  140. </div>
  141. <divclass="grid-row">
  142. <divclass="grid-columngrid-column-12">
  143. <h2class="h2">
  144. NOJavaScript</h2>
  145. <p>
  146. Loremipsumdolorsitamet,consecteturadipiscingelit.Aliquamantenisl,condimentum
  147. necdolorviverra,dignissimconvallisest.Incommodorhoncusaugue,aeuismod
  148. felisplaceratut.Utullamcorperliberotortor,utsemperlectuscongueut.Morbi
  149. pulvinar,nisiatpharetrascelerisque,nibhmagnaornareaugue,velaliquetipsum
  150. anteeusem.Maecenasidestrisus.Nullafacilisisduimolestieeuismodmollis.
  151. Duisvehiculaelementumjustoinporta.Maecenaseratlectus,finibusvellectus
  152. non,consequatultriciesdolor.Nuncultriciesquaminpurusfacilisis,porttitor
  153. blanditodiovolutpat.Sedsedposuerelectus,sitametrutrumest.Duisporttitor
  154. purusblandit,lacinianibhquis,ultriciesaugue.</p>
  155. </div>
  156. <divclass="text-right">
  157. <em>NightTabs-CSS3TabbedContent</em>
  158. </div>
  159. </div>
  160. </div>
  161. </li>
  162. <!--Tab4-->
  163. <liclass="content4">
  164. <divclass="content-4-content">
  165. <!--Contentgoeshere-->
  166. <h1class="h1">
  167. NightTabs-v0.2.0</h1>
  168. <p>
  169. CodedbyJasonShiundertheMITLicense.</p>
  170. </div>
  171. </li>
  172. </ul>
  173. </div>

　　css3代码：

CSS Code复制内容到剪贴板
  1. /*------------------------------------*\
  2. #RESET
  3. \*------------------------------------*/
  4. .night-tabsa,
  5. .night-tabsdiv,
  6. .night-tabsem,
  7. .night-tabsimg,
  8. .night-tabsul,
  9. .night-tabslabel,
  10. .night-tabsli,
  11. .night-tabsol,
  12. .night-tabsp,
  13. .night-tabsspan,
  14. .night-tabsul{
  15. /*->>>Structure<<<-*/
  16. border:0;
  17. margin:0;
  18. padding:0;
  19. position:relative;
  20. box-sizing:border-box/*CSS3*/
  21. }
  27. /*------------------------------------*\
  28. #TABLABELS
  29. \*------------------------------------*/
  30. .night-tabs{
  31. /*->>>Structure<<<-*/
  32. margin:0auto;/*CenterNightTabs;optional.*/
  33. width:70%;/*Definewidth.*/
  34. font:3000px/1.5
  35. "OpenSans","HelveticaNeue",Helvetica,Arial,sans-serif;/*Typography*/
  36. color:#ecf0f1/*Colors*/
  37. }
  39. .night-tabsinput{display:none}/*HideCheckbox.*/
  40. .night-tabsinput:checked+label{cursor:default}/*Setcursortype.*/
  42. .night-tabslabel{
  43. /*->>>Structure<<<-*/
  44. display:inline-block;
  45. z-index:1;
  46. border-bottom:2pxsolid#353535;
  47. border-right:1pxsolid#444;
  48. border-left:1pxsolid#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;/*->>>Preventsdouble-clickselection.<<<-*/
  56. -moz-user-select:none;
  57. -ms-user-select:none
  58. }
  59. .night-tabslabelspan{
  60. display:block;
  61. padding:.2em;
  62. background:#404040
  63. }
  64. .night-tabslabelspanspan{
  65. /*Structure*/
  66. border:2pxsolidtransparent;
  67. padding:01em;
  68. /*CSS3*/
  69. -webkit-transition:background.4s;
  70. transition:background.4s
  71. }
  78. /*------------------------------------*\
  79. #TABCONTENT
  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:1em1.5em;/*->>>Spacingforcontent.<<<-*/
  91. position:absolute;
  92. top:0;
  93. visibility:hidden;
  94. width:100%;
  95. background:#404040;/*Colors*/
  96. /*CSS3*/
  97. -webkit-transform-origin:00;
  98. -ms-transform-origin:00;
  99. transform-origin:00;
  100. -webkit-transition:all.8s.1s;/*->>>Intensityoftabeffects.<<<-*/
  101. transition:all.8s.1s
  102. }
  104. @charset"UTF-8";
  106. /**
  107. *CONTENTS-effects.css
  108. *
  109. *GENERALSTYLES
  110. *Setupfortabeffects.
  111. *
  112. *SLIDEEFFECTS
  113. *Basicslideeffectsfromdifferentdirections.
  114. *
  115. *ADVANCEDEFFECTS
  116. *Advancedeffects(scale,rotate,flip)
  117. *
  118. */
  126. /*------------------------------------*\
  127. #GENERALSTYLES
  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. }
  152. /*------------------------------------*\
  153. #SLIDEEFFECTS
  154. \*------------------------------------*/
  158. /*->>>SlideUp<<<-*/
  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. }
  167. /*->>>SlideDown<<<-*/
  168. .night-tabs-slide-down.night-tabs-content>li{
  169. -webkit-transform:translateY(-30px);
  170. -ms-transform:translateY(-30px);
  171. transform:translateY(-30px)
  172. }
  176. /*->>>SlideLeft<<<-*/
  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. }
  185. /*->>>SlideRight<<<-*/
  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. }
  194. /*->>>SlideUp+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. }
  203. /*->>>SlideUp+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. }
  212. /*->>>SlideDown+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. }
  221. /*->>>SlideDown+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. }
  238. /*------------------------------------*\
  239. #SLIDEEFFECTS
  240. \*------------------------------------*/
  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. }
  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. }
  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. }
  290. /**
  291. *CONTENTS-layouts.css
  292. *
  293. *HORIZONTALPOSITIONS
  294. *Basichorizontalpositions:top,left,right,andjustify.
  295. *
  296. *VERTICALPOSITIONS
  297. *Basicverticalpositions,verticalleftandverticalright.
  298. *
  299. */
  307. /*------------------------------------*\
  308. #HORIZONTALPOSITIONS
  309. \*------------------------------------*/
  313. /*->>>Left,Center,Right<<<-*/
  314. .night-tabs-position-leftlabel,
  315. .night-tabs-position-centerlabel,
  316. .night-tabs-position-rightrightlabel{width:auto}
  318. .night-tabs-position-left{text-align:left}
  319. .night-tabs-position-center{text-align:center}
  320. .night-tabs-position-rightright{text-align:rightright}
  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%}
  336. /*------------------------------------*\
  337. #VERTICALPOSITIONS
  338. \*------------------------------------*/
  342. /*->>>GeneralStyles<<<-*/
  343. .night-tabs-position-vleft.night-tabs-content>li,
  344. .night-tabs-position-vright.night-tabs-content>li{border-top:0}
  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. }
  357. /*->>>VerticalLeft<<<-*/
  358. .night-tabs-position-vleftlabel{border-right:2pxsolid#333}
  359. .night-tabs-position-vleft>.night-tabs-content{margin-left:25%}
  363. /*->>>VerticalRight<<<-*/
  364. .night-tabs-position-vright>label{
  365. clear:rightright;
  366. float:rightright
  367. }
  368. .night-tabs-position-vrightulli{border-right:1pxsolid#333}
  369. .night-tabs-position-vright>.night-tabs-content{margin-right:25%}
  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. }
  378. /**
  379. *CONTENTS-typography.css
  380. *
  381. *BASICTYPOGRAPHY
  382. *Stylesforheadings,paragraphs,andlinks.
  383. *
  384. *EXTENDEDTYPOGRAPHY
  385. *Stylingforimages,unorderedandorderedlists,andutilityclasses.
  386. *
  387. *GRIDSYSTEM
  388. *Basic12fluidcolumngridsystemwithoffsetsupport.
  389. *
  390. */
  398. /*------------------------------------*\
  399. #BASICTYPOGRAPHY
  400. \*------------------------------------*/
  404. /*->>>Headings<<<-*/
  405. h1,h2,h3{margin:0;padding:0}
  407. .night-tabs.night-tabs-contentli.h1,
  408. .night-tabs.night-tabs-contentli.h2,
  409. .night-tabs.night-tabs-contentli.h3{
  410. font-weight:300;
  411. line-height:1.5
  412. }
  413. .night-tabs.night-tabs-contentli.h1{font-size:3em}
  414. .night-tabs.night-tabs-contentli.h2{font-size:2.2em}
  415. .night-tabs.night-tabs-contentli.h3{font-size:1.4em}
  419. /*->>>Paragraphs<<<-*/
  420. .night-tabs.night-tabs-contentlip{
  421. margin:.5em0;
  422. font-size:1em
  423. }
  427. /*->>>Links<<<-*/
  428. .night-tabs.night-tabs-contentlia{color:#ecf0f1}
  430. .night-tabs.night-tabs-contentlia:hover,
  431. .night-tabs.night-tabs-contentlia:focus{text-decoration:none}
  434. /*->>>FontAwesome<<<-*/
  435. .night-tabs.fa{margin-right:.5em}
  442. /*------------------------------------*\
  443. #EXTENDEDTYPOGRAPHY
  444. \*------------------------------------*/
  448. /*->>>Images<<<-*/
  449. .night-tabs.night-tabs-contentliimg{
  450. max-width:100%;
  451. height:auto
  452. }
  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}
  467. /*->>>Utility<<<-*/
  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}
  478. /*Preformatted*/
  479. .dropcap{
  480. font-family:"Sanchez",Rockwell,slab-serif;
  481. float:left;
  482. font-size:5em;
  483. line-height:.9;
  484. }
  486. .blockquote{
  487. margin:1em;
  488. padding:0001em;
  489. border-left:3pxsolid#ecf0f1
  490. }
  492. .well{
  493. background:#555;
  494. padding:1em!important
  495. }
  502. /*------------------------------------*\
  503. #GRIDSYSTEM
  504. \*------------------------------------*/
  508. /*->>>Micro-Clearfix<<<-*/
  509. .night-tabs.grid-row:after{
  510. content:'';
  511. display:table;
  512. clear:both
  513. }
  517. /*->>>BasicStructure<<<-*/
  518. .night-tabs.grid-row{margin-top:1em}
  519. .night-tabs.grid-row:first-child{margin-top:0}
  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}
  531. /*->>>GridSystemConfig<<<-*/
  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%}
  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%}
  550. .night-tabs.grid-column-offset-3,
  551. .night-tabs.grid-column-offset-3:first-child{margin-left:25.5%}
  553. .night-tabs.grid-column-offset-4,
  554. .night-tabs.grid-column-offset-4:first-child{margin-left:34%}
  556. .night-tabs.grid-column-offset-5,
  557. .night-tabs.grid-column-offset-5:first-child{margin-left:42.5%}
  559. .night-tabs.grid-column-offset-6,
  560. .night-tabs.grid-column-offset-6:first-child{margin-left:51%}
  562. .night-tabs.grid-column-offset-7,
  563. .night-tabs.grid-column-offset-7:first-child{margin-left:59.5%}
  565. .night-tabs.grid-column-offset-8,
  566. .night-tabs.grid-column-offset-8:first-child{margin-left:68%}
  568. .night-tabs.grid-column-offset-9,
  569. .night-tabs.grid-column-offset-9:first-child{margin-left:76.5%}
  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%}
  574. /**
  575. *CONTENTS-colors.css
  576. *
  577. *COLORS
  578. *Default(Gray/Grey),Red,Blue,Green,Purple,Orange,Yellow,Pink,Brown,Teal,Turquoise.
  579. *
  580. */
  588. /*------------------------------------*\
  589. #COLORS
  590. \*------------------------------------*/
  593. /*->>>Default(Gray/Grey)<<<-*/
  594. .night-tabslabel:hoverspanspan,
  595. .night-tabsinput:checked+labelspanspan,
  596. .night-tabs-color-defaultlabel:hoverspanspan,
  597. .night-tabs-color-defaultinput:checked+labelspanspan{background:#6c7a89}
  601. /*->>>Blue<<<-*/
  602. .night-tabs-color-bluelabel:hoverspanspan,
  603. .night-tabs-color-blueinput:checked+labelspanspan{background:#1e8bc3}
  607. /*->>>Red<<<-*/
  608. .night-tabs-color-redlabel:hoverspanspan,
  609. .night-tabs-color-redinput:checked+labelspanspan{background:#ef4836}
  612. /*->>>Green<<<-*/
  613. .night-tabs-color-greenlabel:hoverspanspan,
  614. .night-tabs-color-greeninput:checked+labelspanspan{background:#27ae60}
  616. /*->>>Purple<<<-*/
  617. .night-tabs-color-purplelabel:hoverspanspan,
  618. .night-tabs-color-purpleinput:checked+labelspanspan{background:#9b59b6}
  619. /*->>>Orange<<<-*/
  620. .night-tabs-color-orangelabel:hoverspanspan,
  621. .night-tabs-color-orangeinput:checked+labelspanspan{background:#F9690E}
  625. /*->>>Yellow<<<-*/
  626. .night-tabs-color-yellowlabel:hoverspanspan,
  627. .night-tabs-color-yellowinput:checked+labelspanspan{background:#a8880a}
  629. /*->>>Pink<<<-*/
  630. .night-tabs-color-pinklabel:hoverspanspan,
  631. .night-tabs-color-pinkinput:checked+labelspanspan{background:#dB0a5b}
  635. /*->>>Brown<<<-*/
  636. .night-tabs-color-brownlabel:hoverspanspan,
  637. .night-tabs-color-browninput:checked+labelspanspan{background:#926239}
  639. /*->>>Teal<<<-*/
  640. .night-tabs-color-teallabel:hoverspanspan,
  641. .night-tabs-color-tealinput:checked+labelspanspan{background:#008080}
  642. /*->>>Turquoise<<<-*/
  643. .night-tabs-color-turquoiselabel:hoverspanspan,
  644. .night-tabs-color-turquoiseinput:checked+labelspanspan{background:#16a085}
  647. /**
  648. *CONTENTS-mobile.css
  649. *
  650. *RESPONSIVESTACKING
  651. *Tabsstackontopofeachotheronmobiledevices.
  652. *
  653. */
  655. /*------------------------------------*\
  656. #RESPONSIVESTACKING
  657. \*------------------------------------*/
  658. @mediascreenand(max-width:48em){
  659. .night-tabs.grid-column,
  660. .night-tabs.grid-column:first-child{
  661. float:none;
  662. width:100%;
  663. margin:1em000
  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. }
  690. body{
  691. background:#111;
  692. margin-top:2em
  693. }
    694. 　

以上就是一款纯css3如何实现的tab选项卡的实列好代码教程。幸福不是在于我们多么努力的去争取是在于我们多么努力的去珍惜！更多关于一款纯css3如何实现的tab选项卡的实列好代码教程请关注haodaima.com其它相关文章！

您可能有感兴趣的文章
如何利用纯CSS3如何实现tab选项卡切换示例代码
如何使用CSS3如何实现选项卡切换的方法
CSS文章列表切换选项卡效果实例
如何使用css3如何实现的tab选项卡代码分享
多角色选项卡登录效果