介绍一个纯css制作tab的实例代码

使用radio单选按钮可以制作tab效果，有几个标签页，就需要对应添加几个input，同时每个input的name必须设置为一致，使用css3的同级元素链接符来改变样式。而tab里面的nav导航都要用label包裹并添加对应的for.
ps：tab不支持ie8及其以下，box 布局ie 6.0-11.0不支持可float浮动替代

nbsp;HTML>/*    tab头区域*/.ui-tab input {    display: none}/*    内容区域*/.ui-tab .ui-content ul {    display: none;    min-height: 200px;}/*    头部区域选中*/#new:checked ~ .ui-nav .new,#hot:checked ~ .ui-nav .hot,#video:checked ~ .ui-nav .video {    background: #F4BD00;}/*    内容区域选中*/#new:checked ~ .ui-content .new-list,#hot:checked ~ .ui-content .hot-list,#video:checked  ~ .ui-content .video-list {    display: block;    background: #f6f6f6;}/*    tab头部布局*/.ui-nav ul {    display: -webkit-box;    display: box;    height: 45px;    line-height: 45px;    background: #fff;}.ui-nav ul > li {    -webkit-box-flex: 1;    box-flex: 1;    text-align: center;}.ui-nav ul > li label {    width: 100%;    display: block;    cursor: pointer;}        
                                  
            

登录后复制                最新新闻                社会焦点                最新视频                            

                tab内容新1                                        tab内容新2…                                        tab内容新3…                            

效果：

【相关推荐】

1. 免费css在线视频教程

2. css在线手册

立即学习“前端免费学习笔记（深入）”；

3. php.cn独孤九贱（2）－css视频教程

以上就是介绍一个纯css制作tab的实例代码的详细内容，更多请关注【创想鸟】其它相关文章！