选项卡这个效果估计以后的项目会经常涉及到，对代码还是半熟练的情况下还是写下来吧。
先来布局一个简单的页面：
*{margin: 0;padding: 0;list-style: none;}
#box{margin: 50px;}
#box li{width: 100px;height: 40px;line-height: 40px;text-align: center;background-color: #d8d8d8;margin-right: 2px;float: left;}
#box .active{background: red;}
#content{clear: both;}
#content div{width: 404px;height: 200px;border: 1px solid #d8d8d8;display: none;}
- 新闻
- 社会
- 科技
- 娱乐
新闻
社会
科技
娱乐
选项卡的制作原理是：有若干的选项和对应数量的内容，当对其中一个选项进行操作时，显示对应内容，其他内容不显示。所以，在页面布局的时候，我们先给一个选项设置特殊样式和显示其对应的内容，其他选项样式不变，对应内容隐藏。当操作选项时，把选项的类名改为特殊样式的类名，并且显示对应内容。