CSS中为什么会出现滑动门技术，它具体应用在哪里？

最新推荐文章于 2024-05-21 20:57:05 发布

奶盖不加糖

最新推荐文章于 2024-05-21 20:57:05 发布

阅读量141

点赞数

文章标签： html html5 css3 css

本文链接：https://blog.csdn.net/qq_44156869/article/details/113917685

版权

CSS 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

滑动门

为什么会出现滑动门？

为了便各种特殊形状的背景能够适应元素文本内容的多少，出现了CSS滑动门的技术。
它从新角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。最常见于各种导航栏的滑动门。

核心技术就是利用CSS精灵（主要是背景位置）和盒子padding 撑开宽度，以便适应不同数字的导航栏。

一般经典布局都是这样的：
在这里插入图片描述案例：

<head>
    <style>
        /*1.a 是 设置 左侧  背景 (左门)*/
        a {
            /*4.因为我们是滑动门，左右推拉，跟文字内容多少有关系，此时需要用文字撑开盒子，就要用到行内块*/
            display: inline-block;
            /*高*/
            height: 33px;
            /*背景图，不平铺*/
            background: url(images/to.png) no-repeat;
            /*外边距30px*/
            margin: 30px;
            /*左内边距15px*/
            padding-left: 15px;
            /*让文字居中，行高等于盒子的高度*/
            line-height: 33px;
            /*文字颜色：白色*/
            color: #fff;
        }
        /*2.span 是设置 右侧 背景 （右门）*/
        a span {
            display: inline-block;
            height: 33px;
            /*一定注意 span 需要背景图片右对齐*/
            background: url(images/to.png) no-repeat right top;
            padding-right: 15px;
           
        }
       
    </style>
</head>
<body>
    <!-- 3.因为整个导航栏都是连接，所以 a 要包含 span -->
    <a href="#">
        <span>首页</span>
    </a>
    <a href="#">
        <span>奶盖想睡了</span>
    </a>
</body>

在这里插入图片描述
小提示：
做这个案例的时候，发现当第二张背景图出现的时候，链接a中的文字没有了下划线，但是我没有写text-decoration: none
原因：因为a是父亲，span是儿子，span设置背景相对于父亲进行覆盖，所以链接a中的下划线被覆盖了。

总结：

1. a 设置背景左侧，padding 撑开适合宽度。
2. span 设置右侧，padding撑开适合宽度，剩下由文字继续撑开宽度。
3. 之所以a 包含span就是因为整个导航栏都是可以点击的。

仿微信导航栏案例：

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        body {
            background: url(images/wx.png) repeat-x;
        }
        .nav {

            margin-top: 23px;
            
        }
        .nav a {
            display: inline-block;
            height: 33px;
            background: url(images/to.png) no-repeat;
            padding-left: 15px;
            color: #fff;
            line-height: 33px;
            font-size: 14px;
        }
        .nav li {
            float: left;
            margin: 0 5px;
        }
        .nav a span {
            display: inline-block;
            height: 33px;
            background: url(images/to.png) no-repeat right;
            padding-right: 15px;
        }
        /*鼠标经过了a 链接首先换背景图片 ，然后 链接里面的span 也要换*/
        /* .nav a:hover {
            background-image: url(images/ao.png);
        }
        .nav a:hover span {
            background-image: url(images/ao.png);
        } */

        .nav a:hover,
        .nav a:hover span {
            background-image: url(images/ao.png);
        }


    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <ul>
                <li><a href="#"><span>首页</span></a></li>
            </ul>
        </ul>
        <ul>
            <ul>
                <li><a href="#"><span>帮助与反馈</span></a></li>
            </ul>
        </ul>
        <ul>
            <ul>
                <li><a href="#"><span>公众平台</span></a></li>
            </ul>
        </ul>
        <ul>
            <ul>
                <li><a href="#"><span>开放平台</span></a></li>
            </ul>
        </ul>
    </div>
</body>
</html>

在这里插入图片描述

奶盖不加糖

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS中为什么会出现滑动门技术，它具体应用在哪里？

滑动门为了便各种特殊形状的背景能够适应元素文本内容的多少，出现了CSS滑动门的技术。它从新角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。最常见于各种导航栏的滑动门。核心技术核心技术就是利用CSS精灵（主要是背景位置）和盒子padding 撑开宽度，以便适应不同数字的导航栏。一般经典布局都是这样的：...
复制链接

扫一扫