《HTML5与CSS3设计模式【350个即时可用的模式结合了HTML5与CSS3的最新内容和技巧】》 - [美]Michael - 人民邮电出版社 - 香港大書城

	登入帳戶　 \|　訂單查詢　 \|　購物車/收銀台(0)　\|　在線留言板　 \|　付款方式　 \|　運費計算　 \|　聯絡我們　 \|　幫助中心　\|　加入書簽
		會員登入新用戶登記

HOME

新書上架

暢銷書架

好書推介

2023年度TOP

臺灣用戶

品種：超過100萬種各類書籍/音像和精品，正品正價，放心網購，悭钱省心

服務：香港／台灣／澳門／海外

送貨：速遞／郵局／服務站

新書上架：簡體書繁體書
暢銷書架：簡體書繁體書
好書推介：簡體書繁體書

『簡體書』HTML5与CSS3设计模式【350个即时可用的模式结合了HTML5与CSS3的最新内容和技巧】

書城自編碼： 2012428
分類：簡體書→大陸圖書→計算機/網絡→程序設計
作者： [美]Michael
國際書號(ISBN)： 9787115299925
出版社：人民邮电出版社
出版日期： 2013-01-01
版次： 1 印次： 1
頁數/字數： 481/747000
書度/開本： 16开釘裝：平装

售價：HK$ 235.9

我要買件

** 我創建的書架 **
未登入.

新書推薦：

《海外中国研究·未竟之业：近代中国的言行表率》
售價：HK$ 135.7

《我们为何建造（城市与生态文明丛书）》
售價：HK$ 89.7

《算法经济：商业逻辑与人类生活的智能演进（生动呈现AI与算法的创新应用与商业价值）》
售價：HK$ 79.4

《家书中的百年史》
售價：HK$ 79.4

《偏爱月亮》
售價：HK$ 45.8

《生物安全与环境》
售價：HK$ 56.4

《泥土：文明的侵蚀（城市与生态文明丛书）》
售價：HK$ 84.0

《医用化学（第三版）》
售價：HK$ 57.3

建議一齊購買：

HK$ 153.4
《HTML5触摸界面设计与开发》

HK$ 335.4
《HTML5权威指南【迄今为止最全面详实的网页设计参考书】》

HK$ 174.1
《HTML5程序设计（第2版）（超级畅销书《HTML5高级程序》

編輯推薦：

本书布局很好。它将模式示例放在左页，并将其解说放在右边，因此模式很好查找。本书可帮读者释放在Web设计和开发中的生产力和创造力。读者完全可以重用并组合其中模块化的设计模式来实现成功的设计。其中每个模式都有直观的名字，方便大家查找、记忆和参考。讲诉Web开发最新规范。零基础轻松掌握HTML5和CSS3

內容簡介：

《HTML5与CSS3设计模式》是一部全面讲述用HTML5和CSS3设计网页的教程。书中含350个即时可用的模式HTML5和CSS3代码片段，直接复制粘贴即可使用，更可以组合起来构建出无穷的解决方案。每个模式都可在所有主流Web浏览器中可靠地运行。《HTML5与CSS3设计模式》系统地介绍了CSS3的每个可用特性，并结合了HTML5来创建可重用的模式。另外，《HTML5与CSS3设计模式》布局巧妙，各个模式的示例在左边，说明在右边，非常便于查找。《HTML5与CSS3设计模式》适合具有HTML和CSS基础的读者学习参考。

關於作者：

