CSS微信滑动门，奇技淫巧

最新推荐文章于 2024-08-05 14:55:17 发布

zteenmozart

最新推荐文章于 2024-08-05 14:55:17 发布

阅读量1.1k

点赞数

分类专栏： HTML和CSS

本文链接：https://blog.csdn.net/zteenmozart/article/details/80584297

版权

HTML和CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

微信滑动门---有点意思哦

可以看到微信官网的导航，每一个标题的背景是一张图片，有意思的是，虽然这些文字的字数并不一样，按照传统思维，这就意味着要截8张长度不同的图片，然鹅。。。。微信并不是这样做的，他们只用了一张图片，如下所示：

没错就是这么长的一张图片，很巧妙的！

他的做法是：用一个a标签包括一个span标签，将a标签的背景图片设置为左对齐，对a中的span标签的背景图片设置为右对齐

我写了一遍，直接上代码！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span, a {
            display: inline-block;
            color: white;
            height: 33px;
            line-height: 33px;
            padding-left: 16px;
            background: url("images/bgc.png") no-repeat;
        }
        span {
            background: url("images/bgc.png") no-repeat right;
            padding-right :16px;
            padding-left: 0px;
        }
        body {
            background-color: #000;
        }
    </style>
</head>
<body>
<a><span>ZTEEN MOZART</span></a>
<a><span>言必信</span></a>
</body>
</html>

最终实现效果，文字不同仍然可以首尾---呼应