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

width: 800px;
height: 50px;
background-color: #F7F7F7;
/\* 添加圆角效果 \*/
border-radius: 50px;
/\* 让盒子水平居中 \*/
margin: 50px auto 0px;
/\* =========消除间隙 \*/
font-size: 0px;

}

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

 效果前后比对：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/48b181b349c345fb9e0c1aacff664b18.png)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/8f8d57eba9d7461e9ad3c1f9738f0ebc.png)
* 让所有 **span** 在 **div** 中居中显示

 代码修改处为：

 

.tab {
width: 800px;
height: 50px;
background-color: #F7F7F7;
/* 添加圆角效果 */
border-radius: 50px;
/* 让盒子水平居中 */
margin: 50px auto 0px;
/* 消除间隙 */
font-size: 0px;
/* =========给div添加文本居中 */
text-align: center;
}

 效果前后比对：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/8f8d57eba9d7461e9ad3c1f9738f0ebc.png)

 ![在这里插入图片描述](https://img-blog.csdnimg.cn/8076334ff2a34a3a8e76005624821044.png)
* 调整上下的间距

 代码修改处为：

 

.tab {
width: 800px;
/* =========删去高度设置 */
background-color: #F7F7F7;
/* 添加圆角效果 */
border-radius: 50px;
/* 让盒子水平居中 */
margin: 50px