导航--水平圆角图片标签导航

在前面提到的基本的水平导航(点击查看)的基础上,要求每个菜单项顶角是圆角。通过CSS样式设置难以实现,所以我们借助圆角的图片来实现这个效果。我们注意到菜单项有三种不同的颜色,按照常理应该需要三个不同的标签图片来创建菜单。但是如果把标签作为独立的图片,当页面最初加载到用户端浏览器时,不会加载全部的图片,只有当鼠标开始停留和点击导航标签时,图片才会被加载之后才会显示,这样的效果不好。

所以,可以将三种状态组合为一个图片(如下所示),这样,全部三个状态会同时加载,只要通过CSS的“背景—位置”属性来移动背景图片就可以选择所需要的状态。


参考之前为水平菜单创建的样式,为每个链接指定了宽度,因此各个状态的标签图片需要相同宽度。当图片被置于链接背景之中,只会显示能符合定义好的元素宽度和高度的那部分图片,余下部分保持隐藏状态。下面上代码:

1、HTML代码:

2、CSS代码


3、效果图

导航--水平圆角图片标签导航_第1张图片

参考:《The Art & Science of CSS》

你可能感兴趣的:(标签)