educoder头歌Web实训 web课——综合应用案例：Tab栏切换效果的制作_头歌实践平台web前端基础开发综合训练-CSDN博客

该博客详细介绍了如何设计Tab栏的CSS样式，包括布局和美化，以及如何通过JavaScript实现Tab栏的自动切换效果，适合Web开发者学习动态网页制作技巧。

educoder头歌Web实训太原理工web课——综合应用案例：动态焦点图页面的制作【全网更新最快】_玛卡巴卡的博客-CSDN博客

第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；

<!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>
</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>