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

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

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

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

border-radius: 50px;
/\* 让盒子水平居中 \*/
margin: 50px auto 0px;
/\* 消除间隙 \*/
font-size: 0px;
/\* 给div添加文本居中 \*/
text-align: center;
/\* =========添加内边距 \*/
padding: 5px 0px;

}

 效果前后比对：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/8076334ff2a34a3a8e76005624821044.png)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/de87005fef8c469aba63d586ca05f9aa.png)
* 添加文本前的图标

 代码修改处为：

 

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

/* ======== */
.tab span i {
display: inline-block;
width: 26px;
height: 26px;
border: 1px solid red;
/* 添加背景图片 */
background-image: url(…/images/icon.png);
/* 让图标和文本中线对齐 */
vertical-align: middle;
margin-right: 5px;
}

/* 精灵图技术 */
.tab span .icon2 {
background-position: -26px 0px;
}

.tab span .icon3 {