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

    🔥一个人走得远了，就会忘记自己为了什么而出发，希望你可以不忘初心，不要随波逐流，一直走下去🎶
    🦋 欢迎关注🖱点赞👍收藏🌟留言🐾
    🦄 本文由 程序喵正在路上 原创，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>

      • 1
      /* 消除所有盒子内外边距 */
* {
    margin: 0;
    padding: 0;
}

.tab {
    width: 800px;
    height: 50px;
    /* 添加背景颜色便于观察 */
    background-color: #FE94A9;
    /* 添加圆角边框 */
    border-radius: 50px;
    /* 让盒子水平居中 */
    margin: 50px auto 0px;
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16

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

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

      代码修改处为：

      <div class="tab">
    
    <span>备孕期间 span>
    <span>怀孕 span>
    <span>0-1岁 span>
    <span>1-2岁 span>
    <span>2-3岁span>
div>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      .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;
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20

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

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

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24

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

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

      代码修改处为：

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

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13

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

      在这里插入图片描述

    • 调整上下的间距

      代码修改处为：

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

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15

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

    • 添加文本前的图标

      代码修改处为：

      

<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>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      /* ======== */
.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;
}
/* ======== */

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30

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

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

      代码修改处为：

      


<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>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      /* ========鼠标点击的效果需要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;
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25

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

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

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13

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

    • 取消边框线

      代码修改处为：

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

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25

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

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

    五、源码分享

    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 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 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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124

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

  • 相关阅读:
    java学习day51（AdminLTE）AdminLTE快速入门与应用
    关于ORM框架多表增删改查
    iptables详解：链、表、表链关系、规则的基本使用
    Android LiveData 介绍
    GrapeCity Documents for Excel：GcExcel 5.1.0
    「Verilog学习笔记」使用generate…for语句简化代码
    维护积极的react native，为什么会有人造谣react native不维护了，停止维护。
    手机厂商参与“百模大战”，vivo发布蓝心大模型
    nginx简介
    ES6--Promise
  • 原文地址：https://blog.csdn.net/weixin_62511863/article/details/126422754