html制作tab,纯css制作tab效果

来源：http://itssh.cn/post/927.html

使用radio单选按钮可以制作tab效果，有几个标签页，就需要对应添加几个input，同时每个input的name必须设置为一致，使用CSS3的同级元素链接符来改变样式。而Tab里面的nav导航都要用label包裹并添加对应的for.

ps：tab不支持IE8及其以下，box 布局IE 6.0-11.0不支持可float浮动替代

DEMO3

/*

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…

效果：

tab.jpg