必威体育Betway必威体育官网
当前位置:首页 > IT技术

css-简单滑动门

时间:2019-08-06 06:13:11来源:IT技术作者:seo实验室小编阅读:87次「手机版」
 

滑动门

效果

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

                                        

分析:

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

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

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

1.初始化

              

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

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

css样式

                 

            

相关阅读

分享到:

栏目导航

推荐阅读

热门阅读