一款纯css3实现的tab选项卡的实列教程_css好看的tabs资源-CSDN文库

102 浏览量 2021-01-19 20:56:08 上传评论收藏 101KB PDF 举报

资源推荐

资源详情

资源评论

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

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

　　实现的代码。

　　html代码：代码：

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

<!–Tab 1–>

<!–Checked= Tab shown–>

<!–Modify icon and name–>

<span><span><em class="fa fa-home"></em>Night Tabs</span></span>

</label>

<!–Tab 2–>

<!–Modify icon and name–>

<span><span><em class="fa fa-font"></em>Typography</span></span>

</label>

<!–Tab 3–>

<!–Modify icon and name–>

<span><span><em class="fa fa-list"></em>Grid Systen</span></span>

</label>

<!–Tab 4–>

<!–Modify icon and name–>

<span><span><em class="fa fa-legal"></em>License</span></span>

</label>

<!–Content–>

<!–Tab 1–>

<!–Content goes here–>

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

things.</p>

</div>

</li>

<!–Tab 2–>

<!–Content goes here–>

Custom Fonts</h1>

Open Sans Light</h2>

<em class="fa fa-check"></em>FontAwesome</h3>

<p>

Paragraphs and Quotes</h2>

Maecenas tincidunt nunc est, nec pharetra odio porta ac. Morbi cursus lacinia neque,

tristique tincidunt ipsum tincidunt a.

</blockquote>

<p>

Maecenas tincidunt nunc est, nec pharetra odio porta ac. Morbi cursus lacinia neque,

tristique tincidunt ipsum tincidunt a.</p>

</div>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada rutrum

felis, quis imperdiet nisl finibus id. Etiam commodo vitae purus a lobortis. Donec

lacinia dapibus metus nec feugiat. Integer blandit tellus vel dapibus efficitur.

Nulla placerat sollicitudin laoreet. Maecenas fermentum eros diam, at blandit lectus

volutpat ac.Proin ornare mauris dui, semper condimentum urna blandit non. Vestibulum

ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut

scelerisque justo sit amet sem commodo, ac porta arcu auctor.</p>

Unordered Lists</h3>

<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<li>Nulla vitae lacus sed dui fringilla elementum eu id eros.</li>

<li>Vivamus euismod mauris sit amet iaculis porttitor.</li>

<li>Donec condimentum massa non elit lobortis, a ultrices ante vulputate.</li>

</ul>

</li>

<li>Nulla vitae lacus sed dui fringilla elementum eu id eros.</li>

<li>Vivamus euismod mauris sit amet iaculis porttitor.</li>

<li>Donec condimentum massa non elit lobortis, a ultrices ante vulputate.</li>

</ul>

Ordered Lists</h3>

<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<li>Nulla vitae lacus sed dui fringilla elementum eu id eros.</li>

<li>Vivamus euismod mauris sit amet iaculis porttitor.</li>

<li>Donec condimentum massa non elit lobortis, a ultrices ante vulputate.</li>

</ol>

</li>

<li>Nulla vitae lacus sed dui fringilla elementum eu id eros.</li>

<li>Vivamus euismod mauris sit amet iaculis porttitor.</li>

<li>Donec condimentum massa non elit lobortis, a ultrices ante vulputate.</li>

</ol>

<em>Typography Set</em>

</div>

</li>

<!–Tab 3–>

<!–Content goes here–>

HTML5</h2>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ante nisl, condimentum

nec dolor viverra, dignissim convallis est. In commodo rhoncus augue, a euismod

felis placerat ut. Ut ullamcorper libero tortor, ut semper lectus congue ut. Morbi

pulvinar, nisi at pharetra scelerisque, nibh magna ornare augue, vel aliquet ipsum

ante eu sem. Maecenas id est risus. Nulla facilisis dui molestie euismod mollis.

Duis vehicula elementum justo in porta. Maecenas erat lectus, finibus vel lectus

non, consequat ultricies dolor. Nunc ultricies quam in purus facilisis, porttitor

blandit odio volutpat. Sed sed posuere lectus, sit amet rutrum est. Duis porttitor

purus blandit, lacinia nibh quis, ultricies augue.</p>

</div>

CSS3</h2>