综合案例—儿童用品网上商店综述.ppt

4.9 交互效果设计 2.主导航栏 4-21.html。 主导航栏的做法和次导航栏一样，首先准备一个和原背景图像的形状相同，只是修改了颜色的新图像，如图： 然后为链接元素增加“:hover”的伪类别，在其中更换背景图像； 注意也要更换“a:hover”包含的span元素的背景图像，此外适当修改文字的颜色： 4.9 交互效果设计 3.账号区 4-22.html。 （1）“登录账号”和“购物车”图像的鼠标经过效果，实际上可以用更换背景图像技术； （2）但当访问者浏览页面时，各个图片下载有先有后，如果网络速度慢，当鼠标指针经过某个链接的时候，会出现短暂的停顿，等图像下载完毕后才会出现，影响访问者体验； （3）改进方案：使用下面的图片，把两个图像合并在一起，然后当鼠标指针经过时，通过对背景图像的位置的改变实现最终的效果； 4.9 交互效果设计 3.账号区 4-22.html。 （1）实现代码如下： （2）代码关键之处是后面的bottom，表示从底部开始显示，而在默认情况下是从top开始显示的，这样就可以实现所需要的效果了。 4.9 交互效果设计 4.图像边框 4-23.html。 （1）接下来实现当鼠标指针经过某个展示的图像时，边框发生变化的效果 （2）当鼠标指针经过图像时，边