CSS3+DIV网页样式与布局案例课堂【2025|PDF下载-Epub版本|mobi电子书|kindle百度云盘下载】

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

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

第1章 制作网页的准备工作1

1.1 认识网页和网站2

1.1.1 什么是网页2

1.1.2 什么是网站3

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

1.2.1 需要HTML文件3

1.2.2 需要DIV层4

1.2.3 需要CSS定义的网页样式4

1.2.4 需要JavaScript设置网页动画5

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

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

1.3.1 head部分6

1.3.2 body部分6

1.3.3 注释部分7

1.4 制作网页的总体流程8

1.4.1 网页规划8

1.4.2 搜集资料8

1.4.3 使用Photoshop设计网页的总体效果9

1.4.4 通过切图，得到网页素材文件9

1.4.5 搭建网页DIV层10

1.4.6 定义CSS和JavaScript效果11

1.4.7 测试网页11

1.5 网站种类与网页布局方式12

1.5.1 网站的种类12

1.5.2 网页布局方式13

1.6 综合示例——在Photoshop CS6中构建网页结构15

1.7 上机练习——使用Photoshop制作纵向导航条16

1.8 专家答疑18

第2章 网页实现技术——HTML 521

2.1 HTML5的基本概念22

2.1.1 HTML5简介22

2.1.2 HTML 5文件的基本结构22

2.1.3 认识HTML5标记23

2.2 HTML 5文件的编写方法23

2.2.1 使用记事本手工编写HTML文件24

2.2.2 使用Dreamweaver CS6编写HTML文件24

2.3 HTML5的基本标记27

2.3.1 字符标记27

2.3.2 超级链接标记28

2.3.3 列表标记30

2.3.4 制作纯文本网页31

2.4 HTML5的段落和图片标记32

2.4.1 常用段落和图片标记32

2.4.2 文字和图片混合排版33

2.5 HTML5的表单标记34

2.5.1 常用的表单控件34

2.5.2 多行文本标记和下拉列表36

2.5.3 用户注册页面37

2.6 HTML5的表格标记38

2.6.1 表格标记38

2.6.2 制作季度报表40

2.7 综合示例——制作网站首页41

2.8 上机练习——简单的HTML5网页45

2.9 专家答疑45

第3章 CSS 3样式入门47

3.1 CSS概述48

3.1.1 CSS的功能48

3.1.2 浏览器与CSS48

3.1.3 CSS的发展历史49

3.2 CSS 3的常用单位49

3.2.1 颜色单位49

3.2.2 长度单位53

3.3 编辑和浏览CSS54

3.3.1 手工编写CSS54

3.3.2 用Dreamweaver编写CSS55

3.4 在HTML5中调用CSS的方法56

3.4.1 行内样式56

3.4.2 内嵌样式57

3.4.3 链接样式59

3.4.4 导入样式60

3.5 调用方法的优先级问题61

3.5.1 行内样式和内嵌样式比较61

3.5.2 内嵌样式和链接样式比较62

3.5.3 链接样式和导入样式62

3.6 综合示例——制作学生信息统计表63

3.7 专家答疑65

第4章 CSS样式的基本语法67

4.1 CSS基础语法68

4.1.1 CSS构造规则68

4.1.2 CSS的注释68

4.2 CSS的常用选择器69

4.2.1 标签选择器69

4.2.2 类选择器70

4.2.3 ID选择器71

4.2.4 选择器的声明71

4.3 综合示例——制作炫彩网站Logo72

4.4 专家答疑75

第5章 CSS 3的高级特性77

5.1 复合选择器78

5.1.1 全局选择器78

5.1.2 “交集”选择器79

5.1.3 “并集”选择器79

5.1.4 继承（后代）选择器80

5.2 CSS 3新增的选择器81

5.2.1 属性选择器81

5.2.2 结构伪类选择器83

5.2.3 UI元素状态伪类选择器84

5.2.4 伪类选择器86

5.3 CSS的继承特性87

5.3.1 继承关系87

5.3.2 CSS继承的运用88

5.4 CSS的层叠特性89

5.4.1 同一选择器被多次定义的处理89

5.4.2 同一标签运用不同类型选择器的处理90

5.5 综合示例——制作新闻菜单91

5.6 专家答疑94

第6章 使用CSS 3控制网页字体与段落的样式95

6.1 通过CSS控制字体样式96

6.1.1 控制字体类型96

