html5中文学习网

您的位置: 首页?>?网页制作?>?css365可以把体育投注转到娱乐场吗_365体育网址全场高呼_365体育投注开户 ? 正文

使用css3实现的tab选项卡代码分享_css3_CSS_网页制作

[ ] 已经帮助:人解决问题
本文给大家分享了一段非常漂亮的纯CSS3实现的tab选项卡特效,非常的炫酷,这里推荐给大家。

今天给大家带来一款纯css3实现的tab选项卡。单击左侧的选项的时候,右侧内容以动画的形式展示。效果图如下:6CDHTML5中文学习网 - HTML5先行者学习网

6CDHTML5中文学习网 - HTML5先行者学习网

实现的代码。6CDHTML5中文学习网 - HTML5先行者学习网

html代码:6CDHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
6CDHTML5中文学习网 - HTML5先行者学习网
6CDHTML5中文学习网 - HTML5先行者学习网
6CDHTML5中文学习网 - HTML5先行者学习网
6CDHTML5中文学习网 - HTML5先行者学习网
6CDHTML5中文学习网 - HTML5先行者学习网
6CDHTML5中文学习网 - HTML5先行者学习网
6CDHTML5中文学习网 - HTML5先行者学习网
6CDHTML5中文学习网 - HTML5先行者学习网
6CDHTML5中文学习网 - HTML5先行者学习网
6CDHTML5中文学习网 - HTML5先行者学习网
6CDHTML5中文学习网 - HTML5先行者学习网
6CDHTML5中文学习网 - HTML5先行者学习网
6CDHTML5中文学习网 - HTML5先行者学习网
6CDHTML5中文学习网 - HTML5先行者学习网
6CDHTML5中文学习网 - HTML5先行者学习网
6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网
  • 6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网

    6CDHTML5中文学习网 - HTML5先行者学习网
    Night Tabs

    6CDHTML5中文学习网 - HTML5先行者学习网

    6CDHTML5中文学习网 - HTML5先行者学习网
    Night Tabs (formerly TrueTabs) is an extensive CSS36CDHTML5中文学习网 - HTML5先行者学习网
    Tabbed Content snippet. It started out small as a typical CSS Tabs snippet, but6CDHTML5中文学习网 - HTML5先行者学习网
    I have expanded it greatly. It offers many features, and can be easily modified6CDHTML5中文学习网 - HTML5先行者学习网
    to fit your needs. Some of the features include: Cross browser support, preset animations,6CDHTML5中文学习网 - HTML5先行者学习网
    colors, and layouts, a responsive grid system, and a typography set, among other6CDHTML5中文学习网 - HTML5先行者学习网
    things.

    6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网
  • 6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网
  • 6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网

    6CDHTML5中文学习网 - HTML5先行者学习网
    Custom Fonts

    6CDHTML5中文学习网 - HTML5先行者学习网

    6CDHTML5中文学习网 - HTML5先行者学习网
    Open Sans Light

    6CDHTML5中文学习网 - HTML5先行者学习网

    6CDHTML5中文学习网 - HTML5先行者学习网
    FontAwesome

    6CDHTML5中文学习网 - HTML5先行者学习网

    6CDHTML5中文学习网 - HTML5先行者学习网

    6CDHTML5中文学习网 - HTML5先行者学习网
    Paragraphs and Quotes

    6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网
    Maecenas tincidunt nunc est, nec pharetra odio porta ac. Morbi cursus lacinia neque,6CDHTML5中文学习网 - HTML5先行者学习网
    tristique tincidunt ipsum tincidunt a.6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网

    6CDHTML5中文学习网 - HTML5先行者学习网
    Maecenas tincidunt nunc est, nec pharetra odio porta ac. Morbi cursus lacinia neque,6CDHTML5中文学习网 - HTML5先行者学习网
    tristique tincidunt ipsum tincidunt a.

    6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网

    6CDHTML5中文学习网 - HTML5先行者学习网
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada rutrum6CDHTML5中文学习网 - HTML5先行者学习网
    felis, quis imperdiet nisl finibus id. Etiam commodo vitae purus a lobortis. Donec6CDHTML5中文学习网 - HTML5先行者学习网
    lacinia dapibus metus nec feugiat. Integer blandit tellus vel dapibus efficitur.6CDHTML5中文学习网 - HTML5先行者学习网
    Nulla placerat sollicitudin laoreet. Maecenas fermentum eros diam, at blandit lectus6CDHTML5中文学习网 - HTML5先行者学习网
    volutpat ac.Proin ornare mauris dui, semper condimentum urna blandit non. Vestibulum6CDHTML5中文学习网 - HTML5先行者学习网
    ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut6CDHTML5中文学习网 - HTML5先行者学习网
    scelerisque justo sit amet sem commodo, ac porta arcu auctor.

    6CDHTML5中文学习网 - HTML5先行者学习网

    6CDHTML5中文学习网 - HTML5先行者学习网
    Unordered Lists

    6CDHTML5中文学习网 - HTML5先行者学习网
      6CDHTML5中文学习网 - HTML5先行者学习网
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.6CDHTML5中文学习网 - HTML5先行者学习网
        6CDHTML5中文学习网 - HTML5先行者学习网
      • Nulla vitae lacus sed dui fringilla elementum eu id eros.
      • 6CDHTML5中文学习网 - HTML5先行者学习网
      • Vivamus euismod mauris sit amet iaculis porttitor.
      • 6CDHTML5中文学习网 - HTML5先行者学习网
      • Donec condimentum massa non elit lobortis, a ultrices ante vulputate.
      • 6CDHTML5中文学习网 - HTML5先行者学习网
      6CDHTML5中文学习网 - HTML5先行者学习网
    • 6CDHTML5中文学习网 - HTML5先行者学习网
    • Nulla vitae lacus sed dui fringilla elementum eu id eros.
    • 6CDHTML5中文学习网 - HTML5先行者学习网
    • Vivamus euismod mauris sit amet iaculis porttitor.
    • 6CDHTML5中文学习网 - HTML5先行者学习网
    • Donec condimentum massa non elit lobortis, a ultrices ante vulputate.
    • 6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网

    6CDHTML5中文学习网 - HTML5先行者学习网
    Ordered Lists

    6CDHTML5中文学习网 - HTML5先行者学习网
      6CDHTML5中文学习网 - HTML5先行者学习网
    1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.6CDHTML5中文学习网 - HTML5先行者学习网
        6CDHTML5中文学习网 - HTML5先行者学习网
      1. Nulla vitae lacus sed dui fringilla elementum eu id eros.
      2. 6CDHTML5中文学习网 - HTML5先行者学习网
      3. Vivamus euismod mauris sit amet iaculis porttitor.
      4. 6CDHTML5中文学习网 - HTML5先行者学习网
      5. Donec condimentum massa non elit lobortis, a ultrices ante vulputate.
      6. 6CDHTML5中文学习网 - HTML5先行者学习网
      6CDHTML5中文学习网 - HTML5先行者学习网
    2. 6CDHTML5中文学习网 - HTML5先行者学习网
    3. Nulla vitae lacus sed dui fringilla elementum eu id eros.
    4. 6CDHTML5中文学习网 - HTML5先行者学习网
    5. Vivamus euismod mauris sit amet iaculis porttitor.
    6. 6CDHTML5中文学习网 - HTML5先行者学习网
    7. Donec condimentum massa non elit lobortis, a ultrices ante vulputate.
    8. 6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网
    Typography Set6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网
  • 6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网
  • 6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网

    6CDHTML5中文学习网 - HTML5先行者学习网
    HTML5

    6CDHTML5中文学习网 - HTML5先行者学习网

    6CDHTML5中文学习网 - HTML5先行者学习网
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ante nisl, condimentum6CDHTML5中文学习网 - HTML5先行者学习网
    nec dolor viverra, dignissim convallis est. In commodo rhoncus augue, a euismod6CDHTML5中文学习网 - HTML5先行者学习网
    felis placerat ut. Ut ullamcorper libero tortor, ut semper lectus congue ut. Morbi6CDHTML5中文学习网 - HTML5先行者学习网
    pulvinar, nisi at pharetra scelerisque, nibh magna ornare augue, vel aliquet ipsum6CDHTML5中文学习网 - HTML5先行者学习网
    ante eu sem. Maecenas id est risus. Nulla facilisis dui molestie euismod mollis.6CDHTML5中文学习网 - HTML5先行者学习网
    Duis vehicula elementum justo in porta. Maecenas erat lectus, finibus vel lectus6CDHTML5中文学习网 - HTML5先行者学习网
    non, consequat ultricies dolor. Nunc ultricies quam in purus facilisis, porttitor6CDHTML5中文学习网 - HTML5先行者学习网
    blandit odio volutpat. Sed sed posuere lectus, sit amet rutrum est. Duis porttitor6CDHTML5中文学习网 - HTML5先行者学习网
    purus blandit, lacinia nibh quis, ultricies augue.

    6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网

    6CDHTML5中文学习网 - HTML5先行者学习网
    CSS3

    6CDHTML5中文学习网 - HTML5先行者学习网

    6CDHTML5中文学习网 - HTML5先行者学习网
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ante nisl, condimentum6CDHTML5中文学习网 - HTML5先行者学习网
    nec dolor viverra, dignissim convallis est. In commodo rhoncus augue, a euismod6CDHTML5中文学习网 - HTML5先行者学习网
    felis placerat ut. Ut ullamcorper libero tortor, ut semper lectus congue ut. Morbi6CDHTML5中文学习网 - HTML5先行者学习网
    pulvinar, nisi at pharetra scelerisque, nibh magna ornare augue, vel aliquet ipsum6CDHTML5中文学习网 - HTML5先行者学习网
    ante eu sem. Maecenas id est risus. Nulla facilisis dui molestie euismod mollis.6CDHTML5中文学习网 - HTML5先行者学习网
    Duis vehicula elementum justo in porta. Maecenas erat lectus, finibus vel lectus6CDHTML5中文学习网 - HTML5先行者学习网
    non, consequat ultricies dolor. Nunc ultricies quam in purus facilisis, porttitor6CDHTML5中文学习网 - HTML5先行者学习网
    blandit odio volutpat. Sed sed posuere lectus, sit amet rutrum est. Duis porttitor6CDHTML5中文学习网 - HTML5先行者学习网
    purus blandit, lacinia nibh quis, ultricies augue.

    6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网

    6CDHTML5中文学习网 - HTML5先行者学习网
    NO JavaScript

    6CDHTML5中文学习网 - HTML5先行者学习网

    6CDHTML5中文学习网 - HTML5先行者学习网
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ante nisl, condimentum6CDHTML5中文学习网 - HTML5先行者学习网
    nec dolor viverra, dignissim convallis est. In commodo rhoncus augue, a euismod6CDHTML5中文学习网 - HTML5先行者学习网
    felis placerat ut. Ut ullamcorper libero tortor, ut semper lectus congue ut. Morbi6CDHTML5中文学习网 - HTML5先行者学习网
    pulvinar, nisi at pharetra scelerisque, nibh magna ornare augue, vel aliquet ipsum6CDHTML5中文学习网 - HTML5先行者学习网
    ante eu sem. Maecenas id est risus. Nulla facilisis dui molestie euismod mollis.6CDHTML5中文学习网 - HTML5先行者学习网
    Duis vehicula elementum justo in porta. Maecenas erat lectus, finibus vel lectus6CDHTML5中文学习网 - HTML5先行者学习网
    non, consequat ultricies dolor. Nunc ultricies quam in purus facilisis, porttitor6CDHTML5中文学习网 - HTML5先行者学习网
    blandit odio volutpat. Sed sed posuere lectus, sit amet rutrum est. Duis porttitor6CDHTML5中文学习网 - HTML5先行者学习网
    purus blandit, lacinia nibh quis, ultricies augue.

    6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网
    Night Tabs - CSS3 Tabbed Content6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网
  • 6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网
  • 6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网

    6CDHTML5中文学习网 - HTML5先行者学习网
    Night Tabs - v0.2.0

    6CDHTML5中文学习网 - HTML5先行者学习网

    6CDHTML5中文学习网 - HTML5先行者学习网
    Coded by Jason Shi under the MIT License.

    6CDHTML5中文学习网 - HTML5先行者学习网
    6CDHTML5中文学习网 - HTML5先行者学习网
  • 6CDHTML5中文学习网 - HTML5先行者学习网
