CSS 滑动门案例

一、什么是滑动门特效　　

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

二、核心技术

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

　　核心代码：

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

　　　总结：

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

三、案例

　　　使用的背景图片：

　　

　　　HTML 结构：

<div class="nav">
　　<ul>
　　　　<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>

 　　　　CSS 样式：

　　.nav {
        height: 75px;
    }
    .nav li {
        float: left;
        margin: 0 10px;
        padding-top: 21px;
    }
    .nav li a {
        display: block;
        background: url(images/to.png) no-repeat;
        color: #fff;
        font-size: 14px;
        line-height: 33px;
        padding-left: 15px;            /* 核心代码，使用padding-left 撑开，用背景图填充 切记：千位不能给 a 宽度 */
        text-decoration: none;
    }
    .nav li a span {
        display: block;
        line-height: 33px;
        background: url(images/to.png) no-repeat right center;
        padding-right: 15px;
    }