6.1.2 定义字体大小97

6.1.3 定义字体风格98

6.1.4 控制文字的粗细99

6.1.5 将小写字母转为大写字母100

6.1.6 设置字体的复合属性101

6.1.7 定义文字的颜色102

6.2 CSS 3中新增的文本高级样式103

6.2.1 添加文本的阴影效果103

6.2.2 设置文本的溢出效果104

6.2.3 控制文本的换行105

6.2.4 设置字体尺寸106

6.3 通过CSS控制文本间距与对齐方式107

6.3.1 设置单词之间的间隔108

6.3.2 设置字符之间的间隔108

6.3.3 为文本添加下划线、上划线、删除线109

6.3.4 设置垂直对齐方式110

6.3.5 转换文本的大小写112

6.3.6 设置文本的水平对齐方式113

6.3.7 设置文本的缩进效果115

6.3.8 设置文本的行高116

6.3.9 文本的空白处理116

6.3.10 文本的反排118

6.4 综合示例——设置网页标题119

6.5 上机练习——制作新闻页面121

6.6 专家答疑122

第7章 使用CSS控制网页图片的样式123

7.1 图片缩放124

7.1.1 通过描述标记width和height来缩放图片124

7.1.2 使用CSS 3中的max-width和max-height缩放图片124

7.1.3 使用CSS 3中的width和height缩放图片125

7.2 设置图片的对齐方式126

7.2.1 设置图片横向对齐126

7.2.2 设置图片纵向对齐127

7.3 图文混排129

7.3.1 设置文字的环绕效果129

7.3.2 设置图片与文字的间距130

7.4 综合示例——制作学校宣传单132

7.5 上机练习——制作简单的图文混排网页134

7.6 专家答疑135

第8章 使用CSS控制网页背景与边框样式137

8.1 使用CSS控制网页背景138

8.1.1 设置背景颜色138

8.1.2 设置背景图片139

8.1.3 背景图片的重复140

8.1.4 背景图片的显示142

8.1.5 背景图片的位置143

8.2 CSS 3中新增的控制网页背景的属性145

8.2.1 背景图片大小145

8.2.2 背景显示区域146

8.2.3 背景图像的裁剪区域148

8.2.4 背景复合属性149

8.3 使用CSS控制边框样式150

8.3.1 设置边框的样式150

8.3.2 设置边框的颜色152

8.3.3 设置边框的线宽153

8.3.4 设置边框的复合属性155

8.4 CSS 3中新增的边框圆角效果155

8.4.1 设置圆角边框156

8.4.2 指定两个圆角半径156

8.4.3 绘制四个角的圆角边框157

8.4.4 绘制不同种类的边框159

8.5 综合示例——制作简单的公司主页161

8.6 上机练习——制作简单的生活资讯主页164

8.7 专家答疑165

第9章 使用CSS 3美化网页浏览效果167

9.1 使用CSS 3美化超链接168

9.1.1 改变超级链接的基本样式168

9.1.2 设置带有提示信息的超级链接169

9.1.3 设置超级链接的背景图170

9.1.4 设置超级链接的按钮效果171

9.2 使用CSS 3美化鼠标特效172

9.2.1 使用CSS 3控制鼠标箭头172

9.2.2 设置鼠标变换式超链接174

9.2.3 设置网页页面滚动条175

9.3 综合示例1——图片版本的超级链接177

9.4 综合示例2——关于鼠标特效178

9.5 上机练习——制作一个简单的导航栏181

9.6 专家答疑182

第10章 使用CSS控制表格和表单的样式185

10.1 美化表格样式186

10.1.1 设置表格边框的样式186

10.1.2 设置表格边框的宽度188

10.1.3 设置表格边框的颜色189

10.2 美化表单样式190

10.2.1 美化表单中的元素190

10.2.2 美化提交按钮192

10.2.3 美化下拉菜单193

10.3 综合示例——制作用户登录页面195

10.4 上机练习——制作用户注册页面197

10.5 专家答疑199

第11章 使用CSS控制列表样式201

11.1 使用CSS控制项目列表202

11.1.1 美化无序列表202

11.1.2 美化有序列表203

11.1.3 美化自定义列表205

11.1.4 制作图片列表206

11.1.5 缩进图片列表207

11.1.6 列表复合属性209

11.2 使用CSS制作网页菜单210

11.2.1 制作无需表格的菜单210

