CSS3+DIV网页样式与布局案例课堂PDF电子书下载

第Ⅰ篇 基础知识 3

第1章 网页设计的必备技能 3

1.1认识网页和网站 4

1.1.1什么是网页 4

1.1.2什么是网站 4

1.2网页中需要包含的要素 5

1.2.1需要HTML文件 5

1.2.2需要DIV层 5

1.2.3需要CSS定义网页样式 6

1.2.4需要JavaScript设置网页动画 6

1.2.5需要域名与服务器空间 7

1.3一个简单网页的基本构成 7

1.3.1 Head部分 8

1.3.2 Body部分 8

1.3.3注释部分 8

1.4设计网页的总体流程 9

1.4.1网页规划 9

1.4.2搜集资料 9

1.4.3设计网页的总体效果 10

1.4.4制作网页素材文件 11

1.4.5搭建网页DIV层 12

1.4.6使用CSS与JavaScript 12

1.4.7测试网页 13

1.5网站的种类与网页布局方式 14

1.5.1网站的种类 14

1.5.2网页布局方式 15

1.6在Photoshop中构建网页结构 16

1.7大神解惑 18

1.8跟我练练手 18

第2章 CSS样式入门 19

2.1认识CSS 20

2.1.1 CSS功能 20

2.1.2浏览器与CSS 20

2.1.3 CSS发展历史 21

2.2 CSS常用单位 21

2.2.1颜色单位 21

2.2.2长度单位 25

2.3编辑 和浏览CSS 26

2.3.1案例1——手工编写CSS 26

2.3.2案例2——使用Dreamweaver编写CSS 27

2.4在HTML中调用CSS的方法 28

2.4.1案例3——行内样式 28

2.4.2案例4——内嵌样式 29

2.4.3案例5——链接样式 31

2.4.4案例6——导入样式 32

2.5调用CSS方法的优先级问题 33

2.5.1案例7——行内样式和内嵌样式比较 33

2.5.2案例8——内嵌样式和链接样式比较 34

2.5.3案例9——链接样式和导入样式比较 34

2.6综合案例——制作产品销售统计表 35

2.7大神解惑 37

2.8跟我练练手 37

第3章 CSS3样式的基本语法 39

3.1 CSS基本语法 40

3.1.1 CSS构造规则 40

3.1.2 CSS的注释 40

3.2 CSS的常用选择器 40

3.2.1案例1——标签选择器 41

3.2.2案例2——类选择器 41

3.2.3案例3——ID选择器 42

3.2.4案例4——选择器的声明 43

3.3综合案例——制作炫彩网站Logo 44

3.4大神解惑 46

3.5跟我练练手 47

第Ⅱ篇 核心技术 51

第4章 设计网页字体与段落样式 51

4.1美化字体样式 52

4.1.1案例1——控制字体类型 52

4.1.2案例2——定义字体大小 53

4.1.3案例3——定义字体风格 54

4.1.4案例4——控制文字的粗细 55

4.1.5案例5——将小写字母转为大写字母 56

4.1.6案例6——设置字体的复合属性 57

4.1.7案例7——定义文字的颜色 58

4.2 CSS3中新增的文本高级样式 59

4.2.1案例8——添加文本的阴影效果 59

4.2.2案例9——设置文本溢出效果 60

4.2.3案例10——控制文本的换行 62

4.2.4案例11——设置字体尺寸 63

4.3通过CSS控制文本间距与对齐方式 64

4.3.1案例12——设置单词之间的间隔 64

4.3.2案例13——设置字符之间的间隔 65

4.3.3案例14——为文本添加下画线、上画线、删除线 66

4.3.4案例15——设置垂直对齐方式 66

4.3.5案例16——转换文本的大小写 68

4.3.6案例17——设置文本的水平对齐方式 69

4.3.7案例18——设置文本的缩进效果 71

4.3.8案例19——设置文本的行高 71

4.3.9案例20——文本的空白处理 72

4.3.10案例21——文本的反排 73

4.4综合案例1——设置网页标题 75

4.5综合案例2——制作新闻页面 76

4.6大神解惑 77

4.7跟我练练手 78

第5章 设计网页图片样式 79

5.1图片缩放 80

5.1.1案例1——通过描述标记width和height缩放图片 80

5.1.2案例2——使用CSS3中的max-width和max-height缩放图片 80

5.1.3案例3——使用CSS3中的width和height缩放图片 81

5.2设置图片的对齐方式 82

5.2.1案例4——设置图片横向对齐 82

5.2.2案例5——设置图片纵向对齐 83

5.3图文混排 84

5.3.1案例6——设置文字环绕效果 84

5.3.2案例7——设置图片与文字的间距 85

5.4综合案例1——制作学校宣传单 87

5.5综合案例2——制作简单图文混排网页 89

