纯CSS,label+input+section实现tab功能
2016-06-14 14:25
603 查看
非常简易实用的代码,并没有华丽丽的效果,也没有华丽丽的代码。
一切为了实用!
<style> html, body { height: 100%; } body { font: 14px/1 'Open Sans', sans-serif; color: #555; background: #eee; } h1 { padding: 50px 0; font-weight: 400; text-align: center; } p { margin: 0 0 20px; line-height: 1.5; } main { min-width: 320px; max-width: 800px; padding: 50px; margin: 0 auto; background: #fff; } section { display: none; padding: 20px 0 0; border-top: 1px solid #ddd; } input { display: none; } label { display: inline-block; margin: 0 0 -1px; padding: 15px 25px; font-weight: 600; text-align: center; color: #bbb; border: 1px solid transparent; } label:before { font-family: fontawesome; font-weight: normal; margin-right: 10px; } label[for*='1']:before { content: '\f1cb'; } label[for*='2']:before { content: '\f17d'; } label[for*='3']:before { content: '\f16b'; } label[for*='4']:before { content: '\f1a9'; } label:hover { color: #888; cursor: pointer; } input:checked + label { color: #555; border: 1px solid #ddd; border-top: 2px solid orange; border-bottom: 1px solid #fff; } #tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 { display: block; } @media screen and (max-width: 650px) { label { font-size: 0; } label:before { margin: 0; font-size: 18px; } } @media screen and (max-width: 400px) { label { padding: 15px; } } </style> <h1>Tommy bad bad</h1> <main> <input id="tab1" type="radio" name="tabs" checked> <label for="tab1">1</label> <input id="tab2" type="radio" name="tabs"> <label for="tab2">2</label> <input id="tab3" type="radio" name="tabs"> <label for="tab3">3</label> <input id="tab4" type="radio" name="tabs"> <label for="tab4">4</label> <section id="content1"> <p> 1 </p> <p> 1 </p> </section> <section id="content2"> <p> 2 </p> <p> 2 </p> </section> <section id="content3"> <p> 3 </p> <p> 3 </p> </section> <section id="content4"> <p> 4 </p> <p> 4 </p> </section> </main>
相关文章推荐
- CSS3属性教程与案例分享
- CSS3属性教程与案例分享
- CSS3的calc()使用
- 使用CSS3的appearance属性改变元素的外观
- CSS3美化图片
- CSS3质感分析——表面线性渐变
- 分析选项卡底部内凹圆角制作
- 细说百度图片栏目——图片展示效果
- 8个实用的响应式设计框架
- 20+ Animation Scripts, Libraries and Plugins
- easyui------显示隐藏列功能
- 新时代编辑神器:Atom
- 如何使用CSS3画出一个叮当猫
- css 兼容性问题this.style.cursor=''hand''
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- jQuery CSS3相结合实现时钟插件
- Firefox和IE兼容性问题及解决方法总结
- CSS3实现动态翻牌效果 仿百度贴吧3D翻牌一次动画特效
- Dom与浏览器兼容性说明