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

来源：自学PHP网时间：2014-12-15 16:20 作者：阅读:次

[导读] css3怎么做tab选项卡？下面费大家分享一款纯css3实现的tab选项卡的实列教程，单击左侧的选项的时候，右侧内容以动画的形式展示。下文有具体代码，想学的朋友可以进来参考一下...

css3怎么做tab选项卡？下面费大家分享一款纯css3实现的tab选项卡的实列教程，单击左侧的选项的时候，右侧内容以动画的形式展示。下文有具体代码，想学的朋友可以进来参考一下

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

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板

<div class="night-tabs night-tabs-color-default night-tabs-animation-slide-right night-tabs-position-vleft">
<input type="radio" name="night-tabs" checked="" id="tab1" class="content1">
<label for="tab1">
<span><span><em class="fa fa-home"></em>Night Tabs</span></span>
</label>
<input type="radio" name="night-tabs" id="tab2" class="content2">
<label for="tab2">
<span><span><em class="fa fa-font"></em>Typography</span></span>
</label>
<input type="radio" name="night-tabs" id="tab3" class="content3">
<label for="tab3">
<span><span><em class="fa fa-list"></em>Grid Systen</span></span>
</label>
<input type="radio" name="night-tabs" id="tab4" class="content4">
<label for="tab4">
<span><span><em class="fa fa-legal"></em>License</span></span>
</label>
<ul class="night-tabs-content">
<li class="content1">
<div class="content-1-content">
<h1 class="h1">
Night Tabs</h1>
<p>
<span class="dropcap">N</span>ight Tabs (formerly TrueTabs) is an extensive CSS3
Tabbed Content snippet. It started out small as a typical CSS Tabs snippet, but
I have expanded it greatly. It offers many features, and can be easily modified
to fit your needs. Some of the features include: Cross browser support, preset animations,
colors, and layouts, a responsive grid system, and a typography set, among other

更多文章推荐