5.6大神解惑 90

5.7跟我练练手 90

第6章 设计网页背景与边框样式 91

6.1设计网页背景样式 92

6.1.1案例1——设置背景颜色 92

6.1.2案例2——设置背景图片 93

6.1.3案例3——背景图片重复 94

6.1.4案例4——背景图片显示 95

6.1.5案例5——设置背景图片位置 97

6.2 CSS3中新增的控制网页背景属性 99

6.2.1案例6——设置背景图片大小 99

6.2.2案例7——设置背景显示区域 100

6.2.3案例8——设置背景图像裁剪区域 102

6.2.4案例9——设置背景的复合属性 103

6.3设计边框样式 104

6.3.1案例10——设置边框样式 104

6.3.2案例11——设置边框颜色 106

6.3.3案例12——设置边框线宽 107

6.3.4案例13——设置边框的复合属性 109

6.4 CSS3中新增的边框圆角效果 110

6.4.1案例14——设置圆角边框 110

6.4.2案例15——指定两个圆角半径 111

6.4.3案例16——绘制四个不同圆角边框 112

6.4.4案例17——绘制不同种类的边框 114

6.5 CSS3中的渐变效果 115

6.5.1案例18——线性渐变效果 116

6.5.2案例19——径向渐变效果 118

6.6综合案例1——制作简单公司主页 119

6.7综合案例2——制作简单生活资讯主页 122

6.8大神解惑 124

6.9 跟我练练手 124

第7章 设计网页超级链接和鼠标样式 125

7.1使用CSS3美化超链接 126

7.1.1案例1——改变超级链接基本样式 126

7.1.2案例2——设置带有提示信息的超级链接 127

7.1.3案例3——设置超级链接的背景图 128

7.1.4案例4——设置超级链接的按钮效果 129

7.2使用CSS3美化鼠标 130

7.2.1案例5——使用CSS3控制鼠标箭头 130

7.2.2案例6——设置鼠标变幻式超链接 132

7.2.3案例7——设置网页页面滚动条 133

7.3综合案例1——图片版本超级链接 135

7.4综合案例2——关于鼠标特效案例 136

7.5综合案例3——制作一个简单的导航栏 139

7.6大神解惑 140

7.7跟我练练手 141

第8章 设计表格和表单样式 143

8.1美化表格样式 144

8.1.1案例1——设置表格边框样式 144

8.1.2案例2——设置表格边框宽度 146

8.1.3案例3——设置表格边框颜色 147

8.2美化表单样式 148

8.2.1案例4——美化表单中的元素 148

8.2.2案例5——美化提交按钮 150

8.2.3案例6——美化下拉菜单 151

8.3综合案例1——制作用户登录页面 153

8.4综合案例2——制作用户注册页面 155

8.5大神解惑 157

8.6跟我练练手 158

第9章 设计列表和菜单样式 159

9.1美化项目列表的样式 160

9.1.1案例1——美化无序列表 160

9.1.2案例2——美化有序列表 161

9.1.3案例3——美化自定义列表 163

9.1.4案例4——制作图片列表 164

9.1.5案例5——缩进图片列表 165

9.1.6案例6——列表复合属性 166

9.2使用CSS制作网页菜单 168

9.2.1案例7——制作动态导航菜单 168

9.2.2案例8——制作水平和垂直菜单 170

9.3综合案例1——模拟SOSO导航栏 172

9.4综合案例2——将段落转变成列表 175

9.5大神解惑 177

9.6跟我练练手 177

第10章 使用滤镜美化网页元素 179

10.1滤镜概述 180

10.2设置基本滤镜效果 181

10.2.1案例1——高斯模糊（blur）滤镜 181

10.2.2案例2——明暗度（brightness）滤镜 182

10.2.3案例3——对比度（contrast）滤镜 183

10.2.4案例4——阴影（drop-shadow）滤镜 184

10.2.5案例5——灰度（grayscale）滤镜 185

10.2.6案例6——反相（invert）滤镜 186

10.2.7案例7——透明度（opacity）滤镜 187

10.2.8案例8——饱和度（saturate）滤镜 188

10.2.9案例9——深褐色（sepia）滤镜 189

10.3使用复合滤镜效果 190

10.4大神解惑 191

10.5跟我练练手 191

第Ⅲ篇 高级应用 195

第11章 CSS3的高级特性 195

11.1复合选择器 196

11.1.1案例1——全局选择器 196

11.1.2案例2——交集选择器 197

11.1.3案例3——并集选择器 197

11.1.4案例4——继承（后代）选择器 198

11.2 CSS3新增的选择器 199

11.2.1案例5——属性选择器 199

11.2.2案例6——结构伪类选择器 201

11.2.3案例7——UI元素状态伪类选择器 202

11.2.4案例8——伪类选择器 204

11.3 CSS3的继承特性 205

