滑动门技术

制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景。

比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？

1338189-20181004145917176-1860762081.jpg

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

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

  导航栏内容

技术实现：（只用a标签和span标签便可实现这个效果）

1、首先我们要准备一张背景图，背景图的大小也决定了里面能容纳多少个字数

to.png

2、给a标签设置背景图,因为背景图有高度，所以我们需要给a标签设置成行内块元素（a标签是行内元素）,再设置a标签的高度。
a标签不设置宽度，因为里面有span标签，他需要随span标签的大小而变化，因为不设置宽度，所以需要给a标签设置padding-left（比如这里padding-left:15px），让它可以显示图片的左边!

image.png

image.png

3、剩下的部分由我们的span来完成啦，首先span标签也要设置成行内块元素，然后设置padding-right（比如这里padding-right:15px）的值和高度的值，记得span的背景图片需要定位到右边（background-position:right top）

image.png

然后往span里写内容，是不是很666啊

image.png

总结：

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