CSS网页布局与浏览器兼容PDF|Epub|txt|kindle电子书版本网盘下载

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

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

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

1.1 了解Web标准13

1.1.1 W3C组织13

1.1.2 Web标准的组成14

1.1.3 什么是HTML14

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 检查浏览器是否支持CSS318

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 跨浏览器的CSS21

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-letter65

2.5.2 ::first-line66

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

2.5.3 ::before和::after67

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

2.5.4 ::selection68

实战：使用::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 伸缩容器display226

8.2.2 伸缩流方向flex-direction227

8.2.3 伸缩换行flex-wrap229

8.2.4 伸缩流方向与换行flex-flow231

8.2.5 主轴对齐justify-content231

8.2.6 侧轴对齐align-items和align-self233

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

8.2.7 堆栈伸缩行align-content240

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