1.选项卡介绍
在平时浏览网页时，大家经常会使用选项卡来切换页面，在设计网页的过程中，也常用选项卡来整合内容，美化页面效果。简而言之，选项卡就是设置选项的模块，每个选项卡代表一个活动的区域，点击不同的区域，即可展示不同的内容。
2.思路
平常的选项卡制作时，总要引入JavaScript才能实现切换效果，本次选项卡的制作主要是通过CSS来实现的。
用div来页面布局，实现矩形效果，完成导航栏和选项卡页面效果。
用a标签来对选项卡的导航栏和内容界面进行设置。
使用:nth-child(n)和class方法来对页面进行切换。
3.过程
（1）首先创建一个div盒子模型，用作导航栏模块。
<div> <a href="#">风景图片</a> <a href="#">最新资讯</a> <a href="#">热点HOT</a> <a href="#">浏览记录</a> </div> |
（2）用CSS对导航栏的宽高，字体进行设置。（当行高和盒子高度上下一致时，会使单行文字上下居中）
.tab{ width:1200px; height: 575px; margin:50px auto; } a{ display:block;/*行内元素变为块级元素*/ float:left; width: 300px; height: 75px; background-image: url(../img/1.png); background-repeat:no-repeat; background-position: center; text-align: center; line-height:75px; color:white; text-decoration:none; font-family:"楷体"; font-size:18px; font-weight:bold; } |
（3）创建一个div作为选项卡内容框架，并用CSS来设置页面切换效果。其中，nth-child(n)选择器匹配父元素中的第n个子元素，元素类型没有限制。（n可以是一个数字，一个关键字，或者一个公式）a:hover~.pic表示a标签和.pic是兄弟关系，不是包含关系。
<div></div> .pic{ height: 575px; background-image: url(../img/n1.jpg); } a:hover{ color:#ffcc00; background-image: url(../img/2.png); } a:hover~.pic{ background-image: url(../img/n1.jpg); } a:nth-child(2):hover~.pic{ background-image: url(../img/n2.jpeg); } a:nth-child(3):hover~.pic{ background-image: url(../img/星球.jpg); } a:nth-child(4):hover~.pic{ background-image: url(../img/3.jpg); } |
效果图如下：
图1
图2
