2007-08-29

《精通CSS》读书笔记（六）

续上篇。

第5章

关于列表，首先，由于list-style-image的位置各个浏览器实现的不一致，而且缩进使用padding或margin的不一致，所以本书后面的例子几乎完全抛弃了list-style，将padding和margin一律重置为0，然后从头重新定义。

BTW，关于列表缩进应该使用padding或者margin？我倾向于padding。理由另文撰述。

关于导航条，本书的例子有一个问题，就是需要对第一个li元素专设样式。对于支持CSS21的浏览器来说，使用一个first-child伪类即可，但是对于IE，需要额外的一个first类。有一些解决的方法，我之前也讨论过这个话题。

配合页面ID，可以设定页面特定的样式，例如本书中给出的在导航条中突出显示当前页面的例子。这是一个很有意思的技巧，沿着这个思路也可以有很多变化。

关于滑动门tab式导航，见上一篇关于sliding door的总结。幸运的是，在列表导航中，正好有li和a两层元素可供应用sliding door技巧。此外可以做一个简单的位移变形来支持边缘透明的tab。

关于图像映射，开始一段的译文有些歧义。我想作者是在说map和area，然后给出的是用CSS取代map的方法。我并不完全赞同作者关于map是将表现方式与内容混在一起的说法。在5.7远距离翻转的示例代码中，带有hotspot class的空span扮演的角色和area元素有何不同呢？实际上，map元素是有导航的语义的。xhtml2中新增的nl元素，就可以认为是map和ul的合体，在xhtml2中usemap所指向的也从map元素变成了nl元素。实际上，img等元素上的usemap属性提供了一种将对象（图像）与导航连接在一起的语义。

一个map的例子： 
<img id="fu-image" src="fu.gif" alt="Bei Jing Huan Ying Ni" usemap="#fu-map" />
<map name="fu-map">
	<area href="#beibei" alt="BeiBei" shape="circle" coords="25,43,20" />
	<area href="#jingjing" alt="JingJing" shape="circle" coords="62,46,18" />
	<area href="#huanhuan" alt="HuanHuan" shape="circle" coords="102,36,24" />
	<area href="#yingying" alt="YingYing" shape="circle" coords="142,45,18" />
	<area href="#nini" alt="NiNi" shape="circle" coords="178,45,18" />
</map>


又一个更语义化的例子（注：FF和Opera支持object上usemap，IE和Safari不支持object上usemap）： 
<object id="fu-nav" data="fu1.gif" type="image/gif" usemap="#fu-nav-map">
	<map name="fu-nav-map">
		<h2>Bei Jing Huan Ying Ni</h2>
		<ul>
			<li><a href="#beibei" tabindex="1" shape="circle" coords="25,43,20">BeiBei</a></li>
			<li><a href="#jingjing" tabindex="2" shape="circle" coords="62,46,18">JingJing</a></li>
			<li><a href="#huanhuan" tabindex="3" shape="circle" coords="102,36,24">HuanHuan</a></li>
			<li><a href="#yingying" tabindex="4" shape="circle" coords="142,45,18">YingYing</a></li>
			<li><a href="#nini" tabindex="5" shape="circle" coords="178,45,18">NiNi</a></li>
		</ul>
	</map>
</object>


使用CSS做的图像映射，实际上与第二个例子相当接近，区别在于CSS无法作出圆形和多边形的点击区域。

当然作者的例子所展示的CSS设计的整个过程是很棒的。

待续...
  • 958b3255-ec12-4ccb-8609-e7d5da3a4e66-thumb
  • 描述: 本文代码中所用的图片
  • 大小: 6 KB
评论
发表评论

提醒: 该博客已发表在公共论坛，博客所有留言会成为论坛回贴，留言请注意遵守论坛发贴规则

您还没有登录，请登录后发表评论

hax
搜索本博客
存档
最新评论