【前端基础小案例】HTML+CSS打造精美选项卡菜单效果_选项卡效果html代码

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

}

 效果为：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/bbdbda09f5a04957803ec43ac8362715.png)
* 往大盒子 **div** 里面添加小盒子 **span** 

 代码修改处为：

 

备孕期间 怀孕 0-1岁 1-2岁 2-3岁

.tab {
width: 800px;
height: 50px;
/* ========改变背景颜色 */
background-color: #F7F7F7;
/* 添加圆角效果 */
border-radius: 50px;
margin: 50px auto 0px;
}

/* ========注意：相邻两个选项卡中字体宽度不一样，所以span宽度不能写死 */
.tab span {
/* 转换为行内块元素,让高度的设置可以生效，但是span之间会产生间隙 */
display: inline-block;
border: 1px solid red;
height: 40px;
/* 通过内边距的设置让文字居中显示 */
padding: 0px 40px;
line-height: 40px;
}

 前后效果比对：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/bbdbda09f5a04957803ec43ac8362715.png)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/c111ddc58962478f9f41d1111c972b1a.png)
* 消除转换为行内块元素后，相邻 **span** 之间的间隙

 代码修改处为：

 

.tab {<