|
CSS内容:这是被施了魔法的地方
首先将设定所有导航项目共享的规则,如此就不必为每个标签重复相同的规则.接着为每个清单项目id分别加上独立规则,为<li>指定专属的background-image与width,每个标签只有这两个属性不一样.
CSS内容大致如下:
#nav {
margin: 0;
padding: 0;
height: 20px;
list-style: none;
display: inline;
overflow: hidden;
}
#nav li {
margin: 0;
padding: 0;
list-style: none;
display: inline;
}
#nav a {
float: left;
padding: 20px 0 0 0;
overflow: hidden;
height: 0px !important;
height /**/:20px; /* for IE5/Win only */
}
#nav a:hover {
background-position: 0 -20px;
}
#nav a:active, #nav a.selected {
background-position: 0 -40px;
}
前面这段CSS会把清单样式与内补丁去掉,把清单转成水平,同时隐藏超链接里的文字.留意:hover与:active规则.这在每个#nav内的<a>都通用,不必为每一个项目分别重复这些规则.
接着为我想持续突出显示标签指定"selected"类,提示读者目前在网站内的位置.这些规则与:active状态共用.
你或许也会注意到我们重复为#nav和#nav li指定了list-style:none;与display:inline;规则这是为了讨IE5 for Windows欢心,在完美的世界里,只要为#nav指定一次这些规则就够了,当然这不是现状.
接着,再为每个id加上规则,指定background-image和width,以下是一个实例:
#thome a {
width: 40px;
background: url(home.gif) top left no-repeat;
}
当然,每个标签都有一段类似的声明.
成果
图14-13显示了标签在普通状态,鼠标滑过状态,选定状态下效果.如果你想看它实际运作的效果,可以看看SimleBits上面的示例于源代码(http://www.simplebits.com/bits/tab_rollovers.html).
图14-13 标签导航效果,示范三种不同状态.
为什么要用它?
-
它非常轻量,标记源代码里不过是个无序清单.
-
它易于使用: 利用Stuart的方法,我们确信屏幕阅读器能够念出文字链接.
-
不用JavaScript:不要预先载入图片,或是为每个状态分别制作图片.也不需要额外的JavaScript控制鼠标滑过效果.谢拉!Pixy兄.
-
它很美观:把文字放到指定的位置颇需技巧,这让我们可以直接使用漂亮的图片.
但是等等,文字不会变化大小!
遵照Douglas Bowman的好建议,同时回应易读性问题,无法调整图片大小问题,我更进一步制作了第二组文字放大的标签图片.然后我就能在现存的medium和large替换样式表里面覆盖这些规则.我用Paul Sowden的样式表切换器启用替换样式表,先前在第十章"技巧延伸"中提到过.
覆盖的样式规则与先前的代码几乎相同,只修改了图片位置,宽度:
#thome a {
width: 46px;
background: url(guides_lg.gif) top left no-repeat;
}
图14-14显示了Fast Company网站上放大过后的标签效果,你能发现水平距离变窄了,而垂直大小与原始标签一样.但是,加上了放大文字,标签图片大小的功能之后,我们不仅帮助了视力不佳的使用者,同时仍然遵守现有的设计细节.
图14-14 用替换样式表放大图标图片的导航条
兼容性
这个方法经过测过,应该同时能在所有5.0版之后的浏览器上正常运作.
针对Fast Company的网站,我选择用position:absolute指定#nav的位置,以便完美对齐所有元素,让标题区域的背景色彩显示出来.这个方法效果十分完美,除了Opera7 for Windows以外,它需要为绝对定位元素指定宽度.
这没什么问题;只要为#nav指定所有图片的宽度总和就好了:
#nav {
margin: 0;
padding: 0;
height: 20px;
list-style: none;
display: inline;
overflow: hidden;
width: 201px;
}
这下我们能够睡个好觉了,Opera的拥护者也高兴了.
结论
现在你已经跟上图片替换技术的最新发展了,虽然还没有完美的解决方案,我仍希望你已准备好相关知识,这些原则十分重要,值得理解,实验一番.
除此之外,通过示范了两个真实的图片替换技巧使用法,我希望能使你开始前进,而你...对,就是你...会是那个发现下一个最佳做法的人,运气和名望正等着你!
经典论坛交流：
http://bbs.blueidea.com/thread-2824504-1-1.html
下文：Chapter 15 为<body>指定样式
本文链接：http://www.blueidea.com/tech/web/2008/6115.asp 
出处：蓝色理想
责任编辑：bluehearts
上一页 标记语言——图片替换 [7] 下一页
◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。
|
第 1 页 
第 8 页 标记语言——图片替换 [8]