6CDHTML5中文学习网 - HTML5先行者学习网
6CDHTML5中文学习网 - HTML5先行者学习网
6CDHTML5中文学习网 - HTML5先行者学习网

css3代码:6CDHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
6CDHTML5中文学习网 - HTML5先行者学习网
/*------------------------------------*/6CDHTML5中文学习网 - HTML5先行者学习网
#RESET6CDHTML5中文学习网 - HTML5先行者学习网
/*------------------------------------*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs a,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs div,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs em,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs img,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs ul,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs label,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs li,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs ol,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs p,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs span,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs ul {6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Structure <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
border: 0;6CDHTML5中文学习网 - HTML5先行者学习网
margin: 0;6CDHTML5中文学习网 - HTML5先行者学习网
padding: 0;6CDHTML5中文学习网 - HTML5先行者学习网
position: relative;6CDHTML5中文学习网 - HTML5先行者学习网
box-sizing: border-box /* CSS3 */6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
/*------------------------------------*/6CDHTML5中文学习网 - HTML5先行者学习网
#TAB LABELS6CDHTML5中文学习网 - HTML5先行者学习网
/*------------------------------------*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs {6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Structure <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
margin: 0 auto; /* Center Night Tabs; optional. */6CDHTML5中文学习网 - HTML5先行者学习网
width: 70%; /* Define width. */6CDHTML5中文学习网 - HTML5先行者学习网
font: 300 0px/1.56CDHTML5中文学习网 - HTML5先行者学习网
"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Typography */6CDHTML5中文学习网 - HTML5先行者学习网
color: #ecf0f1 /* Colors */6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs input {display: none} /* Hide Checkbox. */6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs input:checked+label {cursor: default} /* Set cursor type. */6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs label {6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Structure <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
display: inline-block;6CDHTML5中文学习网 - HTML5先行者学习网
z-index: 1;6CDHTML5中文学习网 - HTML5先行者学习网
border-bottom: 2px solid #353535;6CDHTML5中文学习网 - HTML5先行者学习网
border-right: 1px solid #444;6CDHTML5中文学习网 - HTML5先行者学习网
border-left: 1px solid #222;6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Typography <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
cursor: pointer;6CDHTML5中文学习网 - HTML5先行者学习网
font-size: 18px;6CDHTML5中文学习网 - HTML5先行者学习网
line-height: 40px;6CDHTML5中文学习网 - HTML5先行者学习网
text-align: left;6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> CSS3 <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
-webkit-user-select: none; /* ->>> Prevents double-click selection. <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
-moz-user-select: none;6CDHTML5中文学习网 - HTML5先行者学习网
-ms-user-select: none6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs label span {6CDHTML5中文学习网 - HTML5先行者学习网
display: block;6CDHTML5中文学习网 - HTML5先行者学习网
padding: .2em;6CDHTML5中文学习网 - HTML5先行者学习网
background: #4040406CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs label span span {6CDHTML5中文学习网 - HTML5先行者学习网
/* Structure */6CDHTML5中文学习网 - HTML5先行者学习网
border: 2px solid transparent;6CDHTML5中文学习网 - HTML5先行者学习网
padding: 0 1em;6CDHTML5中文学习网 - HTML5先行者学习网
/* CSS3*/6CDHTML5中文学习网 - HTML5先行者学习网
-webkit-transition: background .4s;6CDHTML5中文学习网 - HTML5先行者学习网
transition: background .4s6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
/*------------------------------------*/6CDHTML5中文学习网 - HTML5先行者学习网
#TAB CONTENT6CDHTML5中文学习网 - HTML5先行者学习网
/*------------------------------------*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .night-tabs-content {6CDHTML5中文学习网 - HTML5先行者学习网
display: block; /* Structure */6CDHTML5中文学习网 - HTML5先行者学习网
font-size: 18px /* Typography */6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .night-tabs-content > li {6CDHTML5中文学习网 - HTML5先行者学习网
/* Structure */6CDHTML5中文学习网 - HTML5先行者学习网
left: 0;6CDHTML5中文学习网 - HTML5先行者学习网
opacity: 0;6CDHTML5中文学习网 - HTML5先行者学习网
overflow: auto;6CDHTML5中文学习网 - HTML5先行者学习网
padding: 1em 1.5em; /* ->>> Spacing for content. <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
position: absolute;6CDHTML5中文学习网 - HTML5先行者学习网
top: 0;6CDHTML5中文学习网 - HTML5先行者学习网
visibility: hidden;6CDHTML5中文学习网 - HTML5先行者学习网
width: 100%;6CDHTML5中文学习网 - HTML5先行者学习网
background: #404040; /* Colors */6CDHTML5中文学习网 - HTML5先行者学习网
/* CSS3 */6CDHTML5中文学习网 - HTML5先行者学习网
-webkit-transform-origin: 0 0;6CDHTML5中文学习网 - HTML5先行者学习网
-ms-transform-origin: 0 0;6CDHTML5中文学习网 - HTML5先行者学习网
transform-origin: 0 0;6CDHTML5中文学习网 - HTML5先行者学习网
-webkit-transition: all .8s .1s; /* ->>> Intensity of tab effects. <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
transition: all .8s .1s6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
@charset "UTF-8";6CDHTML5中文学习网 - HTML5先行者学习网
/**6CDHTML5中文学习网 - HTML5先行者学习网
* CONTENTS - effects.css6CDHTML5中文学习网 - HTML5先行者学习网
*6CDHTML5中文学习网 - HTML5先行者学习网
* GENERAL STYLES6CDHTML5中文学习网 - HTML5先行者学习网
* Setup for tab effects.6CDHTML5中文学习网 - HTML5先行者学习网
*6CDHTML5中文学习网 - HTML5先行者学习网
* SLIDE EFFECTS6CDHTML5中文学习网 - HTML5先行者学习网
* Basic slide effects from different directions.6CDHTML5中文学习网 - HTML5先行者学习网
*6CDHTML5中文学习网 - HTML5先行者学习网
* ADVANCED EFFECTS6CDHTML5中文学习网 - HTML5先行者学习网
* Advanced effects (scale, rotate, flip)6CDHTML5中文学习网 - HTML5先行者学习网
*6CDHTML5中文学习网 - HTML5先行者学习网
*/6CDHTML5中文学习网 - HTML5先行者学习网
/*------------------------------------*/6CDHTML5中文学习网 - HTML5先行者学习网
#GENERAL STYLES6CDHTML5中文学习网 - HTML5先行者学习网
/*------------------------------------*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs>.content1:checked~ul>.content1,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs>.content2:checked~ul>.content2,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs>.content3:checked~ul>.content3,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs>.content4:checked~ul>.content4 {6CDHTML5中文学习网 - HTML5先行者学习网
/* Structure */6CDHTML5中文学习网 - HTML5先行者学习网
opacity: 1;6CDHTML5中文学习网 - HTML5先行者学习网
visibility: visible;6CDHTML5中文学习网 - HTML5先行者学习网
/* CSS3 */6CDHTML5中文学习网 - HTML5先行者学习网
-webkit-transform: none;6CDHTML5中文学习网 - HTML5先行者学习网
-ms-transform: none;6CDHTML5中文学习网 - HTML5先行者学习网
transform: none6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
/*------------------------------------*/6CDHTML5中文学习网 - HTML5先行者学习网
#SLIDE EFFECTS6CDHTML5中文学习网 - HTML5先行者学习网
/*------------------------------------*/6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Slide Up <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-animation-slide-up .night-tabs-content > li {6CDHTML5中文学习网 - HTML5先行者学习网
-webkit-transform: translateY(30px);6CDHTML5中文学习网 - HTML5先行者学习网
-ms-transform: translateY(30px);6CDHTML5中文学习网 - HTML5先行者学习网
transform: translateY(30px)6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Slide Down <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-slide-down .night-tabs-content > li {6CDHTML5中文学习网 - HTML5先行者学习网
-webkit-transform: translateY(-30px);6CDHTML5中文学习网 - HTML5先行者学习网
-ms-transform: translateY(-30px);6CDHTML5中文学习网 - HTML5先行者学习网
transform: translateY(-30px)6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Slide Left <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-animation-slide-left .night-tabs-content > li {6CDHTML5中文学习网 - HTML5先行者学习网
-webkit-transform: translateX(-30px);6CDHTML5中文学习网 - HTML5先行者学习网
-ms-transform: translateX(-30px);6CDHTML5中文学习网 - HTML5先行者学习网
transform: translateX(-30px)6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Slide Right <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-animation-slide-right .night-tabs-content > li {6CDHTML5中文学习网 - HTML5先行者学习网
-webkit-transform: translateX(30px);6CDHTML5中文学习网 - HTML5先行者学习网
-ms-transform: translateX(30px);6CDHTML5中文学习网 - HTML5先行者学习网
transform: translateX(30px)6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Slide Up + Left <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-slide-up-left .night-tabs-content > li {6CDHTML5中文学习网 - HTML5先行者学习网
-webkit-transform: translate(-30px, -30px);6CDHTML5中文学习网 - HTML5先行者学习网
-ms-transform: translate(-30px, -30px);6CDHTML5中文学习网 - HTML5先行者学习网
transform: translate(-30px, -30px)6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Slide Up + Right <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-animation-slide-up-right .night-tabs-content > li {6CDHTML5中文学习网 - HTML5先行者学习网
-webkit-transform: translate(30px, -30px);6CDHTML5中文学习网 - HTML5先行者学习网
-ms-transform: translate(30px, -30px);6CDHTML5中文学习网 - HTML5先行者学习网
transform: translate(30px, -30px)6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Slide Down + Left <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-animation-slide-down-left .night-tabs-content > li {6CDHTML5中文学习网 - HTML5先行者学习网
-webkit-transform: translate(-30px, 30px);6CDHTML5中文学习网 - HTML5先行者学习网
-ms-transform: translate(-30px, 30px);6CDHTML5中文学习网 - HTML5先行者学习网
transform: translate(-30px, 30px)6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Slide Down + Right <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-animation-slide-down-right .night-tabs-content > li {6CDHTML5中文学习网 - HTML5先行者学习网
-webkit-transform: translate(30px, 30px);6CDHTML5中文学习网 - HTML5先行者学习网
-ms-transform: translate(30px, 30px);6CDHTML5中文学习网 - HTML5先行者学习网
transform: translate(30px, 30px)6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
/*------------------------------------*/6CDHTML5中文学习网 - HTML5先行者学习网
#SLIDE EFFECTS6CDHTML5中文学习网 - HTML5先行者学习网
/*------------------------------------*/6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Rotate <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-rotate > ul > li {6CDHTML5中文学习网 - HTML5先行者学习网
-o-transform: rotate(10deg);6CDHTML5中文学习网 - HTML5先行者学习网
-ms-transform: rotate(10deg);6CDHTML5中文学习网 - HTML5先行者学习网
-moz-transform: rotate(10deg);6CDHTML5中文学习网 - HTML5先行者学习网
-webkit-transform: rotate(10deg)6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-animation-rotate.night-tabs.night-tabs-position-vleft > ul > li,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-animation-rotate.night-tabs.night-tabs-position-vright > ul > li {6CDHTML5中文学习网 - HTML5先行者学习网
-o-transform: rotate(-10deg);6CDHTML5中文学习网 - HTML5先行者学习网
-ms-transform: rotate(-10deg);6CDHTML5中文学习网 - HTML5先行者学习网
-moz-transform: rotate(-10deg);6CDHTML5中文学习网 - HTML5先行者学习网
-webkit-transform: rotate(-10deg)6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Scale <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-animation-scale > ul > li {6CDHTML5中文学习网 - HTML5先行者学习网
-webkit-transform: scale(0.6, 0.6);6CDHTML5中文学习网 - HTML5先行者学习网
-ms-transform: scale(0.6, 0.6);6CDHTML5中文学习网 - HTML5先行者学习网
transform: scale(0.6, 0.6)6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Flip <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-animation-flip .night-tabs-content {6CDHTML5中文学习网 - HTML5先行者学习网
-webkit-perspective: 2000px;6CDHTML5中文学习网 - HTML5先行者学习网
perspective: 2000px;6CDHTML5中文学习网 - HTML5先行者学习网
-webkit-perspective-origin: 50% 50%;6CDHTML5中文学习网 - HTML5先行者学习网
perspective-origin: 50% 50%6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-animation-flip .night-tabs-content > li {6CDHTML5中文学习网 - HTML5先行者学习网
-webkit-transform: rotateX(-90deg);6CDHTML5中文学习网 - HTML5先行者学习网
transform: rotateX(-90deg)6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-animation-flip.night-tabs-position-vleft > .night-tabs-content > li {6CDHTML5中文学习网 - HTML5先行者学习网
-webkit-transform: rotateY(90deg);6CDHTML5中文学习网 - HTML5先行者学习网
transform: rotateY(90deg)6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-animation-flip.night-tabs-position-vright > .night-tabs-content > li {6CDHTML5中文学习网 - HTML5先行者学习网
-webkit-transform: rotateY(-90deg);6CDHTML5中文学习网 - HTML5先行者学习网
transform: rotateY(-90deg)6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
/**6CDHTML5中文学习网 - HTML5先行者学习网
* CONTENTS - layouts.css6CDHTML5中文学习网 - HTML5先行者学习网
*6CDHTML5中文学习网 - HTML5先行者学习网
* HORIZONTAL POSITIONS6CDHTML5中文学习网 - HTML5先行者学习网
* Basic horizontal positions: top, left, right, and justify.6CDHTML5中文学习网 - HTML5先行者学习网
*6CDHTML5中文学习网 - HTML5先行者学习网
* VERTICAL POSITIONS6CDHTML5中文学习网 - HTML5先行者学习网
* Basic vertical positions, vertical left and vertical right.6CDHTML5中文学习网 - HTML5先行者学习网
*6CDHTML5中文学习网 - HTML5先行者学习网
*/6CDHTML5中文学习网 - HTML5先行者学习网
/*------------------------------------*/6CDHTML5中文学习网 - HTML5先行者学习网
#HORIZONTAL POSITIONS6CDHTML5中文学习网 - HTML5先行者学习网
/*------------------------------------*/6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Left, Center, Right <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-position-left label,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-position-center label,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-position-right label {width: auto}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-position-left {text-align: left}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-position-center {text-align: center}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-position-right {text-align: right}6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Justified <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-position-justify > input:first-child + label {padding-left: 0}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-position-justify2 > label {width: 50%}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-position-justify3 > label {width: 33.33%}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-position-justify4 > label {width: 25%}6CDHTML5中文学习网 - HTML5先行者学习网
/*------------------------------------*/6CDHTML5中文学习网 - HTML5先行者学习网
#VERTICAL POSITIONS6CDHTML5中文学习网 - HTML5先行者学习网
/*------------------------------------*/6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> General Styles <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-position-vleft .night-tabs-content > li,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-position-vright .night-tabs-content > li {border-top: 0}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-position-vleft > label,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-position-vright > label {6CDHTML5中文学习网 - HTML5先行者学习网
clear: left;6CDHTML5中文学习网 - HTML5先行者学习网
display: block;6CDHTML5中文学习网 - HTML5先行者学习网
float: left;6CDHTML5中文学习网 - HTML5先行者学习网
margin-right: 0;6CDHTML5中文学习网 - HTML5先行者学习网
width: 25%6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Vertical Left <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-position-vleft label {border-right: 2px solid #333}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-position-vleft > .night-tabs-content {margin-left: 25%}6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Vertical Right <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-position-vright > label {6CDHTML5中文学习网 - HTML5先行者学习网
clear: right;6CDHTML5中文学习网 - HTML5先行者学习网
float: right6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-position-vright ul li { border-right: 1px solid #333}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-position-vright > .night-tabs-content {margin-right: 25%}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-position-vright .night-tabs-content > li {6CDHTML5中文学习网 - HTML5先行者学习网
-webkit-transform-origin: 100% 0%;6CDHTML5中文学习网 - HTML5先行者学习网
-ms-transform-origin: 100% 0%;6CDHTML5中文学习网 - HTML5先行者学习网
transform-origin: 100% 0%6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
/**6CDHTML5中文学习网 - HTML5先行者学习网
* CONTENTS - typography.css6CDHTML5中文学习网 - HTML5先行者学习网
*6CDHTML5中文学习网 - HTML5先行者学习网
* BASIC TYPOGRAPHY6CDHTML5中文学习网 - HTML5先行者学习网
* Styles for headings,paragraphs, and links.6CDHTML5中文学习网 - HTML5先行者学习网
*6CDHTML5中文学习网 - HTML5先行者学习网
* EXTENDED TYPOGRAPHY6CDHTML5中文学习网 - HTML5先行者学习网
* Styling for images, unordered and ordered lists, and utility classes.6CDHTML5中文学习网 - HTML5先行者学习网
*6CDHTML5中文学习网 - HTML5先行者学习网
* GRID SYSTEM6CDHTML5中文学习网 - HTML5先行者学习网
* Basic 12 fluid column grid system with offset support.6CDHTML5中文学习网 - HTML5先行者学习网
*6CDHTML5中文学习网 - HTML5先行者学习网
*/6CDHTML5中文学习网 - HTML5先行者学习网
/*------------------------------------*/6CDHTML5中文学习网 - HTML5先行者学习网
#BASIC TYPOGRAPHY6CDHTML5中文学习网 - HTML5先行者学习网
/*------------------------------------*/6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Headings <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
h1, h2, h3 { margin: 0; padding: 0 }6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .night-tabs-content li .h1,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .night-tabs-content li .h2,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .night-tabs-content li .h3 {6CDHTML5中文学习网 - HTML5先行者学习网
font-weight: 300;6CDHTML5中文学习网 - HTML5先行者学习网
line-height: 1.56CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .night-tabs-content li .h1 {font-size: 3em}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .night-tabs-content li .h2 {font-size: 2.2em}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .night-tabs-content li .h3 {font-size: 1.4em}6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Paragraphs <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .night-tabs-content li p {6CDHTML5中文学习网 - HTML5先行者学习网
margin: .5em 0;6CDHTML5中文学习网 - HTML5先行者学习网
font-size: 1em6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Links <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .night-tabs-content li a {color: #ecf0f1}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .night-tabs-content li a:hover,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .night-tabs-content li a:focus {text-decoration: none}6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> FontAwesome <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .fa { margin-right: .5em }6CDHTML5中文学习网 - HTML5先行者学习网
/*------------------------------------*/6CDHTML5中文学习网 - HTML5先行者学习网
#EXTENDED TYPOGRAPHY6CDHTML5中文学习网 - HTML5先行者学习网
/*------------------------------------*/6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Images <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .night-tabs-content li img {6CDHTML5中文学习网 - HTML5先行者学习网
max-width: 100%;6CDHTML5中文学习网 - HTML5先行者学习网
height: auto6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Lists <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .night-tabs-ordered-list,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .night-tabs-unordered-list {6CDHTML5中文学习网 - HTML5先行者学习网
margin-top: .3em;6CDHTML5中文学习网 - HTML5先行者学习网
padding-left: 2.5em6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .night-tabs-ordered-list {list-style: decimal}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .night-tabs-unordered-list { list-style: disc}6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Utility <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
/* Positioning */6CDHTML5中文学习网 - HTML5先行者学习网
.text-center {text-align: center}6CDHTML5中文学习网 - HTML5先行者学习网
.text-left {text-align: left}6CDHTML5中文学习网 - HTML5先行者学习网
.text-right {text-align: right}6CDHTML5中文学习网 - HTML5先行者学习网
.pull-left {float: left}6CDHTML5中文学习网 - HTML5先行者学习网
.pull-right {float: right}6CDHTML5中文学习网 - HTML5先行者学习网
/* Preformatted */6CDHTML5中文学习网 - HTML5先行者学习网
.dropcap {6CDHTML5中文学习网 - HTML5先行者学习网
font-family: "Sanchez", Rockwell, slab-serif;6CDHTML5中文学习网 - HTML5先行者学习网
float: left;6CDHTML5中文学习网 - HTML5先行者学习网
font-size: 5em;6CDHTML5中文学习网 - HTML5先行者学习网
line-height: .9;6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
.blockquote {6CDHTML5中文学习网 - HTML5先行者学习网
margin: 1em;6CDHTML5中文学习网 - HTML5先行者学习网
padding: 0 0 0 1em;6CDHTML5中文学习网 - HTML5先行者学习网
border-left: 3px solid #ecf0f16CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
.well {6CDHTML5中文学习网 - HTML5先行者学习网
background: #555;6CDHTML5中文学习网 - HTML5先行者学习网
padding: 1em!important6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
/*------------------------------------*/6CDHTML5中文学习网 - HTML5先行者学习网
#GRID SYSTEM6CDHTML5中文学习网 - HTML5先行者学习网
/*------------------------------------*/6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Micro-Clearfix <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-row:after {6CDHTML5中文学习网 - HTML5先行者学习网
content: '';6CDHTML5中文学习网 - HTML5先行者学习网
display: table;6CDHTML5中文学习网 - HTML5先行者学习网
clear: both6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Basic Structure <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-row {margin-top: 1em}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-row:first-child {margin-top: 0}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column {6CDHTML5中文学习网 - HTML5先行者学习网
display: block;6CDHTML5中文学习网 - HTML5先行者学习网
float: left;6CDHTML5中文学习网 - HTML5先行者学习网
width: 100%;6CDHTML5中文学习网 - HTML5先行者学习网
margin-left: 2%6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column:first-child { margin-left: 0}6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Grid System Config <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column-1 {width: 6.5%}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column-2 {width: 15%}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column-3 {width: 23.5%}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column-4 {width: 32%}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column-5 {width: 40.5%}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column-6 {width: 49%}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column-7 {width: 57.5%}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column-8 {width: 66%}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column-9 {width: 74.5%}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column-10 {width: 83%}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column-11 {width: 91.5%}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column-offset-1,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column-offset-1:first-child{margin-left:8.5%}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column-offset-2,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column-offset-2:first-child{margin-left:17%}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column-offset-3,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column-offset-3:first-child{margin-left:25.5%}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column-offset-4,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column-offset-4:first-child{margin-left:34%}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column-offset-5,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column-offset-5:first-child{margin-left:42.5%}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column-offset-6,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column-offset-6:first-child{margin-left:51%}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column-offset-7,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column-offset-7:first-child{margin-left:59.5%}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column-offset-8,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column-offset-8:first-child{margin-left:68%}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column-offset-9,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column-offset-9:first-child{margin-left:76.5%}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column-offset-10,.night-tabs .grid-column-offset-10:first-child{margin-left:85%}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column-offset-11,.night-tabs .grid-column-offset-11:first-child{margin-left:93.5%}6CDHTML5中文学习网 - HTML5先行者学习网
/**6CDHTML5中文学习网 - HTML5先行者学习网
* CONTENTS - colors.css6CDHTML5中文学习网 - HTML5先行者学习网
*6CDHTML5中文学习网 - HTML5先行者学习网
* COLORS6CDHTML5中文学习网 - HTML5先行者学习网
* Default (Gray/Grey), Red, Blue, Green, Purple, Orange, Yellow, Pink, Brown, Teal, Turquoise.6CDHTML5中文学习网 - HTML5先行者学习网
*6CDHTML5中文学习网 - HTML5先行者学习网
*/6CDHTML5中文学习网 - HTML5先行者学习网
/*------------------------------------*/6CDHTML5中文学习网 - HTML5先行者学习网
#COLORS6CDHTML5中文学习网 - HTML5先行者学习网
/*------------------------------------*/6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Default (Gray/Grey) <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs label:hover span span,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs input:checked+label span span,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-color-default label:hover span span,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-color-default input:checked+label span span{background: #6c7a89}6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Blue <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-color-blue label:hover span span,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-color-blue input:checked+label span span {background: #1e8bc3}6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Red <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-color-red label:hover span span,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-color-red input:checked+label span span {background: #ef4836}6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Green <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-color-green label:hover span span,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-color-green input:checked+label span span {background: #27ae60}6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Purple <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-color-purple label:hover span span,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-color-purple input:checked+label span span {background: #9b59b6}6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Orange <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-color-orange label:hover span span,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-color-orange input:checked+label span span {background: #F9690E}6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Yellow <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-color-yellow label:hover span span,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-color-yellow input:checked+label span span {background: #a8880a}6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Pink <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-color-pink label:hover span span,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-color-pink input:checked+label span span {background: #dB0a5b}6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Brown <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-color-brown label:hover span span,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-color-brown input:checked+label span span {background: #926239}6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Teal <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-color-teal label:hover span span,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-color-teal input:checked+label span span {background: #008080}6CDHTML5中文学习网 - HTML5先行者学习网
/* ->>> Turquoise <<<-*/6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-color-turquoise label:hover span span,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs-color-turquoise input:checked+label span span {background: #16a085}6CDHTML5中文学习网 - HTML5先行者学习网
/**6CDHTML5中文学习网 - HTML5先行者学习网
* CONTENTS - mobile.css6CDHTML5中文学习网 - HTML5先行者学习网
*6CDHTML5中文学习网 - HTML5先行者学习网
* RESPONSIVE STACKING6CDHTML5中文学习网 - HTML5先行者学习网
* Tabs stack on top of each other on mobile devices.6CDHTML5中文学习网 - HTML5先行者学习网
*6CDHTML5中文学习网 - HTML5先行者学习网
*/6CDHTML5中文学习网 - HTML5先行者学习网
/*------------------------------------*/6CDHTML5中文学习网 - HTML5先行者学习网
#RESPONSIVE STACKING6CDHTML5中文学习网 - HTML5先行者学习网
/*------------------------------------*/6CDHTML5中文学习网 - HTML5先行者学习网
@media screen and (max-width: 48em) {6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column,6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs .grid-column:first-child {6CDHTML5中文学习网 - HTML5先行者学习网
float: none;6CDHTML5中文学习网 - HTML5先行者学习网
width: 100%;6CDHTML5中文学习网 - HTML5先行者学习网
margin: 1em 0 0 06CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs > label {6CDHTML5中文学习网 - HTML5先行者学习网
display: block;6CDHTML5中文学习网 - HTML5先行者学习网
float: none;6CDHTML5中文学习网 - HTML5先行者学习网
width: 100%;6CDHTML5中文学习网 - HTML5先行者学习网
padding-right: 0;6CDHTML5中文学习网 - HTML5先行者学习网
padding-left: 0;6CDHTML5中文学习网 - HTML5先行者学习网
text-align: left;6CDHTML5中文学习网 - HTML5先行者学习网
margin: 06CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs > .night-tabs-content {6CDHTML5中文学习网 - HTML5先行者学习网
margin-top: 0;6CDHTML5中文学习网 - HTML5先行者学习网
margin-right: 0;6CDHTML5中文学习网 - HTML5先行者学习网
margin-left: 06CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs > .night-tabs-content > li {6CDHTML5中文学习网 - HTML5先行者学习网
-webkit-transform-origin: 50% 0%;6CDHTML5中文学习网 - HTML5先行者学习网
-ms-transform-origin: 50% 0%;6CDHTML5中文学习网 - HTML5先行者学习网
transform-origin: 50% 0%6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
.night-tabs.night-tabs-animation-flip > ul > li {6CDHTML5中文学习网 - HTML5先行者学习网
-webkit-transform: rotateX(-90deg);6CDHTML5中文学习网 - HTML5先行者学习网
transform: rotateX(-90deg)6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
body {6CDHTML5中文学习网 - HTML5先行者学习网
background: #111;6CDHTML5中文学习网 - HTML5先行者学习网
margin-top: 2em6CDHTML5中文学习网 - HTML5先行者学习网
}6CDHTML5中文学习网 - HTML5先行者学习网
6CDHTML5中文学习网 - HTML5先行者学习网

总结:6CDHTML5中文学习网 - HTML5先行者学习网
6CDHTML5中文学习网 - HTML5先行者学习网
这里主要使用表单的单选按钮来实现这个TAB显示和隐藏,首页tab里的内容默认隐藏,如果单选按钮为选中状态(checked)就显示内容。具体请看下面代码。6CDHTML5中文学习网 - HTML5先行者学习网

关于兼容性,因为是用CSS3来制作的,所以如果不支持CSS3的浏览将会出现不兼容的情况。

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助