续
上篇。
第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设计的整个过程是很棒的。
待续...
- 描述: 本文代码中所用的图片
- 大小: 6 KB
分享到:
相关推荐
精通CSS精通CSS精通CSS精通CSS精通CSS
CSS学习笔记CSS学习笔记CSS学习笔记CSS学习笔记
精通CSS滤镜,精通CSS滤镜,精通CSS滤镜
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
精通CSS.pdf 精通CSS.pdf精通CSS.pdf 精通CSS.pdf精通CSS.pdf精通CSS.pdf
学习HTML和CSS的笔记学习HTML和CSS的笔记学习HTML和CSS的笔记 学习HTML和CSS的笔记学习HTML和CSS的笔记学习HTML和CSS的笔记 学习HTML和CSS的笔记学习HTML和CSS的笔记学习HTML和CSS的笔记 学习HTML和CSS的笔记学习...
由于本书压缩质量比较好,所以格式比较大,40MB多,我分了6段压缩大家可以按 精通CSS(css mastery)中文版 part1 精通CSS(css mastery)中文版 part2 精通CSS(css mastery)中文版 part3 精通CSS(css ...
经典,精通CSS源代码。 《精通CSS·高级Web标准解决方案》将最有用的CSS技术汇总在一起,还总结了CSS设计中的最佳实践,讨论了解决各种实际问题的技术,填补了一直以来CSS图书的空白。正因如此,英文版出版后,一时...
由于本书压缩质量比较好,所以格式比较大,40MB多,我分了6段压缩大家可以按 精通CSS(css mastery)中文版 part1 精通CSS(css mastery)中文版 part2 精通CSS(css mastery)中文版 part3 精通CSS(css ...
这个笔记是在学习精通CSS时写下的,由于要写js,所以对CSS的要求就非常高,希望有帮助。
精通CSS:高级Web标准解决方案.pdf
css的笔记 学习html&css的笔记学习html&css的笔记学习html&css的笔记 学习html&css的笔记学习html&css的笔记学习html&css的笔记 学习html&css的笔记学习html&css的笔记学习html&...
资源名称:5日精通CSS层叠样式表内容简介:每天任务量详尽,按本教程,包你5天精通CSS5日精通CSS层叠样式表第1日·1.1 第1日 ·1.2 样式表能为我们做什么?·1.5 分类及其它技巧·1.6 串接·1.7 关于浏览器的坏消息 ...
个人css学习笔记 精华版 个人css学习笔记 精华版
精通CSS高级Web标准解决方案 PDF
作为html 和css 学习笔记 和 复习大纲
CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 Head...
精通CSS 书籍中的示例源代码 精通CSS 书籍中的示例源代码 精通CSS 书籍中的示例源代码
CSS 学习笔记 Head First HTML&CSS 学习笔记Head First HTML&CSS 学习笔记 Head First HTML&CSS 学习笔记Head First HTML&CSS 学习笔记 Head First HTML&CSS 学习笔记Head First HTML&CSS ...