实例一
效果图
radio选项卡切换 asdasdsad1
asdasdsad2
asdasdsad3
实例二 纯CSS实现漂亮tab选项卡切换特效
pure css3 tab
- WordPress主题教程#4:热门点击文章”的固定链接">原创WordPress主题教程#4:热门点击文章
- 原创WordPress主题教程#3:精选推荐文章
- 原创WordPress主题教程#2:置顶推荐文章
- 原创WordPress主题教程#1:最近修改文章
- javascript.html" title="我是如何学习JavaScript">我是如何学习JavaScript
- 搜索引擎优化(SEO)">浅谈现代化搜索引擎优化(SEO)
- 10个优秀的jQuery Mobile主题
- javascript学习15:创建对象
- 全面理解面向对象的 JavaScript
- 移动端触摸滑动插件swipe.js
- 幻灯片">纯CSS幻灯片
- win7安装不了nodejs及解决方法
- 如何在PS上使用Font Awesome字体
- 原创WordPress主题教程#1:最近修改文章
- bootstrap学习和使用的经验总结
- selection.html" title="使用css3改变选中文本的颜色" target="_blank">使用css3改变选中文本的颜色
- js15-5:javascript继承
- 4.20-6.11,忙碌面试,思考前途
- GRUNT:任务运行管理器
- sublime text2打开文件为dump格式
实例三 CSS radio单选框下的选项卡切换效果实例页面CSS代码:
.test_box { width: 50%; min-height: 250px; margin: 1em auto; position: relative; } .test_tab { width: 25%; margin-right: -1px; border: 1px solid #ccc; border-bottom: 0; float: left; } .test_label { display: block; padding-top: 5px; padding-bottom: 5px; background-color: #eee; text-align: center; } .test_radio, .test_tab_content { position: absolute; left: -999em; } .test_radio:checked ~ .test_tab_content { margin-top: -1px; padding: 1em 2em; border: 1px solid #ccc; left: 0; right: 0; } .test_radio:checked ~ .test_label { background-color: #fff; border-bottom: 1px solid #fff; position: relative; z-index: 1; }
HTML代码: