海阔天空

成品图片

下面来看下我们写的代码

先开始我们写css初始化，*清除所有边距，然后给a标签清除文本样式，再给ul清除黑圆点，之后给每个li标签左浮动上下间距20px，左右15px。其实也可以给a标签加上颜色。

定义顶部样式.top宽度百分百，高90像素，背景图片设置为微信官方的背景图，然后x轴进行水平平铺，然后给下面的a设置背景图，最左侧的，用ps量下，然后用背景定位，背景不平铺，不能给宽度，我们要的就是宽度自适应，所以不能给宽度，只能给左侧内边距，设置了行高就没必要设置高度，高度多少行高就是多少，所以高度没必要设置。然后给a标签左浮动。

a标签包裹着span标签，目的就是鼠标放上去可以点击，现在给span设置样式，背景图跟a标签的背景图一样，就是背景定位不一样，可以用px也可以用单词right，然后y轴的0，背景不平铺，左浮动，右侧内边距20px，目的就是让文本居中，可以自适应撑开盒子。