微信的滑动门技术应该怎么写。

最新推荐文章于 2022-03-11 17:21:37 发布

哎呦灬不错呦。

最新推荐文章于 2022-03-11 17:21:37 发布

阅读量124

点赞数

分类专栏： html5 前端文章标签： html css

本文链接：https://blog.csdn.net/weixin_52583582/article/details/110089864

版权

html5 同时被 2 个专栏收录

37 篇文章 1 订阅

订阅专栏

前端

32 篇文章 0 订阅

订阅专栏

微信滑动门技术（经典）

什么是微信滑动门？特殊背景图技术（特点：背景图颜色单一，对称的，阴影，边框…）

原理：是一张宽度大小固定的图片铺到宽度不确定的盒子里，需要父子关系的两个盒子，内部盒子（子元素span）铺图片的右上角位置(backgrpund-position:100% 0%)，外侧盒子（父元素a）铺图片的左上角位置(backgrpund-position:0% 0%)。
这两个是背景图需要可以下载

在这里插入图片描述

<style>
        * {
            padding: 0;
            margin: 0;
        }
        .container {
            width: 100%;
            height: 800px;
            background: url(./image/3S9sFMD.jpg) repeat-x ;
        }
        .nav {
            width: 100%;
            height: 74px;
        }
        ul {
            list-style: none;
        }
        a {
            text-decoration: none;
            color: #fff;
        }
        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }
        .nav ul {
            padding-left: 200px;
        }
        .nav li {
            float: left;
            margin-top: 18px;
            margin-left: 20px;
        
        }
        .nav li a {
            display: inline-block;
            padding-left: 20px;
            line-height: 33px;
            height: 33px;
        }
        .nav li a span {
            display: inline-block;
            padding-right: 20px;
            line-height: 33px;
            height: 33px;
        }
        .first a {
            background-image: url(./image/lTcb_ve.png);
            background-position: 0% 0%;
        }
        .first a span {
            background-image: url(./image/lTcb_ve.png);
            background-position: 100% 0%;

        }
        .nav li:hover a {
            background-image: url(./image/lTcb_ve.png);
            background-position: 0% 0%;

        }
        .nav li:hover a span {
            background-image: url(./image/lTcb_ve.png);
            background-position: 100% 0%;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="nav">
            <ul class="clearfix">
                <!-- a铺背景图的左侧 bgp:0% 0%  span铺背景图的右侧 bgp:100% 0% -->
               <li class="first"><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>
               <li><a href=""><span>帮助与反</span></a></li>
               <li><a href=""><span>帮助与反馈台</span></a></li>
            </ul>
        </div>
    </div>

哎呦灬不错呦。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
微信的滑动门技术应该怎么写。

微信滑动门技术（经典）什么是微信滑动门？特殊背景图技术（特点：背景图颜色单一，对称的，阴影，边框…）原理：是一张宽度大小固定的图片铺到宽度不确定的盒子里，需要父子关系的两个盒子，内部盒子（子元素span）铺图片的右上角位置(backgrpund-position:100% 0%)，外侧盒子（父元素a）铺图片的左上角位置(backgrpund-position:0% 0%)。这两个是背景图需要可以下载<style> * { padding
复制链接

扫一扫