11.2.2 制作水平和垂直菜单212

11.3 综合示例——模拟soso导航栏214

11.4 上机练习——将段落转变成列表217

11.5 专家答疑219

第12章 使用CSS 3滤镜美化网页元素221

12.1 滤镜概述222

12.2 基本滤镜222

12.2.1 通道（Alpha）滤镜223

12.2.2 模糊（Blur）滤镜225

12.2.3 色彩（Chroma）滤镜226

12.2.4 投影（DropShadow）滤镜227

12.2.5 水平翻转（FlipH）滤镜229

12.2.6 垂直翻转（FlipV）滤镜229

12.2.7 光晕（Glow）滤镜230

12.2.8 灰度（Gray）滤镜231

12.2.9 反相（Invert）滤镜232

12.2.10 遮罩（Mask）滤镜233

12.2.11 波浪（Wave）滤镜233

12.2.12 阴影（Shadow）滤镜235

12.2.13 X-ray滤镜236

12.3 高级滤镜236

12.3.1 光照（Light）滤镜237

12.3.2 渐隐（BlendTrans）滤镜238

12.3.3 切换（RevealTrans）滤镜240

12.4 专家答疑241

第13章 CSS定位与DIV布局核心技术243

13.1 了解块级元素和行内级元素244

13.1.1 块级元素和行内级元素的应用244

13.1.2 div元素和span元素的区别246

13.2 盒子模型247

13.2.1 盒子模型的概念247

13.2.2 定义网页的border区域247

13.2.3 定义网页的padding区域249

13.2.4 定义网页的margin区域250

13.3 CSS 3新增的弹性盒模型253

13.3.1 定义盒子的布局取向（box-orient）254

13.3.2 定义盒子布局的顺序（box-direction）255

13.3.3 定义盒子布局的位置（box-ordinal-group）257

13.3.4 定义盒子的弹性空间（box-flex）258

13.3.5 管理盒子的空间（box-pack和box-align）260

13.3.6 盒子空间的溢出管理（box-lines）262

13.4 综合示例——图文排版效果263

13.5 上机练习——淘宝导购菜单265

13.6 专家解惑268

第14章 CSS+DIV盒子的浮动与定位269

14.1 定义DIV270

14.1.1 什么是DIV270

14.1.2 创建DIV270

14.2 盒子的定位271

14.2.1 静态定位271

14.2.2 相对定位272

14.2.3 绝对定位273

14.2.4 固定定位274

14.2.5 盒子的浮动275

14.3 其他CSS布局定位方式277

14.3.1 溢出（overflow）定位277

14.3.2 隐藏（visibility）定位279

14.3.3 z-index空间定位280

14.4 新增的CSS 3多列布局282

14.4.1 设置列宽度282

14.4.2 设置列数283

14.4.3 设置列间距285

14.4.4 设置列边框样式286

14.5 综合示例——定位网页的布局样式288

14.6 上机练习——制作阴影文字效果291

14.7 专家答疑292

第15章 固定宽度网页布局的剖析与制作293

15.1 CSS的排版观念294

15.1.1 将页面用DIV分块294

15.1.2 设置各块的位置294

15.1.3 用CSS定位295

15.2 固定宽度网页剖析与布局299

15.2.1 网页单列布局模式299

15.2.2 网页1-2-1型布局模式303

15.2.3 网页1-3-1型布局模式305

15.3 专家答疑309

第16章 自动缩放网页布局的剖析与制作311

16.1 自动缩放网页1-2-1型布局模式312

16.1.1 网页1-2-1等比例变宽布局312

16.1.2 网页1-2-1单列变宽布局313

16.2 自动缩放网页1-3-1型布局模式314

16.2.1 网页1-3-1三列宽度等比例布局314

16.2.2 网页1-3-1单侧列宽度固定的变宽布局314

16.2.3 网页1-3-1中间列宽度固定的变宽布局317

16.2.4 网页1-3-1双侧列宽度固定的变宽布局320

16.2.5 网页1-3-1中列和左侧列宽度固定的变宽布局324

16.3 分列布局背景色的使用327

16.3.1 设置固定宽度布局的列背景色327

16.3.2 设置特殊宽度变化布局的列背景色329

16.4 综合案例——单列宽度变化布局330

16.5 上机练习——多列等比例宽度变化布局332

16.6 专家答疑334

第17章 CSS 3和JavaScript的搭配应用335

