滑动门
效果
鼠标滑过的时候,只在左边的时候左边处于半充满状态,在中间的时候处于全充满
分析:
导航用两个盒子组成:通栏+居中显示的列表项
注意:鼠标滑动的时候背景图片发生改变,但是没有切换图片的功能,我们用a和span标签分别标记左边的半圆图片和右边的,这样hover就可以改变背景了。
这里注意:每个链接的宽度是随文字的个数而改变的,不能固定li的宽。
1.初始化
2. a需要定义高度,高度为精灵图的高度,否则他是行内块的高度,a和span是行内元素定义高度需要display 转行内块
3.精灵图测量,将图片1:1显示即可,分别量出距离x轴,y轴的距离
css样式