11.3.1案例9——继承关系 205

11.3.2案例10——CSS继承的运用 206

11.4 CSS3的层叠特性 207

11.4.1案例11——同一选择器被多次定义的处理 207

11.4.2案例12——同一标签运用不同类型选择器的处理 208

11.5综合案例——制作新闻菜单 209

11.6大神解惑 212

11.7跟我练练手 212

第12章 过渡和动画效果 213

12.1认识过渡效果 214

12.2案例1——添加过渡效果 214

12.3了解动画效果 217

12.4案例2——添加动画效果 218

12.5大神解惑 219

12.6跟我练练手 220

第13章 2D和3D变幻效果 221

13.1认识2D转换效果 222

13.2添加2D转换效果 222

13.2.1案例1——添加移动效果 222

13.2.2案例2——添加旋转效果 223

13.2.3案例3——添加缩放效果 224

13.2.4案例4——添加倾斜效果 225

13.2.5案例5——添加综合变幻效果 227

13.3添加3D转换效果 228

13.4大神解惑 230

13.5跟我练练手 230

第14章 CSS3和JavaScript的搭配应用 231

14.1 JavaScript语法基础 232

14.1.1什么是JavaScript 232

14.1.2数据类型 232

14.1.3变量 234

14.1.4案例1——运算符的简单应用 234

14.1.5案例2——流程控制语句的简单应用 237

14.1.6案例3——函数的简单应用 240

14.2常见的JavaScript编写工具 243

14.2.1记事本编写工具 243

14.2.2 Dreamweaver编写工具 244

14.3 JavaScript在HTML中的使用 244

14.3.1案例4——在HTML网页头中嵌入JavaScript代码 245

14.3.2案例5——在HTML网页中嵌入JavaScript代码 246

14.3.3案例6——在HTML网页的元素事件中嵌入JavaScript代码 247

14.3.4案例7——在HTML中调用已经存在的JavaScript文件 248

14.3.5案例8——通过JavaScript伪URL引入JavaScript脚本代码 249

14.4 JavaScript与CSS3的结合使用 250

14.4.1案例9——设置动态内容 250

14.4.2案例10——改变动态样式 251

14.4.3案例11——动态定位网页元素 252

14.4.4案例12——设置网页元素的显示与隐藏 254

14.5 HTML5、CSS3和JavaScript的搭配应用 255

14.5.1案例13——设定左右移动的图片 256

14.5.2案例14——制作颜色选择器 258

14.5.3案例15——制作跑马灯效果 260

14.6综合案例——制作树形导航菜单 262

14.7大神解惑 267

14.8跟我练练手 268

第15章 CSS与XML的综合运用 269

15.1 XML语法基础 270

15.1.1实例1——XML的基本应用 270

15.1.2实例2——XML文档的组成和声明 271

15.1.3实例3——XML元素介绍 272

15.2使用CSS修饰XML文件 274

15.2.1实例4——XML使用CSS 274

15.2.2实例5——设置字体属性 275

15.2.3实例6——设置色彩属性 276

15.2.4实例7——设置边框属性 277

15.2.5实例8——设置文本属性 278

15.3综合实例1——招聘广告 279

15.4综合实例2——图文混排页面 281

15.5综合实例3——古诗欣赏 283

15.6大神解惑 286

15.7跟我练练手 286

第Ⅳ篇 网页布局 289

第16章 CSS定位与DIV布局核心技术 289

16.1认识块级元素和行内级元素 290

16.1.1案例1——块级元素和行内级元素的应用 290

16.1.2案例2——div元素和span元素的区别 292

16.2盒子模型 292

16.2.1盒子模型的概念 293

16.2.2案例3——定义网页border区域 293

16.2.3案例4——定义网页padding区域 295

16.2.4案例5——定义网页margin区域 296

16.3弹性盒模型 299

16.3.1案例6——定义盒子布局方向（box-orient） 300

16.3.2案例7——定义盒子布局顺序（box-direction） 301

16.3.3案例8——定义盒子布局位置（box-ordinal-group） 303

16.3.4案例9——定义盒子弹性空间（box-flex） 304

16.3.5案例10——管理盒子空间（box-pack和box-align） 306

16.3.6案例11——盒子空间的溢出管理（box-lines） 307

16.4综合案例1——图文排版效果 308

16.5综合案例2——淘宝导购菜单 310

16.6大神解惑 313

16.7跟我练练手 314

第17章 CSS＋DIV盒子的浮动与定位 315

17.1定义DIV 316

17.1.1什么是DIV 316

17.1.2案例1——创建DIV 316

17.2盒子的定位 317

17.2.1案例2——静态定位 317

17.2.2案例3——相对定位 318

17.2.3案例4——绝对定位 319

17.2.4案例5——固定定位 320

