CSS网页布局与浏览器兼容PDF电子书下载

第1章 揭开CSS的神秘面纱 13

1.1 了解Web标准 13

1.1.1 W3C组织 13

1.1.2 Web标准的组成 14

1.1.3 什么是HTML 14

1.1.4 什么是CSS样式 14

1.1.5 HTML＋CSS之最佳拍档 15

1.1.6 Web标准的发展趋势 15

1.2 CSS样式简介 15

1.2.1 CSS样式的发展 16

1.2.2 CSS3的突出特性 16

1.3 检查浏览器是否支持CSS3 18

1.3.1 使用Modernizr检查支持情况 18

1.3.2 各浏览器对CSS3的支持情况 18

1.4 CSS样式语法 20

1.4.1 CSS样式基本语法 20

1.4.2 CSS样式规则构成 21

1.5 跨浏览器的CSS 21

1.5.1 渐进增强与优雅降级 21

1.5.2 跨浏览器适配的通用方法 22

1.6 浏览器的私有CSS属性 22

1.6.1 不同核心的浏览器的私有CSS属性前缀 23

1.6.2 CSS属性前缀的排序 23

1.7 在HTML页面中使用CSS样式的4种方式 23

1.7.1 内联CSS样式 24

1.7.2 内部CSS样式 24

1.7.3 链接外部CSS样式表文件 25

1.7.4 导入外部CSS样式表文件 25

实战：在网页中链接外部CSS样式表文件 25

1.8 CSS样式的特性与注意事项 27

1.8.1 CSS样式的相关特性 27

1.8.2 CSS样式的注释 29

1.8.3 CSS样式的缩写 29

1.9 本章小结 31

第2章 从全新的CSS3选择器开始 32

2.1 认识CSS选择器 32

2.1.1 CSS3选择器的优势 32

2.1.2 CSS3选择器的分类 33

2.2 基础选择器 33

2.2.1 基础选择器语法 33

2.2.2 基础选择器的浏览器兼容性 34

2.2.3 通配选择器 34

2.2.4 标签选择器 34

实战：创建通配选择器与标签选择器样式 35

2.2.5 ID选择器 36

2.2.6 类选择器 37

实战：创建ID选择器与类选择器样式 37

2.2.7 群组选择器 39

实战：创建群组选择器样式 40

2.3 层次选择器 41

2.3.1 层次选择器语法 41

2.3.2 层次选择器的浏览器兼容性 42

2.3.3 后代选择器 42

2.3.4 子选择器 43

实战：使用后代选择器与子选择器 43

2.3.5 相邻兄弟选择器 44

2.3.6 通用兄弟选择器 45

实战：使用相邻兄弟选择器与通用兄弟选择器 46

2.4 伪类选择器 47

2.4.1 动态伪类选择器 47

2.4.2 动态伪类选择器的浏览器兼容性 47

实战：美化超链接按钮样式 48

2.4.3 目标伪类选择器 50

2.4.4 目标伪类选择器的浏览器兼容性 50

实战：实现页面中的指定内容高亮突出显示 51

2.4.5 语言伪类选择器 52

2.4.6 语言伪类选择器的浏览器兼容性 52

实战：不同语言版本显示不同的背景 52

2.4.7 UI元素状态伪类选择器 54

2.4.8 UI元素状态伪类选择器的浏览器兼容性 55

实战：设置网页中表单元素的UI状态 56

2.4.9 结构伪类选择器 57

2.4.10 结构伪类选择器的浏览器兼容性 57

2.4.11 结构伪类选择器使用详解 58

实战：使用结构伪类选择器美化新闻列表效果 62

2.4.12 否定伪类选择器 64

2.4.13 否定伪类选择器的浏览器兼容性 64

实战：实现图像列表的简单交互效果 64

2.5 伪元素 65

2.5.1 ::first-letter 65

2.5.2 ::first-line 66

实战：使用::first-letter和::first-line伪元素 66

2.5.3 ::before和::after 67

实战：使用::before伪元素添加图标 68

2.5.4 ::selection 68

实战：使用::seletion伪元素设置文字选中的高亮效果 69

2.6 属性选择器 70

2.6.1 属性选择器语法 70

2.6.2 属性选择器的浏览器兼容性 70

2.6.3 属性选择器使用详解 71

实战：为不同的下载链接应用不同的图标 71

