无懈可击的Web设计 使用HTML 5和CSS 3提高网站的灵活性与适应性 原书第3版【2025|PDF|Epub|mobi|kindle电子书版本百度云盘下载】

无懈可击的Web设计 使用HTML 5和CSS 3提高网站的灵活性与适应性 原书第3版PDF格式电子书版下载

注意：本站所有压缩包均有解压码： 点击下载压缩包解压工具

第1章 灵活的文字1

1.1常见的方法3

1.2为什么这样设计不是无懈可击的4

1.3权衡我们的选择6

1.3.1长度单位6

1.3.2表示“相对大小”的关键字6

1.3.3百分比值7

1.3.4表示“绝对大小”的关键字7

1.4无懈可击的方法7

1.4.1关键字8

1.4.2放弃像素级别的精确度8

1.5为什么这样设计是无懈可击的9

1.6接下来的操作9

1.6.1设置基准值9

1.6.2使用百分比值来获取不同的尺寸10

1.7结合使用关键字和百分比值13

1.7.1设定一个中间的关键字基准值13

1.7.2慎用嵌套百分比值15

1.7.3百分比值的一致性试验17

1.8通过em实现灵活的文字18

1.9 rem单位19

1.10本章小结21

第2章 可伸缩的导航栏23

2.1常见的方法24

2.1.1功能强大的选项卡25

2.1.2通常的翻转效果26

2.2为什么这样设计不是无懈可击的26

2.2.1堆积如山的代码26

2.2.2不方便使用27

2.2.3可伸缩性的问题27

2.2.4不够灵活27

2.3无懈可击的方法27

2.3.1无样式的导航列表29

2.3.2两幅小图片29

2.3.3应用样式30

2.3.4采用浮动来解决问题31

2.3.5为选项卡定形32

2.3.6 对齐背景图片32

2.3.7增加底边34

2.3.8悬停变换35

2.3.9选中状态35

2.4为什么这样设计是无懈可击的36

2.5使用 CSS 3渐变而不使用图片实现37

2.6通过em来实现40

2.7其他示例42

2.7.1 MOZILLA.ORG42

2.7.2斜杠43

2.7.3 ESPN.COM的搜索栏43

2.8本章小结45

第3章 可扩展的行47

3.1常见的方法48

3.2为什么这样设计不是无懈可击的50

3.2.1非必要的图片50

3.2.2固定的行高50

3.2.3臃肿的代码51

3.3无懈可击的方法51

3.3.1 HTML代码结构51

3.3.2标识出各部分52

3.3.3没有添加样式时的情形53

3.3.4添加背景54

3.3.5安排内容的位置54

3.3.6消失的背景55

3.3.7添加更多细节56

3.3.8四个圆角58

3.3.9 文本和链接的细节60

3.3.10最后一步62

3.3.11针对IE7进行的修改63

3.4为什么这样设计是无懈可击的64

3.4.1代码结构与设计效果的分离65

3.4.2不再有固定不变的高度65

3.5通过border-radius实现66

3.6另一个自适应扩展例子68

3.6.1 HTML代码69

3.6.2创建两幅图片69

3.6.3添加CSS70

3.6.4自动扩展71

3.7本章小结72

第4章 巧妙的浮动效果73

4.1常见的方法75

4.2为什么这样设计不是无懈可击的76

4.3无懈可击的方法77

4.3.1对 HTML代码无止境的抉择77

4.3.2使用定义列表78

4.3.3 HTML代码结构79

4.3.4没有添加样式时的情形80

4.3.5为外围容器添加样式80

4.3.6标识图片81

4.3.7应用基本的样式82

4.3.8给图片定位86

4.3.9反向浮动86

4.3.10为任意长度的说明文字做准备89

4.3.11浮动自清除90

4.3.12尾声92

4.3.13切换浮动方向94

4.3.14表格效果96

4.3.15 更换背景图片99

4.3.16应用box-shadow101

4.3.17其他清除浮动元素的方法103

4.3.18通过生成的内容进行清除104

4.4为什么这样设计是无懈可击的107

4.5本章小结108

第5章 牢固的方框109

5.1常见的方法111

5.2为什么这样设计不是无懈可击的113

5.3无懈可击的方法114

5.3.1 HTML代码结构115

5.3.2图片策略115

5.3.3应用样式117

5.4为什么这样设计是无懈可击的119

5.5通过CSS 3实现120

5.6其他圆角实现技术124

5.7框提示132

5.7.1单圆角132

5.7.2圆角提示135

5.7.3无懈可击的箭头136

5.7.4 CSS中的限制孕育了技术上的创新137

5.8本章小结138

第6章 页面在缺失图片或CSS的情况下仍然易读139

6.1常见的方法140

6.2为什么这样设计不是无懈可击的143

6.3无懈可击的方法144

6.4为什么这样设计是无懈可击的146

6.5使用样式或禁用样式148

6.6常见的方法149

6.7无懈可击的方法150

6.8 Dig Dug测试152

6.9无懈可击的工具153

6.9.1 Favelet154

6.9.2 Web Developer Extension156

6.9.3 Web Accessibility工具栏158

6.9.4 Firebug158

6.9.5将验证作为一种工具159

6.10本章小结162

第7章 可转换的表格163

7.1常见的方法164

7.2为什么这样设计不是无懈可击的166

7.3无懈可击的方法167

7.3.1 HTML代码结构168

7.3.2应用样式174

7.4为什么这样设计是无懈可击的186

7.5本章小结187

第8章 流动布局和弹性布局189

8.1常见的方法190

8.2为什么这样设计不是无懈可击的192

8.2.1大量的代码192

8.2.2噩梦般的维护工作193

8.2.3并非最佳的内容顺序193

8.3无懈可击的方法194

8.3.1 HTML代码结构194

8.3.2创建栏：浮动与定位195

8.3.3应用样式197

8.3.4 gutter201

8.3.5栏的内边距203

8.3.6设置宽度的最大值和最小值209

8.3.7滑动人造栏213

8.3.8三栏布局216

8.4为什么这样设计是无懈可击的223

8.5基于em的布局224

8.5.1一个弹性布局的例子224

8.5.2 HTML代码226

8.5.3 CSS228

8.5.4一致性是最理想的230

8.5.5注意滚动条230

8.6本章小结231

第9章 构成一个整体233

9.1目标234

9.2为什么这样设计是无懈可击的235

9.2.1流动的布局236

9.2.2灵活的文字237

9.2.3即使没有图片和CSS也可以使用页面238

9.2.4国际化240

9.3构建过程240

9.3.1 HTML代码结构241

9.3.2基本样式242

9.3.3布局结构242

9.3.4灵活的网格244

9.3.5设置max-width244

9.3.6页头247

9.3.7灵活的图片249

9.3.8侧边栏251

9.3.9 CSS 3的多栏布局255

9.3.10媒体查询的魔力256

9.4本章小结264