位置：首页>> 网络编程>> 网页设计>> [翻译]标记语言和样式手册 Chapter 14 图片替换（10）

[翻译]标记语言和样式手册 Chapter 14 图片替换（10）

作者：zhaozy　来源：3user.com　发布时间：2008-02-18 12:56:00　

标签：样式,图片,标记,css,手册

为什么要用它?

但是等等,文字不会变化大小!

遵照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的拥护者也高兴了.

结论

现在你已经跟上图片替换技术的最新发展了,虽然还没有完美的解决方案,我仍希望你已准备好相关知识,这些原则十分重要,值得理解,实验一番.

除此之外,通过示范了两个真实的图片替换技巧使用法,我希望能使你开始前进,而你...对,就是你...会是那个发现下一个最佳做法的人,运气和名望正等着你!

投稿

猜你喜欢