2.7 本章小结 73

第3章 CSS3炫目的文字效果 74

3.1 文本的基础CSS属性 74

3.1.1 文字样式相关属性 74

实战：设置网页文字的基本效果 76

实战：设置网页文字的加粗和倾斜效果 78

实战：设置网页中英文字体的大小写 79

实战：设置文字间距并添加修饰 81

3.1.2 段落样式相关属性 83

实战：设置段落文字首行缩进效果 83

实战：设置文字水平对齐效果 85

实战：设置文字垂直对齐效果 87

3.1.3 列表样式相关属性 88

实战：设置新闻列表效果 89

3.2 CSS3溢出文本属性 91

3.2.1 text-overflow属性的语法 91

3.2.2 text-overflow属性的浏览器兼容性 92

实战：设置文字溢出处理方式 92

3.3 CSS3文本换行属性 94

3.3.1 word-wrap属性 94

实战：使用word-wrap属性控制内容换行 95

3.3.2 word-break属性 96

实战：使用word-break属性设置内容换行处理方式 96

3.3.3 white-space属性 98

3.4 CSS3文本阴影属性 100

3.4.1 text-shadow属性的语法 100

3.4.2 text-shadow属性的浏览器兼容性 100

实战：为网页文字添加阴影效果 101

3.5 使用CSS3嵌入Web字体 103

3.5.1 ＠font-face语法 104

3.5.2 自定义字体方法 104

3.5.3 声明多个字体来源 105

3.5.4 ＠font-face规则的浏览器兼容性 105

实战：在网页中实现特殊字体效果 107

3.6 本章小结 109

第4章 更加便捷的网页背景设置 110

4.1 背景的基础CSS属性 110

4.1.1 background-color属性 110

4.1.2 background-image属性 111

4.1.3 background-repeat属性 111

4.1.4 background-position属性 111

实战：为网页设置背景颜色和背景图像 112

4.1.5 background-attachment属性 114

实战：设置网页背景图像固定 115

4.2 CSS3背景尺寸属性 116

4.2.1 background-size属性的语法 116

4.2.2 background-size属性的浏览器兼容性 117

实战：实现始终满屏显示的网页背景 117

4.3 CSS3背景原点属性 121

4.3.1 background-origin属性的语法 121

4.3.2 background-origin属性的浏览器兼容性 122

实战：实现始终满屏显示的网页背景 123

4.4 CSS3背景裁切属性 126

4.4.1 background-clip属性的语法 126

4.4.2 background-clip属性的浏览器兼容性 126

实战：使用background-clip属性控制元素背景图像的显示区域 127

4.5 CSS3多背景属性 129

4.5.1 CSS3多背景属性的语法 129

4.5.2 CSS3多背景的优势 130

4.5.3 CSS3多背景的浏览器兼容性 130

实战：为网页设置多背景图像效果 131

4.6 本章小结 133

第5章 CSS3丰富的颜色设置方法 134

5.1 CSS3透明属性 134

5.1.1 opacity属性的语法 134

5.1.2 opacity属性的浏览器兼容性 135

实战：实现图片的半透明显示效果 135

5.2 CSS3颜色模式 138

5.2.1 RGBA颜色模式 138

5.2.2 alpha通道与opacity属性的区别 138

5.2.3 HSL颜色模式 138

5.2.4 HSLA颜色模式 139

5.2.5 RGBA、HSL和HSLA颜色模式的浏览器兼容性 139

实战：实现网页元素半透明背景颜色 140

5.3 CSS3渐变颜色 144

5.3.1 CSS3线性渐变的语法 144

5.3.2 CSS3径向渐变的语法 146

5.3.3 CSS3线性渐变与径向渐变的浏览器兼容性 149

5.3.4 CSS3线性渐变使用详解 150

实战：实现线性渐变的页面背景颜色 150

5.3.5 CSS3径向渐变使用详解 155

实战：实现径向渐变的页面背景颜色 155

5.4 了解CSS3重复渐变 161

5.5 本章小结 162

第6章 个性的边框设置属性 163

6.1 边框基础CSS属性 163

6.1.1 边框的基础属性 163

实战：为网页元素设置边框效果 165

6.1.2 边框基础属性的浏览器兼容性 167

6.2 CSS3多种颜色边框 168

6.2.1 border-color属性的语法 168