Michael
Bowers有22年编程生涯的老牌程序员。他从14岁那年就开始自学编程，并一直勤奋不辍。现在他的身份是首席工程师和企业信息技术架构师。他曾在很多项目中担当过程序员、架构师以及数据建模师等角色，在开发网站、构建应用程序架构和数据库系统方面有丰富的经验。除了开发过Web应用程序、集成企业信息系统、构建工厂自动化方案之外，他还开发过编程语言、编译器及解释器，并且还管理过软件团队。他最喜欢的编程语言包括：CSS、HTML、XML、C#、C++、Visual
Basic、Java、JavaScript、SQL及XQuery。另外，Michael在钢琴上的造诣颇深。他拥有作曲专业的学士学位、乐理专业的硕士及准博士学位（ABD
PhD）。闲暇时，他喜欢即兴演奏、编排音乐并谱曲。 Dionysios Synodinos
C4Media的研究平台团队主管，同时还是一位自由顾问，关注互联网富应用程序、Web应用程序安全性、移动Web以及Web服务等。他还是InfoQ的HTML5及JavaScript方向的首席编辑，定期在网站上撰写一些有关JVM平台的文章。游走于服务器端编程与UI设计10余年，他参与过不同的软件项目，并且参与编写过多部技术书籍。
Victor Sumner
LookSmart公司的高级软件工程师。作为一位自学的Web程序开发者，在一款Web程序的生命周期中，他要担负很多角色，从数据库管理员到Web设计师，所有的工作他都做过。他喜欢挑战并解决棘手的问题。他有很多业余爱好，包括摄影、骑马、玩电子游戏等。他和妻子Alicia一起住在加拿大的安大略省。