17.2.5案例6——盒子的浮动 321

17.3其他CSS布局定位方式 323

17.3.1案例7——溢出（overflow）定位 323

17.3.2案例8 ——隐藏（visibility）定位 325

17.3.3案例9 ——z-index空间定位 327

17.4新增CSS3多列布局 328

17.4.1案例10——设置列宽度 328

17.4.2案例11——设置列数 330

17.4.3案例12——设置列间距 331

17.4.4案例13——设置列边框样式 332

17.5综合案例1——定位网页布局样式 334

17.6综合案例2——制作阴影文字效果 337

17.7大神解惑 338

17.8跟我练练手 338

第18章 固定宽度网页布局剖析与制作 339

18.1 CSS排版的观念 340

18.1.1将页面用div分块 340

18.1.2设置各块位置 340

18.1.3案例1——用CSS定位 341

18.2固定宽度网页剖析与布局 344

18.2.1案例2——网页单列布局模式 344

18.2.2案例3——网页“1-2-1”型布局模式 348

18.2.3案例4——网页“1-3-1”型布局模式 350

18.3大神解惑 354

18.4跟我练练手 354

第19章 自动缩放网页布局剖析与制作 355

19.1自动缩放网页“1-2-1”型布局模式 356

19.1.1案例1——“1-2-1”等比例变宽布局 356

19.1.2案例2——“1-2-1”单列变宽布局 357

19.2自动缩放网页“1-3-1”型布局模式 358

19.2.1“1-3-1”三列宽度等比例布局 358

19.2.2案例3——“1-3-1”单侧列宽度固定的变宽布局 358

19.2.3案例4——“1-3-1”中间列宽度固定的变宽布局 361

19.2.4案例5——“1-3-1”双侧列宽度固定的变宽布局 365

19.2.5案例6——“1-3-1”中列和左侧列宽度固定的变宽布局 368

19.3分列布局背景色的使用 371

19.3.1案例7——设置固定宽度布局的列背景色 372

19.3.2案例8——设置特殊宽度变化布局的列背景色 373

19.4综合案例1——单列宽度变化布局 374

19.5综合案例2——多列等比例宽度变化布局 376

19.6大神解惑 378

19.7跟我练练手 378

第20章 创建响应式页面 379

20.1了解弹性盒子 380

20.2案例1——使用弹性盒子 380

20.3案例2——设置弹性子元素的位置 383

20.4案例3——设置弹性子元素的横向对齐方式 384

20.5案例4——设置弹性子元素的纵向对齐方式 389

20.6案例5——设置弹性子元素的换行方式 390

20.7综合案例——使用弹性盒子创建响应式页面 393

20.8大神解惑 395

20.9跟我练练手 396

第Ⅴ篇 项目案例实战 399

第21章 设计商业门户类网页 399

21.1整体设计 400

21.1.1颜色应用分析 400

21.1.2架构布局分析 400

21.2主要模块设计 401

21.2.1网页整体样式插入 401

21.2.2网页局部样式 403

21.2.3顶部模块样式代码分析 410

21.2.4中间主体代码分析 411

21.2.5底部模块分析 414

21.3网站调整 415

21.3.1部分内容调整 415

21.3.2模块调整 415

21.3.3调整后预览测试 417

第22章 设计图像影音类网页 419

22.1整体设计 420

22.1.1颜色应用分析 420

22.1.2架构布局分析 421

22.2主要模块设计 422

22.2.1样式代码分析 422

22.2.2顶部模块样式代码分析 425

22.2.3网站主体模块代码分析 427

22.2.4底部模块分析 430

22.3网站调整 431

22.3.1部分内容调整 431

22.3.2模块调整 432

22.3.3调整后预览测试 435

第23章 设计娱乐休闲类网页 437

23.1整体设计 438

23.1.1应用设计分析 438

23.1.2架构布局分析 439

23.2主要模块设计 440

23.2.1网页整体样式插入 440

23.2.2顶部模块代码分析 441

23.2.3视频模块代码分析 442

23.2.4评论模块代码分析 443

23.2.5热门推荐模块代码分析 444

23.2.6底部模块分析 446

23.3网页调整 446

23.3.1部分内容调整 446

23.3.2调整后预览测试 448

第24章 设计企业门户类网页 449

24.1构思布局 450

24.1.1设计分析 450

24.1.2排版架构 450

24.2主要模块设计 451

24.2.1 Logo与导航菜单 451

24.2.2 Banner区 452

24.2.3资讯区 453

24.2.4版权信息 455

第25章 设计在线购物类网页 457

25.1整体布局 458

25.1.1设计分析 458

25.1.2排版架构 458

25.2主要模块设计 459

25.2.1 Logo与导航区 459

25.2.2 Banner与资讯区 460

25.2.3产品类别区域 462

25.2.4页脚区域 463