17.1 JavaScript的语法基础336

17.1.1 什么是JavaScript336

17.1.2 数据类型336

17.1.3 变量338

17.1.4 运算符的简单应用338

17.1.5 流程控制语句的简单应用341

17.1.6 函数的简单应用344

17.2 常见的JavaScript编写工具347

17.2.1 记事本工具347

17.2.2 Dreamweaver348

17.3 JavaScript在HTML中的使用349

17.3.1 在HTML网页头中嵌入JavaScript代码349

17.3.2 在HTML网页中嵌入JavaScript代码350

17.3.3 在HTML网页元素的事件中嵌入JavaScript代码351

17.3.4 在HTML中调用已经存在的JavaScript文件352

17.3.5 通过JavaScript伪URL引入JavaScript脚本代码353

17.4 JavaScript与CSS 3的结合使用354

17.4.1 设置动态内容354

17.4.2 改变动态样式355

17.4.3 动态定位网页元素357

17.4.4 设置网页元素的显示与隐藏359

17.5 HTML 5、CSS 3和JavaScript的搭配应用360

17.5.1 设定左右移动的图片360

17.5.2 制作颜色选择器363

17.5.3 制作跑马灯效果365

17.6 综合示例——制作树形导航菜单366

17.7 上机练习——制作滚动的菜单371

17.8 专家答疑373

第18章 CSS与XML的综合运用375

18.1 XML语法基础376

18.1.1 XML的基本应用376

18.1.2 XML文档的组成和声明377

18.1.3 XML元素介绍379

18.2 用CSS修饰XML文件381

18.2.1 XML使用CSS381

18.2.2 设置字型属性382

18.2.3 设置色彩属性383

18.2.4 设置边框属性384

18.2.5 设置文本属性385

18.3 综合示例1——招聘广告387

18.4 综合示例2——图文混排页面389

18.5 上机练习——古诗欣赏391

18.6 专家答疑394

第19章 CSS与Ajax的综合应用395

19.1 Ajax概述396

19.1.1 什么是Ajax396

19.1.2 Ajax的关键元素398

19.1.3 CSS在Aiax应用中的地位399

19.2 Ajax快速入门400

19.2.1 全面剖析XMLHttpRequest对象400

19.2.2 发出Ajax请求402

19.2.3 处理服务器响应403

19.3 综合示例——制作自由拖动的网页405

19.4 上机练习——制作加载条410

19.5 专家答疑411

第20章 商业门户类网站赏析413

20.1 整体设计414

20.1.1 颜色应用分析414

20.1.2 架构布局分析415

20.2 主要模块设计416

20.2.1 网页整体样式插入416

20.2.2 网页局部的样式417

20.2.3 顶部模块样式代码分析427

20.2.4 中间主体代码分析428

20.2.5 底部模块分析432

20.3 网站调整432

20.3.1 部分内容调整432

20.3.2 模块调整433

20.3.3 调整后预览测试435

第21章 制作娱乐休闲类网页437

21.1 整体设计438

21.1.1 应用设计分析438

21.1.2 架构布局分析439

21.2 主要模块设计440

21.2.1 网页整体样式插入440

21.2.2 顶部模块代码分析441

21.2.3 视频模块代码分析442

21.2.4 评论模块代码分析444

21.2.5 热门推荐模块代码分析445

21.2.6 底部模块分析447

21.3 网页调整448

21.3.1 部分内容调整448

21.3.2 调整后预览测试449

第22章 制作图像影音类网页451

22.1 整体设计452

22.1.1 颜色应用分析452

22.1.2 架构布局分析452

22.2 主要模块设计454

22.2.1 样式代码分析454

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

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

22.2.4 底部模块分析468

22.3 网站调整469

22.3.1 部分内容调整469

22.3.2 模块调整470

22.3.3 调整后预览测试476

第23章 制作企业门户类网页477

23.1 构思布局478

23.1.1 设计分析478

23.1.2 排版架构478

23.2 主要模块设计479

23.2.1 Logo与导航菜单479

23.2.2 Banner区481

23.2.3 资讯区481

23.2.4 版权信息484

第24章 制作在线购物类网页487

24.1 整体布局488

24.1.1 设计分析488

24.1.2 排版架构488

24.2 主要模块设计489

24.2.1 Logo与导航区489

24.2.2 Banner与资讯区491

24.2.3 产品类别区域492

24.2.4 页脚区域494