滑动门

滑动门

滑动门也可以叫推拉门

滑动门出现的背景

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

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

核心技术

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

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

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

* {
        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就是因为整个导航栏都是可以点击的。