6.2.2 border-color属性的浏览器兼容性 168

实战：实现多彩绚丽的边框效果 169

6.3 CSS3圆角边框属性 171

6.3.1 border-radius属性的语法 171

6.3.2 border-radius属性的4个子属性 172

6.3.3 border-radius属性的浏览器兼容性 173

实战：为网页元素设置圆角效果 174

6.4 CSS3图像边框属性 178

6.4.1 border-image属性的语法 178

6.4.2 border-image属性使用详解 178

6.4.3 border-image属性的浏览器兼容性 183

实战：为网页中的元素应用图像边框效果 183

6.5 CSS3元素阴影属性 186

6.5.1 box-shadow属性的语法 187

6.5.2 box-shadow属性的浏览器兼容性 187

实战：为网页元素添加阴影效果 188

6.6 本章小结 192

第7章 揭开CSS3盒模型的秘密 193

7.1 W3C标准盒模型 193

7.1.1 什么是CSS盒模型 193

7.1.2 CSS盒模型的要点 194

7.1.3 CSS盒模型属性说明 195

实战：设置网页元素的盒模型 196

7.1.4 CSS盒模型的浏览器兼容性 197

7.2 揭开浮动布局的秘密 198

7.2.1 float属性 198

实战：制作图片列表效果 199

7.2.2 清除浮动 201

7.2.3 float与clear属性的浏览器兼容性 202

7.3 看穿CSS定位技术 202

7.3.1 position属性 202

7.3.2 相对定位技术 203

实战：实现网页元素的叠加显示 203

7.3.3 绝对定位技术 205

实战：使网页元素固定在页面右侧显示 205

7.3.4 固定定位技术 206

实战：实现固定在顶部的导航菜单 206

7.3.5 定位属性的浏览器兼容性 207

7.4 CSS3盒模型属性 208

7.4.1 box-sizing属性的语法 208

7.4.2 box-sizing属性的浏览器兼容性 208

实战：设置网页元素的尺寸大小 209

7.5 CSS3内容溢出属性 212

7.5.1 overflow-x和overflow-y属性 212

7.5.2 overflow-x和overflow-y属性的浏览器兼容性 212

实战：设置元素内容溢出的处理方式 213

7.6 CSS3自由缩放属性 214

7.6.1 resize属性的语法 214

7.6.2 resize属性的浏览器兼容性 215

实战：实现网页元素尺寸任意拖动缩放 215

7.7 CCS3外轮廓属性 218

7.7.1 outline属性的语法 218

7.7.2 outline与border属性的对比 219

7.7.3 outline属性的浏览器兼容性 219

实战：为元素添加轮廓外边框效果 220

7.8 本章小结 222

第8章 CSS3伸缩布局盒模型 223

8.1 伸缩布局盒模型基础 223

8.1.1 CSS中的布局模式 223

8.1.2 伸缩布局盒模型的特点 224

8.1.3 伸缩盒模型规范的发展 224

8.1.4 伸缩盒模型的浏览器兼容性 225

8.2 Flexbox模型的使用方法 226

8.2.1 伸缩容器display 226

8.2.2 伸缩流方向flex-direction 227

8.2.3 伸缩换行flex-wrap 229

8.2.4 伸缩流方向与换行flex-flow 231

8.2.5 主轴对齐justify-content 231

8.2.6 侧轴对齐align-items和align-self 233

实战：实现元素的水平和垂直居中显示 237

8.2.7 堆栈伸缩行align-content 240

8.2.8 伸缩容器中子元素属性设置详解 243

实战：使用伸缩盒模型制作多列布局页面 248

8.3 本章小结 253

第9章 轻松实现多列布局 254

9.1 CSS3多列布局简介 254

9.1.1 了解CSS3多列布局相关属性 254

9.1.2 break-before、break-after和break-inside属性 255

9.2 CSS3多列布局基本属性 256

9.2.1 columns属性的语法 256

9.2.2 columns属性的浏览器兼容性 256

实战：实现网页内容分列布局 257

9.3 CSS3多列布局其他属性 259

9.3.1 column-width属性 259

实战：使用column-width属性创建分列布局 259

9.3.2 column-count属性 261

实战：使用column-count属性创建分列布局 261

9.3.3 column-gap属性 262

实战：使用column-gap属性设置列间距 262

9.3.4 column-rule属性 263

