css-简单滑动门

效果

鼠标滑过的时候，只在左边的时候左边处于半充满状态，在中间的时候处于全充满

                                        

分析：

导航用两个盒子组成：通栏+居中显示的列表项

注意：鼠标滑动的时候背景图片发生改变，但是没有切换图片的功能，我们用a和span标签分别标记左边的半圆图片和右边的，这样hover就可以改变背景了。

这里注意：每个链接的宽度是随文字的个数而改变的，不能固定li的宽。

1.初始化

              

2. a需要定义高度，高度为精灵图的高度，否则他是行内块的高度，a和span是行内元素定义高度需要display 转行内块

3.精灵图测量，将图片1:1显示即可，分别量出距离x轴，y轴的距离

css样式