Tab栏切换效果的制作

2024-01-17 16:13| 来源: 网络整理| 查看: 265

第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（默认的第一卡栏表头颜色）

Tab栏切换、 /* 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;} 网页设计前端开发人工智能电商运营 HTML5+CSS3网页设计与制作互联网产品设计思维与实践 Photoshop CS6图像设计案例教程跨平台UI设计宝典 JavaScript+jQuery交互式Web前端开发 Vue.js前端开发实战微信小程序开发实战 JavaScript前端开发案例教程 Python程序开发案例教程 Python数据分析与应用：从数据获取到可视化 Python实战编程:从零学Python Python快速编程入门数据分析思维与可视化淘宝天猫店美工设计实操：配色、布局、修图、装修淘宝天猫店一本通：开店、装修、运营、推广网络营销文案策划

第2关：Tab栏切换效果javascript训练

任务描述

本关任务：熟悉切换tab栏其中的函数，学会使用启动器和鼠标鉴定事件。

相关知识

为了完成本关任务，你需要掌握什么时启动器如何使用启动器

启动器知识点

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

编程要求

根据提示，在右侧编辑器补充代码

获取所有的tab-head-div标签在指定位置开启启动器在指定的位置关闭启动器了解函数功能

Tab栏切换、 /* 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;} //加载事件 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

【本文地址】

Tab栏切换效果的制作

Tab栏切换效果的制作

今日新闻

推荐新闻