CSS 滑动门技术

制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉。

然而，问题在于：里面的字数不一样。

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

基本原理

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

// 一般的经典代码为：

<li>
   <a>
      <span>导航栏内容</span>
   </a>
</li>

a 设置背景左侧，padding 撑开合适宽度；

span 设置背景右侧，padding 撑开合适宽度，剩下由文字继续撑开宽度；

之所以a包含span就是因为整个导航都是可以点击的，同时是它们是不能有固定宽度的。

背景图 ao.png

背景图 to.png.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>滑动门技术</title>
    <style>
        .nav{
            /*background: url(images/wx.png) repeat-x;*/
            width: 100%;
            height: 33px;
            overflow: hidden;
        }
        .nav li{
            list-style: none;       
            float: left;
        }
        .nav li a{
            display: inline-block;
            height: 33px;
            background: url(images/to.png) no-repeat;
            text-decoration: none;
            color: #fff;
            font-size: 700;
            padding-left: 15px;
            line-height: 33px;
        }
        .nav li a span{
            display: inline-block;
            height: 33px;
            background: url(images/to.png) no-repeat right;
            padding-right: 15px;
        }
        .nav a:hover , .nav a:hover span{
            background-image: url(images/ao.png);
            /* 只写一个background-image的目的就是当鼠标附上去时只改变图片
            ，以前图片的样式是不会改变的 */
            /* 这个鼠标附上时会把前边的全部层叠掉，所以还是得添加no-repeat */
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li><a href="#"><span>首页</span></a></li>
        <li><a href="#"><span>导航说明</span></a></li>
        <li><a href="#"><span>菜单栏</span></a></li>
    </ul>
</body>
</html>