第1章　设计模式：简化CSS使用　
1.1　设计模式——结构化方法　
1.2　使用设计模式　
1.3　使用样式表　
1.4　CSS语法　
1.4.1　CSS语法详解　
1.4.2　在CSS中使用空白字符　
1.4.3　使用属性值　
1.5　使用层叠顺序　
1.6　简化层叠顺序　
1.7　CSS和HTML链接　
1.8　CSS常用属性　
1.9　CSS属性与值：常用　
1.10　CSS属性与值：内容　
1.11　CSS属性与值：布局　
1.12　CSS属性与值：专用　
1.13　选择器　
1.14　媒体查询　
1.15　灵活尺寸单位　
1.16　固定度量单位　
1.17　96 dpi下度量单位的换算　
1.18　96 dpi下的常用字号　
1.19　过渡、动画与2D变换　
1.20　修复CSS错误　
1.21　样式表的规范化　
第2章　HTML设计模式　
2.1　概述　
2.2　HTML结构　
2.3　HTML结构续　
2.4　XHTML　
2.5　DOCTYPE　
2.6　页头元素　
2.7　条件样式表　
2.8　结构块元素　
2.9　终止块元素　
2.10　多功能块元素　
2.11　行内元素　
2.12　类和ID属性　
2.13　HTML空白字符　
第3章　CSS选择器与继承　
3.1　概述　
3.2　类型、类和ID选择器　
3.3　位置选择器和选择器分组　
3.4　属性选择器　
3.5　伪元素选择器　
3.6　伪类选择器　
3.7　子类选择器　
3.8　继承　
3.9　可视化继承　
第4章　框模型　
4.1　概述　
4.2　Display　
4.3　框模型　
4.4　行内框　
4.5　行内块级框　
4.6　块级框　
4.7　表格框　
4.8　绝对框　
4.9　浮动框　
第5章　框模型的范围　
5.1　概述　
5.2　宽度　
5.3　高度　
5.4　设定尺寸　
5.5　收缩适应　
5.6　拉伸　
第6章　框模型属性　
6.1　概述　
6.2　外边距　
6.3　边框　
6.4　内边距　
6.5　背景　
6.6　溢出　
6.7　可见性　
6.8　分页符　
第7章　定位模型　
7.1　概述　
7.2　定位模型　
7.3　设定位置　
7.4　最近定位祖先元素　
7.5　堆叠上下文　
7.6　原子显示　
7.7　静态定位　
7.8　绝对定位　
7.9　固定定位　
7.10　相对定位　
7.11　浮动定位与复位　
7.12　相对浮动定位　
第8章　定位方式：缩进、偏移与对齐　
8.1　概述　
8.2　缩进　
8.3　静态偏移　
8.4　静态表格偏移与缩进　
8.5　浮动偏移　
8.6　绝对偏移与固定偏移　
8.7　相对偏移　
8.8　静态行内对齐　
8.9　静态块级对齐与偏移　
8.10　静态表格对齐与偏移　
8.11　绝对对齐与偏移　
8.12　绝对居中对齐　
8.13　外部对齐　
第9章　高级定位　
9.1　概述　
9.2　左对齐　
9.3　左偏移　
9.4　右对齐　
9.5　右偏移　
9.6　居中对齐　
9.7　居中偏移　
9.8　上对齐　
9.9　上偏移　
9.10　下对齐　
9.11　下偏移　
9.12　垂直居中对齐　
9.13　垂直居中偏移　
第10章　设置文字样式　
10.1　概述　
10.2　字体　
10.3　高亮显示　
10.4　文字修饰　
10.5　文字阴影　
10.6　使用图片替换文字　
10.7　使用Canvas和VML替换文字　
10.8　嵌入字体　
10.9　不可见文字　
10.10　仅供屏幕阅读器读取　
第11章　内容间隔　
11.1　间隔　
11.2　块级化　
11.3　不换行　
11.4　保留空格　
11.5　代码　
11.6　填充内容　
11.7　行内分隔区　
11.8　行内装饰　
11.9　换行　
11.10　行内水平线规则　
第12章　内容对齐　
12.1　文字缩进　
12.2　悬挂缩进　
12.3　水平对齐内容　
12.4　垂直对齐内容　
12.5　垂直偏移内容　
12.6　下标与上标　
12.7　嵌套对齐　
12.8　高级对齐示例　
第13章　块级元素　
13.1　概述　
13.2　结构含义　
13.3　可视化结构　
13.4　节　
13.5　列表　
13.6　项目符号背景　
13.7　行内化　
13.8　合并外边距　
13.9　插入　
13.10　水平线规则　
13.11　块级分隔区　
13.12　块级间隔删除器　
13.13　左旁注　
13.14　右旁注　
第14章　图片　
14.1　概述　
14.2　图片　
14.3　图片地图　
14.4　淡出　
14.5　半透明　
14.6　替换文字　
14.7　内容覆盖图片　
14.8　内容覆盖背景图片　
14.9　CSS精灵图　
14.10　CSS精灵图续　
14.11　基本阴影图片　
14.12　阴影图片　
14.13　阴影图片续　
14.14　阴影图片再续　
14.15　圆角　
14.16　圆角续　
14.17　图片示例　
第15章　表格　
15.1　概述　
15.2　表格　
15.3　行组与列组　
15.4　表格选择器　
15.5　拆分边框　
15.6　合并边框　
15.7　合并边框样式　
15.8　隐藏与删除单元格　
15.9　删除与隐藏行和列　
15.10　垂直对齐数据　
15.11　表格条纹　
15.12　表格化、行化和单元格化　
15.13　表格布局　
第16章　表格列布局　
16.1　表格布局模型　
16.2　使用列布局　
16.3　概述　
16.4　列宽　
16.5　收缩适应列　
16.6　设定尺寸列　
16.7　按内容比例划分列　
16.8　按宽度比例划分列　
16.9　按百分比比例划分列　
16.10　按反比例划分列　
16.11　最小等宽列　
16.12　等宽列　
16.13　小尺寸列　
16.14　弹性列　
16.15　混合列布局　
第17章　布局　
17.1　概述　
17.2　流动布局概述　
17.3　由外而内框　
17.4　浮动节　
17.5　浮动分隔区　
17.6　流动布局　
17.7　两侧浮动　
17.8　事件样式　
17.9　卷起　
17.10　选项卡菜单　
17.11　选项卡　
17.12　飞出菜单　
17.13　按钮　
17.14　布局链接　
17.15　多列布局　
17.16　模板布局　
17.17　布局示例　
第18章　首字下沉　
18.1　概述　
18.2　对齐首字下沉　
18.3　首字母下沉　
18.4　悬挂首字下沉　
18.5　嵌入式图片下沉　
18.6　浮动首字下沉　
18.7　浮动图片下沉　
18.8　旁注式首字下沉　
18.9　旁注式图片下沉　
第19章　突出引用与普通引用　
19.1　概述　
19.2　左浮动突出引用　
19.3　右浮动突出引用　
19.4　居中突出引用　
19.5　左旁注突出引用　
19.6　右旁注突出引用　
19.7　块级普通引用　
19.8　行内块级普通引用　
19.9　行内普通引用　
第20章　警告框　
20.1　概述　
20.2　JavaScript警告框　
20.3　工具提示警告框　
20.4　弹出式警告框　
20.5　弹出式警告框续　
20.6　警告框　
20.7　行内警告框　
20.8　悬挂式警告框　
20.9　图片警告框　
20.10　插入警告框　
20.11　浮动警告框　
20.12　左旁注警告框　
20.13　右旁注警告框　
20.14　表单验证

