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

最新推荐文章于 2024-09-02 11:46:47 发布
最新推荐文章于 2024-09-02 11:46:47 发布
阅读量2.7k 收藏 41
点赞数 27
文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62511863/article/details/126422754
版权

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

阅读指南

一、前期准备

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

https://download.csdn.net/download/weixin_62511863/86404929

二、效果展示

实现如下图的效果：

在这里插入图片描述

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

三、核心知识点

  • 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;
}

    效果为：
    在这里插入图片描述

  • 往大盒子 div 里面添加小盒子 span

    代码修改处为：

    <div class="tab">
    <!-- ========将每个选项用span包裹起来，才能进行单独的样式设置 -->
    <span>备孕期间 </span>
    <span>怀孕 </span>
    <span>0-1岁 </span>
    <span>1-2岁 </span>
    <span>2-3岁</span>
</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;
}

    前后效果比对：
    在这里插入图片描述
    在这里插入图片描述

  • 消除转换为行内块元素后，相邻 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;
}

    效果前后比对：
    在这里插入图片描述
    在这里插入图片描述

  • 让所有 span 在 div 中居中显示

    代码修改处为：

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

    效果前后比对：
    在这里插入图片描述

    在这里插入图片描述

  • 调整上下的间距

    代码修改处为：

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

    效果前后比对：
    在这里插入图片描述
    在这里插入图片描述

  • 添加文本前的图标

    代码修改处为：

    <!-- 将每个选项用span包裹起来，才能进行单独的样式设置 -->
<!-- ========添加i标签用于存放图标 -->
<span><i class="icon1"></i>备孕期间 </span>
<span><i class="icon2"></i>怀孕 </span>
<span><i class="icon3"></i>0-1岁 </span>
<span><i class="icon4"></i>1-2岁 </span>
<span><i class="icon5"></i>2-3岁</span>

    /* ======== */
.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;
}
/* ======== */

    前后效果比对：
    在这里插入图片描述
    在这里插入图片描述

  • 设置点击文本时背景颜色变化的效果

    代码修改处为：

    <!-- 将每个选项用span包裹起来，才能进行单独的样式设置 -->
