微信滑动门原理：HTML+CSS实现图文并排布局-CSDN博客

本文链接：https://blog.csdn.net/qq_43687594/article/details/123429850

微信滑动门原理:

给li嵌套a和span标签
给a和span转换元素类型为行内块标签
给a和span设置固定高度，该高度等于小括号的高度
给a添加左边小括号，并设置一个paddin-left:12px；这个值是小括号的宽度，就是为了让图片可以放在这个区域内
同理，右边小括号添加给span标签，并且给span设置padding-right:12px;因为一个标签只能添加一个背景图，所以左右两个小括号分别添加给a和span
实际内容写在span标签内
之所以给a和span都添加的是padding值，而不是给一个固定宽度，是因为span中要写内容，内容长度不定，padding值可以撑大盒子，如果是固定宽度的话就不能实现撑开的效果了

给span添加line-height等于高度，使文本垂直居中。水平居中不需要写是因为内容占据了宽度

    总结：
             span的占位由内容和padding-right组成
              a的占位由span的占位和a的padding-left组成

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .list{
            width: 328px;
            height: 33px;
            padding: 5px;
            border: 1px solid rgb(116, 63, 63);
            margin: 50px auto;
        }
        ul li{
            /* width: 50px;
            height: 50px; */
            float: left;
            margin-right: 10px;
        }
       
        a{
            display: inline-block;
            padding-left: 12px;
            height: 33px;
            background: url(./img/wx.png);
        }
        span{
            display: inline-block;
            padding-right: 12px;
            height: 33px;
            background: url(./img/wx.png) right top;
            line-height: 33px;
            color: #fff;
        }
    </style>
</head>
<body>
    <ul class="list">
        <li>
            <a href="#">
                <span>首页</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span>微信平台</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span>产品介绍</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span>联系</span>
            </a>
        </li>
    </ul>
</body>
</html>

微信滑动门导航效果