內容試閱：

设计模式：简化CSS使用
CSS表面上很简单，可用于设置文档样式的常用属性只有45个。但是，属性及属性值的不同组合会产生完全不同的结果。这可以称为CSS多态性，因为同一个属性在不同情况下具有不同的意义。CSS多态性会产生无数种组合可能性。
学习CSS不仅要学习各个属性，还要学习在具体情况中应该使用哪些属性，以及不同类型的属性值在不同情况下为何会产生不同的结果。以width属性为例当与其他规则组合使用或者被赋予不同的值时，它会产生许多不同的效果。例如，width对行内元素完全不起作用。width:auto会将浮动元素收缩到与其内容相等的宽度。当left和right设置为auto时，width:auto会将设定尺寸的元素收缩到最小宽度。width:auto会将块级元素拉伸到与父级元素相等的宽度。当left和right被设置为0时，width:auto会将元素拉伸到与它们所属块元素相等的宽度。只要块级元素和浮动元素没有设置边框、内边距和外边距，那么width:100%就会将它们拉伸到与父级元素相等的宽度。即使表格元素设置了边框和内边距，width:100%也会将它拉伸到与父级元素相等的宽度。width:100%会将设定尺寸的元素拉伸到与元素最近祖先元素相等的宽度，而不是与父级元素对齐。width:100em则将元素尺寸设置为其font-size的高度相对值，从而使元素的宽度足够容纳一定数量的字符。width:100px会将元素尺寸设置为固定的像素值，而且与其文本的font-size值无关。
更复杂的是，浏览器不一定实现了所有的规则。例如，在一个或多个主流浏览器中，122个属性中有40多个属性未得到所有浏览器的支持，而类似上述的600个CSS规则中有250多个未得到支持。CSS还加入了一些定义各种级别和配置文件的规范。每一个级别的CSS都基于前一个级别构建而成，并且通常会增加一些新特性，它们一般称为CSS
1、CSS
2和CSS3。配置文件通常是一个或多个CSS级别的子集，用于支持特殊的设备或用户界面。浏览器对CSS3的支持是开发人员必须关注的重要问题，而且这个规范仍在快速发展中。
因此，在学习CSS时，要想记住每一个规则的无数特殊情况，无疑是不现实的。
为了简化CSS学习，本书介绍了属性及属性值的所有实用组合方式。它通过具体实例来介绍属性，全面地介绍了CSS的工作原理。
设想一下，去掉那些无用的规则，并且不需要在每一个浏览器上测试所有规则及规则组合，我们可以节省多少学习时间？我已经帮读者做完这些事情。我曾经运行过上千个测试，也在每一个主流浏览器上测试过所有CSS属性和属性组合，其中包括Internet
Explorer 6789、Firefox 7、Chrome 12、Opera 9和Safari 5。
我将这些结果总结为一些简单的设计模式——创建优质、高性能和最佳体验的网站所需要的全部CSS和HTML设计模式。本书（第2版）已经更新，加入了关于HTML5和CSS3的最新内容和技巧。
在学习这些设计模式之后，您一定会收获良多。
本章将介绍这些设计模式的用途及其原理。书中将通过一些例子说明如何组合使用这些设计模式来创建新的模式。此外，本章还会介绍如何正确地使用样式表、CSS语法和层叠顺序。
接下来，我会展示一系列图表，其中列出了所有实用的CSS属性和度量单位。然后，我将简要地介绍12种CSS问题快速修复方法。最后再来介绍如何统一不同浏览器下的元素样式——这样你就能够放心地覆盖这些默认样式。
1.1　设计模式——结构化方法
设计模式已经在软件编程中得到了非常成功的应用。它们提高了网页设计和开发的生产力、创造性和效率，并且大大降低了代码的复杂性。在CSS和HTML中，设计模式是指一组适用于多种浏览器和屏幕阅读器的常用功能，利用它们既不会牺牲设计价值或体验，也不必依赖CSS补救（hack）和滤镜。但是，它们至今仍未系统地应用到HTML和CSS网页设计和开发中。
设计模式是所有创意的基础。在讨论、编写和制作时，我们都要以模式为出发点。设计模式类似于文档模板，我们可以在其中填写自己的内容。在文学创作中，它们就像是角色原型和情节梗概。在音乐创作中，它们就像是主旋律和变奏。在程序设计中，它们类似于可重用的算法，可以通过系统地修改和相互组合来产生预期结果。
设计模式能够显著提升创造力和生产力。它可以单独使用，快速产生一些结果；也可以与其他模式相结合，产生一些复杂结果。设计模式简化和丰富了创造过程。它们将创造性工作变得像塔积木一样容易。选择一些预定义的设计模式，进行适当的修改和组合，就可以得到符合我们要求的结果。模式不会束缚创造力——而是解放创造力。
在Erich Gamma、Richard Helm、Ralph Johnson和John Vlissides合著的Design
Patterns: Elements of Reusable Object-Oriented
Software（Addison-Wesley，1995）一书中，作者定义的设计模式包含4个元素：模式名称、问题、解决和方案。本书也遵循这种方法。
由于这是一本实用书籍，所以它主要关注于具体的CSS和HTML设计模式，即主流浏览器实际支持的模式。本书还将专门一些内置模式组合为更高级的模式，从而创建出新的设计模式。
简而言之，本书主要介绍设计模式，它们可以直接应用于网页设计中。
1.2　使用设计模式
第1章～第7章介绍布局样式的基础属性和元素。第8章和第9章介绍如何组合使用这些属性，创建出所有可能的块级、定位和浮动布局。第10章～第12章介绍文本样式的基础属性，以及使用这些属性创建行内布局的组合用法。第13章～第16章将组合前面章节提出的设计模式，加入一些特殊属性和元素，设计出块级、列表、图片、表格和表格列等样式。
第1章～第16章总共介绍了300多种设计模式，通过组合使用45个常用CSS属性、4种元素（行内、行内块级、块式和表格）和5种定位方式（静态、相对、绝对、固定和浮动）。
设计模式的强大之处在于：基础模式经过简单组合就能够创造出一些复杂模式。这种方法能够简化CSS学习过程，提高CSS的使用效率。第17章～第20章介绍如何组合使用这些设计模式，创建出流动布局、首字下沉、突出引用、普通引用和警告框等样式。
为了说明设计模式的简单性和强大功能，接下来我们通过5个例子介绍一组基础设计模式，然后将它们组合为更复杂的模式。在此，读者无需完全理解每一个模式的细节——只要了解模式的组合过程就可以了。
第一个例子说明background属性的使用方法。background是一种CSS内置设计模式，支持在元素之下显示图片。例1-1说明了div元素与background属性的组合用法。这个div的尺寸为250像素×76像素，有足够的空间能显示完整的背景图片
。
例1-1　背景图像
HTML
Background Image
CSS
div { background:url"heading2.jpg" no-repeat; width:250px;
height:76px; }
例1-2说明的是绝对定位（Absolute）设计模式。绝对定位设计模式将元素从流中移除，然后将它相对于另一个元素进行重新定位。为此，CSS提供了position:absolute规则。当position:
absolute与top和left属性组合使用时，元素就可以相对于最近定位祖先元素的左上角进行定位。这个例子使用position:relative定位div，使之成为span最近定位祖先元素。然后，将span的位置设置为离div顶端和左端各10像素的绝对位置。
例1-2　绝对定位
HTML
Absolute
Sized Absolute
CSS
*.positioned { position:relative; }
*.absolute { position:absolute; top:10px; left:10px; }
* 此处省略了其他一些样式。*
例1-3组合使用了前两个例子的设计模式，创建了文本替换（Text
Replacement）设计模式。文本替换是在一些文本的位置上显示一张图片（将文本嵌入到图片中，实现更多的格式控制）。此外，将文本置于图片之下，当图片下载失败时，文本便显示出来。
通过组合使用背景和绝对定位设计模式，就可以创建出文本替换模式。在一个标题中加入一个空白span。然后将标题设置为相对定位，这样子元素就能够相对于标题位置进行绝对定位。给span设置一个背景图像，并将它绝对定位到标题元素的文本之上。同时，将span和标题设置为与背景图像完全相同的尺寸。
最后的效果是，span的背景图片覆盖标题文本，而如果图片下载失败，标题中带格式的文本就会显示出来。
例1-3　文本替换
HTML
Text Replacement
Heading 2
CSS
#h2 { position:relative; width:250px; height:76px;
overflow:hidden; }
#h2 span { position:absolute; width:250px; height:76px; left:0;
top:0;
background:url"heading2.jpg" no-repeat; }
例1-4说明的是左旁注（Left
Marginal）设计模式。这个模式将一个或多个元素移到块级元素的左边，这样标题（或注释、图片等）就显示在左边，而内容则显示在右边。
例1-4　左外边距
HTML
Left Marginal
Heading
You want to excerpt an element and move it into the left
margin.
CSS
*.left-marginal { position:relative; margin-left:200px; }
*.marginal-heading { position:absolute; left:-200px; top:0;
margin:0; }
例1-5说明的是旁注式图片下沉（Marginal Graphic
Dropcap）设计模式。这个模式组合使用了前面4个例子的全部设计模式，并利用文本替换和左外边距设计模式的优点，在块元素左边创建一个图片下沉效果。
为了实现这样的效果，需要使用indent类将段落设置为相对定位，使之成为下沉内容的最近定位祖先元素，并且给段落增加120像素的左外边距，给下沉内容预留足够的空间。使用graphic-dropcap类将下沉内容设置为绝对定位，将它移到段落左边，并将它设置为与下沉图片相同的尺寸。然后，将下沉图片内的span设置为绝对定位，将它移到下沉文本之上，用它的背景图片覆盖文本。
单从它本身来看，旁注式图片下沉模式本身比较复杂，它组合使用了16余种设计模式。另外，如果将它分解成文本替换和左旁注设计模式，那么这个模式就显得很简单。这正是设计模式的强大之处。
例1-5　旁注式图片下沉
HTML
Marginal Graphic Dropcap
Marginal
Graphic Dropcap. The letter M has been covered by the dropcap
image.
Screen readers read the text and visual users see the
image.
If the browser cannot display the dropcap image,
the text becomes visible.
CSS
*.indent { position:relative; margin-left:120px; }
*.graphic-dropcap { position:absolute;
width:120px; height:90px; left:-120px; top:0; }
*.graphic-dropcap span { position:absolute;
width:120px; height:90px; margin:0; left:0; top:0;
background:url"m.jpg" no-repeat; }
1.3　使用样式表
样式可以放在3个位置，样式表、

書城介紹　 \|　合作申請　\|　索要書目　 \|　新手入門　\|　聯絡方式　 \|　幫助中心　\|　找書說明　 \|　送貨方式　\|　付款方式	香港用户　 \|　台灣用户　\|　大陸用户　\|　海外用户

	megBook.com.hk
Copyright © 2013 - 2024 （香港）大書城有限公司　 All Rights Reserved.