制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景。
1338189-20181004145917176-1860762081.jpg
- 核心技术：
就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。
一般的经典布局都是这样的：
<li>
<a href="#">
<span>导航栏内容</span>
</a>
</li>
技术实现：（只用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
总结：
- a 设置 背景左侧，padding撑开合适宽度。
- span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。
- 之所以a包含span就是因为 整个导航都是可以点击的。
