|
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
编 辑 | 王楠岚 责 编 | 杨 曦
|
