CSS 滑动门案例

一、什么是滑动门特效　　

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

二、核心技术

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

　　核心代码：

<li>
  <a href="#">
    <span>导航栏内容</span>
  </a>
</li>

　　　总结：

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

三、案例

　　　使用的背景图片：

　　　HTML 结构：

 1 <div class="nav">
 2 　　<ul>
 3 　　　　<li>
 4          <a href="#">
 5          　　<span>首页</span>
 6          </a>
 7        </li>
 8        <li>
 9        　　<a href="#">
10           　　<span>帮助与反馈</span>
11            </a>
12         </li>
13         <li>
14         　　<a href="#">
15              <span>公众平台</span>
16           　</a>
17         </li>
18         <li>
19            <a href="#">
20              <span>帮助与反馈</span>
21            </a>
22         </li>
23         <li>
24             <a href="#">
25                <span>帮助与反馈</span>
26             </a>
27          </li>
28 　　</ul>
29 </div>

　　　　CSS 样式：

 1 　　.nav {
 2         height: 75px;
 3     }
 4     .nav li {
 5         float: left;
 6         margin: 0 10px;
 7         padding-top: 21px;
 8     }
 9     .nav li a {
10         display: block;
11         background: url(images/to.png) no-repeat;
12         color: #fff;
13         font-size: 14px;
14         line-height: 33px;
15         padding-left: 15px;            /* 核心代码，使用padding-left 撑开，用背景图填充 切记：千位不能给 a 宽度 */
16         text-decoration: none;
17     }
18     .nav li a span {
19         display: block;
20         line-height: 33px;
21         background: url(images/to.png) no-repeat right center;
22         padding-right: 15px;
23     }