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

港控/mmm° 2024-04-26 03:18 2阅读 0赞

> 🔥一个人走得远了，就会忘记自己为了什么而出发，希望你可以不忘初心，不要随波逐流，一直走下去🎶  
> 🦋 欢迎关注🖱点赞👍收藏🌟留言🐾  
> 🦄 本文由 [程序喵正在路上][Link 1] 原创，CSDN首发！  
> 💖 系列专栏：[前端基础小案例&小项目][Link 2]  
> 🌠 首发时间：2022年8月20日  
> ✅ 如果觉得博主的文章还不错的话，希望小伙伴们三连支持一下哦

#### 阅读指南 ####

*  一、前期准备
 *  二、效果展示
 *  三、核心知识点
 *  四、具体实现
 *  五、源码分享

## 一、前期准备 ##

素材和源码可以在我发布的资源里免费下载，可点击下方链接进行下载

[https://download.csdn.net/download/weixin\_62511863/86404929][https_download.csdn.net_download_weixin_62511863_86404929]

## 二、效果展示 ##

实现如下图的效果：

![在这里插入图片描述][ffb56d06de684c889c30797bb59651fb.png]

阅读温馨提示：代码注释前面有 “`=========`” 标记的即为较之前面修改的代码

## 三、核心知识点 ##

*  **display** 元素类型转换
 *  **vertical-align** 样式
 *  **CSS** 精灵图技术
 *  **padding** 的灵活运用
 *  行内块级（**inline-block**）元素产生的空隙消除技术

## 四、具体实现 ##

* 构建一个长 **800px** 宽 **50px** 的长方形盒子，为盒子加上圆角边框的效果
 
 代码：
 
 <div class="tab"></div>
 
 /* 消除所有盒子内外边距 */
 * {
 
 margin: 0;
 padding: 0;
 }
 
 .tab {
 
 width: 800px;
 height: 50px;
 /* 添加背景颜色便于观察 */
 background-color: #FE94A9;
 /* 添加圆角边框 */
 border-radius: 50px;
 /* 让盒子水平居中 */
 margin: 50px auto 0px;
 }
 
 效果为： 
 ![在这里插入图片描述][bbdbda09f5a04957803ec43ac8362715.png]
 * 往大盒子 **div** 里面添加小盒子 **span**
 
 代码修改处为：
 
 <div class="tab">
 
 备孕期间 
 怀孕 
 0-1岁 
 1-2岁 
 2-3岁
 </div>
 
 .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;
 }
 
 前后效果比对： 
 ![在这里插入图片描述][bbdbda09f5a04957803ec43ac8362715.png] 
 ![在这里插入图片描述][c111ddc58962478f9f41d1111c972b1a.png]
 * 消除转换为行内块元素后，相邻 **span** 之间的间隙
 
 代码修改处为：
 
 .tab {
 
 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;
 }
 
 效果前后比对： 
 ![在这里插入图片描述][48b181b349c345fb9e0c1aacff664b18.png] 
 ![在这里插入图片描述][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;
 }
 
 效果前后比对： 
 ![在这里插入图片描述][8f8d57eba9d7461e9ad3c1f9738f0ebc.png]
 
 ![在这里插入图片描述][8076334ff2a34a3a8e76005624821044.png]
 * 调整上下的间距
 
 代码修改处为：
 
 .tab {
 
 width: 800px;
 /* =========删去高度设置 */
 background-color: #F7F7F7;
 /* 添加圆角效果 */
 border-radius: 50px;
 /* 让盒子水平居中 */
 margin: 50px auto 0px;
 /* 消除间隙 */
 font-size: 0px;
 /* 给div添加文本居中 */
 text-align: center;
 /* =========添加内边距 */
 padding: 5px 0px;
 }
 
 效果前后比对： 
 ![在这里插入图片描述][8076334ff2a34a3a8e76005624821044.png] 
 ![在这里插入图片描述][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 {
 
 background-position: -52px 0px;
 }
 
 .tab span .icon4 {
 
 background-position: -78px 0px;
 }
 
 .tab span .icon5 {
 
 background-position: -104px 0px;
 }
 /* ======== */
 
 前后效果比对： 
 ![在这里插入图片描述][de87005fef8c469aba63d586ca05f9aa.png] 
 ![在这里插入图片描述][c579017323164f67940f8512fcfb9540.png]
 * 设置点击文本时背景颜色变化的效果
 
 代码修改处为：
 
 
 
 
 备孕期间 
 怀孕 
 0-1岁 
 1-2岁 
 2-3岁
 
 /* ========鼠标点击的效果需要js实现，这里我们只写交互的原理 */
 .tab .current {
 
 background-color: #FE94A9;
 color: #fff;
 }
 
 .tab .current .icon1 {
 
 background-position: 0px -26px;
 }
 
 .tab .current .icon2 {
 
 background-position: -26px -26px;
 }
 
 .tab .current .icon3 {
 
 background-position: -52px -26px;
 }
 
 .tab .current .icon4 {
 
 background-position: -78px -26px;
 }
 
 .tab .current .icon5 {
 
 background-position: -104px -26px;
 }
 
 前后效果比对： 
 ![在这里插入图片描述][c579017323164f67940f8512fcfb9540.png] 
 ![在这里插入图片描述][bf6d57c168cd4f3e881b705660a27b4c.png]
 * 给 **span** 添加圆角边框效果
 
 代码修改处为：
 
 .tab span {
 
 /* 转换为行内块元素,让高度的设置可以生效，但是span之间会产生间隙 */
 display: inline-block;
 border: 1px solid red;
 height: 40px;
 /* 通过内边距的设置让文字居中显示 */
 padding: 0px 40px;
 line-height: 40px;
 /* 同时需要再单独给span设置字体大小 */
 font-size: 16px;
 /* ========添加圆角边框 */
 border-radius: 50px;
 }
 
 前后效果比对： 
 ![在这里插入图片描述][bf6d57c168cd4f3e881b705660a27b4c.png] 
 ![在这里插入图片描述][1940ec352513487b9e4890578a2d1298.png]
 * 取消边框线
 
 代码修改处为：
 
 .tab span {
 
 /* 转换为行内块元素,让高度的设置可以生效，但是span之间会产生间隙 */
 display: inline-block;
 /* ========取消边框线 */
 height: 40px;
 /* 通过内边距的设置让文字居中显示 */
 padding: 0px 40px;
 line-height: 40px;
 /* 同时需要再单独给span设置字体大小 */
 font-size: 16px;
 /* 添加圆角边框 */
 border-radius: 50px;
 }
 
 .tab span i {
 
 display: inline-block;
 width: 26px;
 height: 26px;
 /* ========取消边框线 */
 /* 添加背景图片 */
 background-image: url(../images/icon.png);
 /* 让图标和文本中线对齐 */
 vertical-align: middle;
 margin-right: 5px;
 }
 
 前后效果比对： 
 ![在这里插入图片描述][1940ec352513487b9e4890578a2d1298.png] 
 ![在这里插入图片描述][a7ce73f6639b47cbb85f3a376c9b2a31.png]

精美选项卡的制作到这里就完成啦，你学会了吗？

## 五、源码分享 ##

<!DOCTYPE html>
 <html lang="en">
 
 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>精美选项卡菜单</title>
 <style type="text/css">
 /* 消除所有盒子内外边距 */
 * {
 
 margin: 0;
 padding: 0;
 }
 
 .tab {
 
 width: 800px;
 /* 删去高度设置 */
 background-color: #F7F7F7;
 /* 添加圆角效果 */
 border-radius: 50px;
 /* 让盒子水平居中 */
 margin: 50px auto 0px;
 /* 消除间隙 */
 font-size: 0px;
 /* 给div添加文本居中 */
 text-align: center;
 /* 添加内边距 */
 padding: 5px 0px;
 }
 
 /* 注意：相邻两个选项卡中字体宽度不一样，所以span宽度不能写死 */
 .tab span {
 
 /* 转换为行内块元素,让高度的设置可以生效，但是span之间会产生间隙 */
 display: inline-block;
 height: 40px;
 /* 通过内边距的设置让文字居中显示 */
 padding: 0px 40px;
 line-height: 40px;
 /* 同时需要再单独给span设置字体大小 */
 font-size: 16px;
 /* 添加圆角边框 */
 border-radius: 50px;
 }
 
 .tab span i {
 
 display: inline-block;
 width: 26px;
 height: 26px;
 /* 添加背景图片 */
 background-image: url(../images/icon.png);
 /* 让图标和文本中线对齐 */
 vertical-align: middle;
 margin-right: 5px;
 }
 
 /* 精灵图技术 */
 .tab span .icon2 {
 
 background-position: -26px 0px;
 }
 
 .tab span .icon3 {
 
 background-position: -52px 0px;
 }
 
 .tab span .icon4 {
 
 background-position: -78px 0px;
 }
 
 .tab span .icon5 {
 
 background-position: -104px 0px;
 }
 
 /* 鼠标点击的效果需要js实现，这里我们只写交互的原理 */
 .tab .current {
 
 background-color: #FE94A9;
 color: #fff;
 }
 
 .tab .current .icon1 {
 
 background-position: 0px -26px;
 }
 
 .tab .current .icon2 {
 
 background-position: -26px -26px;
 }
 
 .tab .current .icon3 {
 
 background-position: -52px -26px;
 }
 
 .tab .current .icon4 {
 
 background-position: -78px -26px;
 }
 
 .tab .current .icon5 {
 
 background-position: -104px -26px;
 }
 </style>
 </head>
 
 <body>
 <div class="tab">
 
 
 备孕期间 
 怀孕 
 0-1岁 
 1-2岁 
 2-3岁
 </div>
 
 <div class="tab">
 
 
 备孕期间 
 怀孕 
 0-1岁 
 1-2岁 
 2-3岁
 </div>
 </body>
 
 </html>

> 🧸 这次的分享就到这里啦，继续加油哦^^  
> 🐱 我是[程序喵][Link 1]，陪你一点点进步  
> 🍭 有出错的地方欢迎在评论区指出来，共同进步，谢谢啦

[Link 1]: https://blog.csdn.net/weixin_62511863?spm=1011.2421.3001.5343
[Link 2]: https://blog.csdn.net/weixin_62511863/category_11974950.html?spm=1001.2014.3001.5482
[https_download.csdn.net_download_weixin_62511863_86404929]: https://download.csdn.net/download/weixin_62511863/86404929
[ffb56d06de684c889c30797bb59651fb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/98cc0bc7fc6f4c2e941804cb15731030.png
[bbdbda09f5a04957803ec43ac8362715.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/f4bf23c9474a4de2a4825a471a7cfe75.png
[c111ddc58962478f9f41d1111c972b1a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/89f16ca3d15f4aad80dc4a5c622b22b0.png
[48b181b349c345fb9e0c1aacff664b18.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/e1daa6d6abc14e28bd6c8d8d01fdc0a6.png
[8f8d57eba9d7461e9ad3c1f9738f0ebc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/c52448c19fb04095992d23fd9b5b0ef0.png
[8076334ff2a34a3a8e76005624821044.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/300080494ac34b4e98eca698722473a6.png
[de87005fef8c469aba63d586ca05f9aa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/230485c91b2046dcad27b5dbc8d76599.png
[c579017323164f67940f8512fcfb9540.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/28cf467c93fb4db7a36e45ea29d723a1.png
[bf6d57c168cd4f3e881b705660a27b4c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/c4b1c7dca5834e47ab412bef199f044a.png
[1940ec352513487b9e4890578a2d1298.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/b5363888f3b94906a6a038e1498ebe02.png
[a7ce73f6639b47cbb85f3a376c9b2a31.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/b26a4f7c045c4e8ba0c5ac353375de0a.png