内容标签页

分享一个CSS3实现的动态内容标签页切换效果教程

依然范特西╮ 提交于 2019-12-10 16:25:35
日期:2012-4-14 来源: GBin1.com 在线演示 本地下载 在这篇教程中,我们将学习如何使用CSS3来实现一个动态的标签页切换效果。希望大家喜欢。 内容标签页在网站或者web开发中经常使用到,它对于帮助我们美化页面非常的实用。这个教程中我们将使用radio button和:checked伪类和sibling组合来实现一个CSS3内容标签页。 注意目前并不是所有的浏览器都支持CSS3。 HTML标签 这里我们使用input元素来生成内容切换操作元素,并且使用label元素来生成标签页内容: <section class="tabs"> <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" /> <label for="tab-1" class="tab-label-1">About us</label> <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" /> <label for="tab-2" class="tab-label-2">How we work</label> <input id="tab-3" type="radio" name="radio