<!-- 添加i标签用于存放图标 -->
<!-- ========添加class="current" -->
<span class="current"><i class="icon1"></i>备孕期间 </span>
<span><i class="icon2"></i>怀孕 </span>
<span><i class="icon3"></i>0-1岁 </span>
<span><i class="icon4"></i>1-2岁 </span>
<span><i class="icon5"></i>2-3岁</span>

    /* ========鼠标点击的效果需要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;
}

    前后效果比对：
    在这里插入图片描述
    在这里插入图片描述

  • 给 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;
}

    前后效果比对：
    在这里插入图片描述
    在这里插入图片描述

  • 取消边框线

    代码修改处为：

    .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;
}

    前后效果比对：
    在这里插入图片描述
    在这里插入图片描述

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

五、源码分享

<!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">
        <!-- 将每个选项用span包裹起来，才能进行单独的样式设置 -->
        <!-- 添加i标签用于存放图标 -->
        <span class="current"><i class="icon1"></i>备孕期间 </span>
        <span><i class="icon2"></i>怀孕 </span>
        <span><i class="icon3"></i>0-1岁 </span>
        <span><i class="icon4"></i>1-2岁 </span>
        <span><i class="icon5"></i>2-3岁</span>
    </div>

    <div class="tab">
        <!-- 将每个选项用span包裹起来，才能进行单独的样式设置 -->
        <!-- 添加i标签用于存放图标 -->
        <span><i class="icon1"></i>备孕期间 </span>
        <span class="current"><i class="icon2"></i>怀孕 </span>
        <span><i class="icon3"></i>0-1岁 </span>
        <span><i class="icon4"></i>1-2岁 </span>
        <span><i class="icon5"></i>2-3岁</span>
    </div>
</body>

</html>

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

程序喵正在路上
关注
第5章第4节：如何给动画添加播放结束后隐藏的功能 [PowerPoint精美幻灯片实战教程]
互动教程网[www.hdjc8.com]
01-02 737
您将在本节通过动画的选项设置，给动画添加播放结束后隐藏的功能。首先选择需要添加动画效果的对象。
【前端基础小案例】HTML+CSS打造精美选项卡菜单效果_选项卡效果html代码
2401_84181731的博客
04-30 653
* 转换为行内块元素,让高度的设置可以生效，但是span之间会产生间隙 *//* ========鼠标点击的效果需要js实现，这里我们只写交互的原理 *//* 转换为行内块元素,让高度的设置可以生效，但是span之间会产生间隙 *//* 转换为行内块元素,让高度的设置可以生效，但是span之间会产生间隙 *//* =========同时需要再单独给span设置字体大小 */========添加class="current"/* =========给div添加文本居中 */
前端小案例——选项卡（HTML+CSS+JS, 附源码）
前端小白一枚
01-24 2317
切换选项卡内容：点击不同的选项卡按钮时，会隐藏之前显示的选项卡内容，并显示当前点击按钮对应的选项卡内容。
HTML 实现炫酷选项卡效果
最新发布
qq_69304031的博客
09-02 857
在前端开发中，创造出吸引人的交互效果能够极大地提升用户体验。今天，我将分享一段使用 HTML 和 CSS 实现的炫酷选项卡代码，并详细介绍其实现过程。
运用html+css制作选项卡
weixin_65789931的博客
07-18 1200
运用html+css制作选项卡
HTML Tab选项卡
热门推荐
黑码哥的技术博客
07-26 3万+
HTML Tab选项卡 选项卡 公告 规则 完美 功劳
HTML tab菜单选项
issac_xiao的专栏
11-10 1364
我们的目标是要做这个一个tab菜单选项，如图：             讲解的步骤如下：    1.分解图形，我们最先可能不需要完成这么复杂的图片效果，只需要达到如下功能即可：      这部分比较好设计，大概是由两个div组成，每个div内都是无序列表，大体HTML结构如下：       Home Web Dev Web Design Map 1.
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6555
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
2014年辛星web前端教程贺岁版第三本即css常用效果
10-21
本书介绍了包括横向导航条、面包屑导航、选项卡、新闻列表、下拉菜单、滑动门特效以及分页效果制作等经典的CSS设计技巧和效果。 在编写本书时，作者辛星采取了手把手的教学方式，包括基础概念的讲解、详细的步骤...
总结前端常用的网址
weixin_44366185的博客
01-14 9144
Bookmarks Bookmarks 手机收藏 收藏栏 网址大全 百度 百度翻译在线_百度搜索 框架 MUI-最接近原生APP体验的高性能前端框架 SUI Mobile 纯CSS绘制三角形（各种角度）_基础教程_脚...
好看的选项卡样式
08-06
非常好看的选项卡样式，我今天刚封装的！
HTML+CSS实现的滑动门选项卡
11-06
jqury导航栏 jqury特效 HTML+CSS 滑动门 选项卡
一个非常漂亮的网页选项卡
10-08
有时候，为了更合理地利用页面空间资源，我们就要选择有效的选项卡
HTML+CSS竖向图文选项卡
07-10
HTML和CSS实现竖向图文选项卡，简单易懂，你值得拥有！
纯CSS实现选项卡效果
09-04
通过HTML + CSS 实现web前端选项卡效果，写这个的初衷就在于那个亘古不变的道理，能用CSS解决的就不用js
选项卡案例
weixin_43750162的博客
04-05 147
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0; } #div1 div { ...
仿小米商城前端项目实战，用html+css+js打造完美复刻版
资源摘要信息:"本资源为仿小米商城前端网页项目，采用纯原生的HTML、CSS和JavaScript代码实现，目的是复刻小米商城的官网。这个项目非常适合前端初学者作为学习示例，也可以作为学校前端网页课程的结课作业。通过这...
评论 23
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序喵正在路上

你的鼓励是我创作最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值