`
hax
  • 浏览: 962569 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

《精通CSS》读书笔记(六)

    博客分类:
  • 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设计的整个过程是很棒的。

待续...
  • 描述: 本文代码中所用的图片
  • 大小: 6 KB
分享到:
评论

相关推荐

    PHP从入门到精通完整笔记

    这份笔记包含了从基础概念到高级技术的详细讲解,涵盖了HTML+CSS笔记和PHP课程两大部分,共计149讲,为学习者提供了一个扎实的起点。 在PHP的入门阶段,首先会介绍PHP的基础知识,包括PHP的安装和配置环境,如何...

    《HTML5 CSS3 JavaScript从入门到精通微课》读书笔记模板.pptx

    《HTML5 CSS3 JavaScript从入门到精通微课》读书笔记模板.pptx

    PHP从入门到精通_html+CSS笔记.rar_8V4_PHP从入门到精通 学习文档_php 学习

    【PHP从入门到精通_html+CSS笔记.rar_8V4_PHP从入门到精通 学习文档_php 学习】 这份压缩包文件包含了两份重要的学习资料,旨在帮助初学者掌握PHP编程语言及其与HTML和CSS的结合应用。PHP是一种广泛使用的服务器端...

    HTML5+CSS3从入门到精通.zip

    HTML5和CSS3是现代网页开发的基石,它们极大地提升了网页设计的灵活性和表现力。在JavaWeb前端开发中,熟练掌握这两项技术...通过阅读"HTML5+CSS3从入门到精通1.pdf"这份文档,你可以系统地学习并掌握这些关键知识点。

    《跟我学SEO从入门到精通-张新星》精华读书笔记第十一章

    ### 《跟我学SEO从入门到精通-张新星》精华读书笔记第十一章 #### 11.2 做网站的准备工作和建设内容 - **选择熟悉领域**:选择自己熟悉的行业来创建网站,这有助于更好地理解目标受众的需求,并能够提供更高质量的...

    读书笔记: JavaWeb从入门到精通 第13章: Ajax 技术

    在本篇【读书笔记: JavaWeb从入门到精通 第13章: Ajax 技术】中,我们将深入探讨Ajax(Asynchronous JavaScript and XML)技术,它是现代Web开发中不可或缺的一部分,用于实现页面的异步更新,提升用户体验。...

    ajax从入门到精通视频

    ### AJAX从入门到精通知识点详解 #### 一、AJAX概述 - **定义**:Asynchronous JavaScript and XML(异步JavaScript与XML),是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。 - **发展历程**:...

    JavaScript学习笔记

    JavaScript是一种广泛应用于网页和网络应用的脚本语言,它在浏览器端...通过阅读"JavaScript从入门到精通学习笔记.docx"文档和解压"Chapter2.rar",你将深入探索以上各个知识点,逐步成为一名熟练的JavaScript开发者。

    reading-notes:班级读书笔记

    【标题】"reading-notes:班级读书笔记" 涉及的知识点主要集中在软件开发的初级到高级阶段,其中包含了对编程基础知识的理解、软件开发流程的介绍以及可能涉及到的高级技术。这个标题暗示了这是一个关于软件工程学习...

    惊现学习CSS应该注意的方法

    5. **做笔记和提问**:在第二次阅读时,开始做学习笔记,记录重要概念和疑问。如果遇到难题,不要害怕寻求帮助,可以在论坛上发帖提问。学会如何清晰地表达问题也是学习的一部分。 6. **动手实践**:阅读教程的同时...

    章-绪论-网站设计与开发素质课课件(与“学习”有关文档共9张).pptx

    推荐的学习资源包括CSDN、博客园等专业论坛,以及相关的技术书籍,如《精通CSS:高级Web标准解决方案》和《ASP.NET 3.5从入门到精通》等。 课程内容主要包括HTML和HTML5的基础与进阶,XHTML的结构规范,CSS用于页面...

    模拟过山车动态的文字动画特效.rar

    2. 精通CSS3,尤其是动画和变换相关的特性。 3. 对HTML5的canvas有深入理解,知道如何在画布上绘制和操作图形。 4. 一定的物理知识,特别是基础力学原理。 5. 良好的视觉设计感,能创造出引人入胜的动画效果。 总的...

    尚硅谷教程React视频.txt

    3. **观看尚硅谷React教程**:尚硅谷提供的React教程涵盖了从入门到精通的全过程,包括React的基本概念、常用API的使用方法、项目实战等内容。跟随教程逐步学习,可以帮助你系统地掌握React。 4. **动手实践**:理论...

    计算机专业学习计划[精品文档].docx

    总之,计算机专业的学习是一个持续的过程,需要结合个人特点,设定明确目标,养成良好习惯,精通核心知识,并有效管理时间。通过这样的学习计划,不仅可以提升专业技能,也为未来职业生涯打下坚实基础。

    java学习资料总结2015新

    - **《HTML+CSS网页设计与布局从入门到精通》** 和 **HTML 教程** 提供了关于 HTML 和 CSS 的基础知识,是前端开发者必读的经典之作。 - **《JavaScriptDOM编程艺术第2版》** 介绍了 JavaScript 与 DOM 的交互方式...

    JavaScript语言案例介绍.zip

    总之,这个压缩包提供了一个实践性的JavaScript学习资源,通过查看图像和阅读文本文件,你可以深化对JavaScript语言的理解,并提升实际编程技能。记住,理论知识和实践经验相结合,是成为精通JavaScript开发者的...

    7年的程序人生

    "程序人生.chm"文件可能是一个程序员个人的记录,其中包含了他这七年来的心得体会、技术笔记、项目案例,甚至可能包括他在解决特定问题时的解决方案。阅读这样的资料,对其他程序员来说是一份宝贵的资源,可以借鉴他...

    meganindya

    你好there我是Anindya 我是最后一年的本科生,从印度的一家公共工程机构攻读信息技术的BTech。 我今年22岁。 我是一名技术爱好者,并积极关注新技术产品。 我喜欢学习事物的工作方式,... 我精通HTML , CSS和JavaScr

    如何提高自己的编程能力 丰富的想象力

    因此,除了精通一两种主流编程语言之外,还可以尝试学习其他语言和技术栈,比如前端开发技术(HTML/CSS/JavaScript)、后端框架(如Spring Boot、Django)、数据库技术以及云计算平台等。这样不仅可以拓宽你的视野,...

    qss中文总结.rar

    QSS,全称Qt StyleSheet,是Qt框架中用于定义用户界面外观的一种样式表语言,类似于网页设计中的CSS。本文将对QSS进行详细的中文总结,旨在帮助开发者更好地理解和应用QSS来美化他们的Qt应用。 QSS的基本概念: 1. ...

Global site tag (gtag.js) - Google Analytics