实战：为分列布局添加分隔线效果 264

9.3.5 column-span属性 265

实战：使用column-span属性实现横跨所有列效果 265

9.3.6 column-fill属性 266

9.4 本章小结 267

第10章 出色的CSS3变形动画效果 268

10.1 CSS3变形属性简介 268

10.1.1 CSS3变形属性与函数 268

10.1.2 CSS3变形属性的浏览器兼容性 269

10.2 实现元素2D变形效果 270

10.2.1 旋转变形 270

实战：实现元素的旋转效果 271

10.2.2 缩放和翻转变形 272

实战：实现元素的缩放效果 273

10.2.3 移动变形 274

实战：实现网页元素位置的移动 275

10.2.4 倾斜变形 276

实战：实现网页元素的倾斜效果 276

10.2.5 矩阵变形 277

10.2.6 定义变形中心点 278

实战：设置网页元素的变形中心点位置 279

10.2.7 同时使用多个变形函数 281

实战：为网页元素同时应用多种变形效果 281

10.3 实现元素3D变形效果 282

10.3.1 3D位移 282

实战：实现网页元素的3D位移效果 283

10.3.2 3D旋转 284

实战：实现网页元素的3D旋转效果 285

10.3.3 3D缩放 287

实战：实现网页元素的3D缩放效果 287

10.3.4 3D矩阵 288

10.4 CSS3过渡简介 289

10.4.1 CSS3过渡属性 289

10.4.2 如何创建过渡动画 289

10.4.3 CSS3过渡属性的浏览器兼容性 290

10.5 CSS3实现元素过渡效果 290

10.5.1 transition-property属性——实现过渡效果 291

10.5.2 transition-duration属性——过渡时间 291

实战：实现网页元素变形过渡效果 292

10.5.3 transition-delay属性——过渡延迟时间 294

实战：设置网页元素变形过渡延迟时间 294

10.5.4 transition-timing-function属性——过渡方式 295

实战：设置网页元素变形过渡方式 296

10.6 CSS3关键帧动画简介 297

10.6.1 CSS3新增的animation属性 297

10.6.2 animation属性的浏览器兼容性 298

10.6.3 ＠keyframes的语法 298

10.6.4 ＠keyframes的浏览器兼容性 299

10.7 为网页元素应用关键帧动画 300

10.7.1 使用＠keyframes声明动画 300

10.7.2 调用＠keyframes声明的动画 301

10-8 CSS3动画子属性详解 301

10.8.1 animation-name属性——调用动画 301

10.8.2 animation-duration属性——动画播放时间 302

10.8.3 animation-timing-function属性——动画播放方式 302

10.8.4 animation-delay属性——动画开始播放时间 302

10.8.5 animation-iteration-count属性——动画播放次数 302

10.8.6 animation-direction属性——动画播放方向 303

10.8.7 animation-play-state属性——动画播放状态 303

10.8.8 animation-fill-mode属性——动画时间外属性 303

实战：制作关键帧动画效果 303

10.9 本章小结 306

第11章 媒体查询和响应式设计 307

11.1 媒体类型＝各种浏览终端 307

11.1.1 媒体类型（MediaType） 307

11.1.2 在网页中引用媒体类型的方法 309

11.2 媒体查询（Media Query） 310

11.2.1 了解媒体查询（Media Query） 310

11.2.2 常用媒体查询（Media Query）特性 311

11.2.3 媒体查询（Media Query）的浏览器兼容性 311

11.2.4 媒体查询（Media Query）的使用方法 312

11.3 响应式设计 314

11.3.1 什么是响应式设计 314

11.3.2 响应式设计的相关术语 314

11.3.3 ＜meta＞标签 316

11.4 设计响应式摄影图片网站 316

实战：制作页面导航区域 316

实战：制作页面主体内容区域 323

实战：制作页面版底信息区域 326

11.5 本章小结 328

第12章 综合案例实战 329

12.1 企业类网站 329

12.1.1 设计分析 329

12.1.2 布局分析 329

实战：制作企业类网站页面 330

12.2 房地产宣传网站 336

12.2.1 设计分析 337

12.2.2 布局分析 337

实战：制作房地产宣传网站页面 337

12.3 儿童教育网站 342

12.3.1 设计分析 342

12.3.2 布局分析 343

实战：制作儿童教育网站页面 343

12.4 本章小结 351