1.CSS滑动门技术产生的原因

例如：导航栏中，同样的背景，字数不同，背景可以自己适应字数的增加，本质上就是各种形状背景的左右自由拉伸，以适应元素内部的文本内容。

2.CSS精灵技术

精灵技术的本质：CSS精灵技术是用于处理网页背景图像的方式，将所有零星的图片都集中到一张图片上去，然后将图片应用到网页中，这样可以减少服务器的请求。
使用精灵技术的源图叫做精灵图，精灵图通常被使用在背景上，x，y的位置通常都是负数。

.phone {
            width: 15px;
            height: 20px;
            精灵图有一张phone的图片
            background: url(images/jd.png) no-repeat 0 -100px;
        }

2.滑动门的核心技术
CSS滑动门技术核心内容就是使用CSS精灵和padding样式撑开宽度，注意不能够给背景设置宽度或者高度，否则背景的宽度或者高度是固定的，实现不了文本的撑开。
滑动门技在页面的导航部分的应用，其使用步骤：
1.使用a设置背景的左侧，padding撑开背景的宽度
2.使用span设置背景的右侧，padding撑开背景的宽度，填写文字继续撑开
使用a包含span的原因：使得整个背景的可以被点击的 使用padding撑开页面的原因：每个背景下的文本字数是不同的。

a {
            display: inline-block; 将a转换为行内块元素
            height: 33px;
            margin: 20px auto;
            background: url(images/ao.png) no-repeat;
            padding-left: 15px; 使用padding撑开页面
            margin-left: 100px;
            color: #ffffff;
            line-height: 33px;
            text-align: center;
            text-decoration: none;
        }

滑动技术也可以使用的伪元素，在块元素内添加内容。

3.before和after伪元素 在页面元素内部之前和之后添加新内容

伪元素不是真正的页面元素，HTML没有对应的元素，实际上是css样式展现的行为，before和after添加的内容默认是inline元素
before和after两个伪元素的必须设置content属性，否则伪元素不起作用 经常需要转换为块级元素。

 div {
            width: 720px;
            height: 306px;
            margin: 100px auto;
            position: relative; /*子绝父相*/
        }
        div:hover::before { /*鼠标经过之后 插入伪元素*/
            display: block;
            content: "";
            width: 100%;
            height: 100%;
            border: 5px solid red;
            position: absolute;
            top: 0;
            left: 0;
            box-sizing: border-box; /*将border不算到width里面*/
        }

今天的文章CSS学习笔记——滑动门技术分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。