翡翠教育微课堂-Web前端之TAB切换效果

翡翠教育集团

软件：HBuilder

素材：三张大小一致的图片

相关技术：jQuery、JavaScript

训练技能点：页面布局、hover事件

★如需下载完整素材，请在下方留言区留下您的邮箱、微信或QQ

制作步骤

一、标题部分

1、页面结构

/*标题一*/

英雄攻略

/*小竖线*/

/*标题二*/

赛事精品

/*小竖线*/

/*标题三*/

精品栏目

2、设置标题的样式

/*清除浏览器默认样式*/

*{

margin: 0;

padding: 0;

list-style: none;

text-decoration: none;

}

/*标题容器样式*/

.tab{

width: 872px;

height: 32px;

background: #f5f5f5;

/*行高29像素*/

line-height: 29px;

/*容器左右居中且距离上部有100像素距离*/

margin: 100px auto 0px;

}

/*标题样式*/

a{

width: 289px;

display: block;

/*三个标题一行显示*/

float: left;

font-size: 14px;

color: #999;

/*文字居中*/

text-align: center;

}

/*小竖线样式*/

.split{

width: 1px;

height: 20px;

float: left;

background: #e1e1e1;

/*距离顶部5个像素的距离*/

margin-top: 5px;

}

二、内容部分

1、页面结构

2、设置内容的样式

img{

width: 872px;

height: 426px;

margin: 0 auto;

/*所有图片隐藏*/

display: none;

}

三、实现页面初始样式

/*第一张图片显示*/

img:nth-child(1){

display: block;

}

/*当前下划线样式*/

.active{

border-bottom: 3px solid #f3c258;

}

前端开发

《我是如何从小白到Web程序员》

《因热爱故高薪！8条经验值得学》

前端开发

《内蒙师范大学毕业生高薪就业》

《天才程序媛拿到知名企业12k》

开班实训

《360定制班网络信息安全开班》

《防灾科技学院实训结束》

实训合作

《河北工程大学实训结束》

《翡翠与百度的不解之缘》

12年的辉煌，12年的业绩，值得选择！