第1关:Tab栏CSS样式设计
任务描述
本关任务:设计div容器,实现tab栏css样式设计。
相关知识
为了完成本关任务,你需要掌握:css样式设计
css样式设计
这里举例与我们任务有关的边界样式设计 margin: 上边界值 右边界值 下边界值 左边界值 这个和移动端稍微有点区别,移动端是:上左下右的设置 请注意:下面写法的含义 margin:5px;表示四个值都是5px margin:5px 10px; 表示下边界值和上边界值都是5px,右边界值和左边界值都是10px; margin:5px 10px 15px;表示上=5,右=10,下=15,左=10;
编程要求
根据提示,在右侧编辑器补充代码 要求上边界为实线 颜色样式为#206F96 上边界宽度2px 要求鼠标选中的图片颜色为#fff(默认的第一卡栏 表头颜色)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tab栏切换</title>、
<style>
/* CSS Document */
/*全局控制*/
body{ font-size:14px; font-family:"宋体";}
/*清除浏览器默认样式*/
body,ul,li{list-style:none; margin:0; padding:0; }
/*大div样式*/
.tab-box{
width:383px;
margin:10px;
border:1px solid #ccc;
/* ********* Begin ********* */
border-top:2px solid #206F96;
/* ********* End ********* */
}
/*选项样式*/
.tab-head{height:31px;}
.tab-head-div{
width:95px;
height:30px;
float:left;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
background:#eee;
line-height:30px;
text-align:center;
cursor:pointer;}
.tab-head .current{
/* ********* Begin ********* */
background:#fff;
/* ********* End ********* */
border-bottom:1px solid #fff;}
.tab-head-r{border-right:0;}
/*选项内容样式*/
.tab-body-ul{display:none;margin:20px 10px;}
.tab-body-ul li{margin:5px;}
.tab-body .current{display:block;}
</style>
</head>
<body>
<div class="tab-box">
<div class="tab-head" id="tab-head">
<div class="tab-head-div current">网页设计</div>
<div class="tab-head-div">前端开发</div>
<div class="tab-head-div">人工智能</div>
<div class="tab-head-div tab-head-r">电商运营</div>
</div>
<div class="tab-body" id="tab-body">
<ul class="tab-body-ul current">
<li>HTML5+CSS3网页设计与制作</li>
<li>互联网产品设计思维与实践</li>
<li>Photoshop CS6图像设计案例教程</li>
<li>跨平台UI设计宝典</li>
</ul>
<ul class="tab-body-ul">
<li>JavaScript+jQuery交互式Web前端开发</li>
<li>Vue.js前端开发实战</li>
<li>微信小程序开发实战</li>
<li>JavaScript前端开发案例教程</li>
</ul>
<ul class="tab-body-ul">
<li>Python程序开发案例教程</li>
<li>Python数据分析与应用:从数据获取到可视化</li>
<li>Python实战编程:从零学Python</li>
<li>Python快速编程入门</li>
</ul>
<ul class="tab-body-ul">
<li>数据分析思维与可视化</li>
<li>淘宝天猫店美工设计实操:配色、布局、修图、装修</li>
<li>淘宝天猫店一本通: 开店、装修、运营、推广</li>
<li>网络营销文案策划</li>
</ul>
</div>
</div>
</body>
</html>
第2关:Tab栏切换效果javascript训练
任务描述
本关任务:熟悉切换tab栏其中的函数,学会使用启动器 和鼠标鉴定事件。
相关知识
为了完成本关任务,你需要掌握 什么时启动器 如何使用启动器
启动器知识点
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。 setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
编程要求
根据提示,在右侧编辑器补充代码
获取所有的tab-head-div标签 在指定位置开启启动器 在指定的位置关闭启动器 了解函数功能
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tab栏切换</title>、
<style>
/* CSS Document */
/*全局控制*/
body{ font-size:14px; font-family:"宋体";}
/*清除浏览器默认样式*/
body,ul,li{list-style:none; margin:0; padding:0; }
/*大div样式*/
.tab-box{width:383px;margin:10px;border:1px solid #ccc;border-top:2px solid #206F96;}
/*选项样式*/
.tab-head{height:31px;}
.tab-head-div{width:95px;height:30px;float:left;border-bottom:1px solid #ccc;border-right:1px solid #ccc;background:#eee;line-height:30px;text-align:center;cursor:pointer;}
.tab-head .current{background:#fff;border-bottom:1px solid #fff;}
.tab-head-r{border-right:0;}
/*选项内容样式*/
.tab-body-ul{display:none;margin:20px 10px;}
.tab-body-ul li{margin:5px;}
.tab-body .current{display:block;}
</style>
<script>
//加载事件
window.onload = function(){
//获取所有tab-head-div
/* ********* Begin ********* */
var head_divs = document.getElementById("tab-head").getElementsByTagName("div");
/* ********* End ********* */
//保存当前焦点元素的索引
var current_index=0;
//启动定时器 要求每5秒执行函数'autoChange'一次
/* ********* Begin ********* */
var timer = window.setInterval(autoChange, 5000);
/* ********* End ********* */
//遍历元素
for(var i=0;i<head_divs.length;i++){
//添加鼠标滑过事件
head_divs[i].onmouseover = function(){
//鼠标滑过时清除timer启动器
/* ********* Begin ********* */
clearInterval(timer);
/* ********* End ********* */
if(i != current_index){
head_divs[current_index].style.backgroundColor = '';
head_divs[current_index].style.borderBottom = '';
}
//获取所有tab-body-ul
var body_uls = document.getElementById("tab-body").getElementsByTagName("ul");
//遍历元素
for(var i=0;i<body_uls.length;i++){
//将所有元素设为隐藏
body_uls[i].className = body_uls[i].className.replace(" current","");
head_divs[i].className = head_divs[i].className.replace(" current","");
//将当前索引对应的元素设为显示
if(head_divs[i] == this){
this.className += " current";
body_uls[i].className += " current";
}
}
}
//的鼠标移出事件
head_divs[i].onmouseout = function(){
//启动定时器,恢复自动切换
timer = setInterval(autoChange,5000);
}
}
//定时器周期函数-Tab栏自动切换
function autoChange(){
//自增索引
++current_index;
//当索引自增达到上限时,索引归0
if (current_index == head_divs.length) {
current_index=0;
}
//当前的背景颜色和边框颜色
for(var i=0;i<head_divs.length;i++){
if(i == current_index){
head_divs[i].style.backgroundColor = '#fff';
head_divs[i].style.borderBottom = '1px solid #fff';
}else{
head_divs[i].style.backgroundColor = '';
head_divs[i].style.borderBottom = '';
}
}
//获取所有tab-body-ul
var body_uls = document.getElementById("tab-body").getElementsByTagName("ul");
//遍历元素
for(var i=0;i<body_uls.length;i++){
//将所有元素设为隐藏
body_uls[i].className = body_uls[i].className.replace(" current","");
head_divs[i].className = head_divs[i].className.replace(" current","");
//将当前索引对应的元素设为显示
if(head_divs[i] == head_divs[current_index]){
this.className += " current";
body_uls[i].className += " current";
}
}
}
}
</script>
</head>
<body>
<div class="tab-box">
<div class="tab-head" id="tab-head">
<div class="tab-head-div current">网页设计</div>
<div class="tab-head-div">前端开发</div>
<div class="tab-head-div">人工智能</div>
<div class="tab-head-div tab-head-r">电商运营</div>
</div>
<div class="tab-body" id="tab-body">
<ul class="tab-body-ul current">
<li>HTML5+CSS3网页设计与制作</li>
<li>互联网产品设计思维与实践</li>
<li>Photoshop CS6图像设计案例教程</li>
<li>跨平台UI设计宝典</li>
</ul>
<ul class="tab-body-ul">
<li>JavaScript+jQuery交互式Web前端开发</li>
<li>Vue.js前端开发实战</li>
<li>微信小程序开发实战</li>
<li>JavaScript前端开发案例教程</li>
</ul>
<ul class="tab-body-ul">
<li>Python程序开发案例教程</li>
<li>Python数据分析与应用:从数据获取到可视化</li>
<li>Python实战编程:从零学Python</li>
<li>Python快速编程入门</li>
</ul>
<ul class="tab-body-ul">
<li>数据分析思维与可视化</li>
<li>淘宝天猫店美工设计实操:配色、布局、修图、装修</li>
<li>淘宝天猫店一本通: 开店、装修、运营、推广</li>
<li>网络营销文案策划</li>
</ul>
</div>
</div>
</body>
</html>