滑动门

滑动门

滑动门也可以叫推拉门

滑动门出现的背景

制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样，咋办？

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

核心技术

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

一般的经典布局是这样的：

代码语言：javascript复制

<li>
    <a href="#">
            <span>首页</span>
   </a>
</li>

代码语言：javascript复制

* {
        margin: 0;
        padding: 0;
    }
    a {
        margin: 100px;
        display: inline-block;
        height: 33px;
        /* 千万不能给宽度 写死宽度是不对滴，我们要推拉门 自由缩放*/
        background: url(images/ao.png) no-repeat;
        padding-left: 15px;
        color: #fff;
        text-decoration: none;
        line-height: 33px;
    }
    a span {
        display: inline-block;
        height: 33px;
        background: url(images/ao.png) no-repeat right; 
        /* span 不能给宽度 利用padding挤开  要我要span 右边的圆角  所以 背景位置 右对齐 */
        padding-right: 15px;
    }

总结：

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

css padding

0 人点赞