做一个这个效果↓
代码↓
Document
效果图↓
可以看到这是一个梯形的效果。
修改后代码↓
Document
效果图↓
这回可以看到是直角矩形的效果。
小技巧：制作这种矩形变色的边框方法就是用两个盒子来做！蓝色区域给父盒子设置，灰色区域用子盒子设置。
制作一个tab栏（选项卡）
作一个这个tab栏↓
首先设置宽度，写出头部的上边线代码↓
.box{ width: 301px; border-top: 2px solid blue; margin: 100px auto; } 效果图↓
然后写出新闻、娱乐、体育这个头部，(包括设置宽高，浮动，文字效果)还有当选中新闻这个标题后新闻这块所对应的的效果，代码↓
Document 新闻
娱乐
体育
新闻内容娱乐内容体育内容
效果图↓
可以看到选中新闻版块后，新闻后面变白，没有下边线。
制作tab栏，也叫选项卡：
没有被选中的主题部分，需要隐藏，选中显示。
给所有元素加一个显示模式隐藏，给要显示的元素加一个显示模式块级。
display: none;隐藏我们的元素。
display: block显示我们的元素。
所以标题下面所对应的内容代码如↓
.box .bottom div{ padding: 10px; height: 150px; background: skyblue; display: none; } .box .bottom div.now{ display: block;................................................................................................................ 新闻
娱乐
体育
新闻内容 娱乐内容 体育内容 注意：在添加显示模式时，一定不要忘记添加类名。
整体代码↓
Document 新闻
娱乐
体育
新闻内容娱乐内容体育内容
效果图↓
