CSS3网页样式与布局案例课堂PDF|Epub|txt|kindle电子书版本网盘下载

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

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

第Ⅰ篇 基础入门3

第1章 CSS样式入门3

1.1 认识CSS4

1.1.1 CSS的功能4

1.1.2 浏览器与CSS4

1.1.3 CSS的发展历史5

1.2 CSS常用单位5

1.2.1 颜色单位5

1.2.2 长度单位9

1.3 编辑和浏览CSS10

1.3.1 手工编写CSS10

1.3.2 使用Dreamweaver编写CSS11

1.4 在HTML中调用CSS的方法13

1.4.1 行内样式13

1.4.2 内嵌样式14

1.4.3 链接样式15

1.4.4 导入样式16

1.5 调用方法的优先级17

1.5.1 行内样式和内嵌样式的比较18

1.5.2 内嵌样式和链接样式的比较18

1.5.3 链接样式和导入样式的比较19

1.6 综合案例——制作产品销售统计表20

1.7 大神解惑22

1.8 跟我练练手22

第2章 CSS3样式的基本语法23

2.1 CSS基础语法24

2.1.1 CSS构造规则24

2.1.2 CSS的注释24

2.2 CSS的常用选择器25

2.2.1 标签选择器25

2.2.2 类选择器26

2.2.3 ID选择器27

2.2.4 选择器的声明27

2.3 综合案例——制作炫彩网站Logo28

2.4 大神解惑31

2.5 跟我练练手31

第3章 CSS3的高级特性33

3.1 复合选择器34

3.1.1 全局选择器34

3.1.2 交集选择器35

3.1.3 并集选择器35

3.1.4 继承选择器36

3.2 CSS3新增的选择器37

3.2.1 属性选择器37

3.2.2 结构伪类选择器39

3.2.3 UI元素状态伪类选择器40

3.2.4 伪类选择器42

3.3 CSS的继承特性43

3.3.1 继承关系43

3.3.2 CSS继承的运用44

3.4 CSS的层叠特性45

3.4.1 同一选择器被多次定义的处理45

3.4.2 同一标签运用不同类型选择器的处理46

3.5 综合案例——制作新闻菜单47

3.6 大神解惑49

3.7 跟我练练手50

第Ⅱ篇 核心技术53

第4章 使用CSS3控制网页字体与段落样式53

4.1 通过CSS控制字体样式54

4.1.1 控制字体类型54

4.1.2 定义字体大小55

4.1.3 定义字体风格56

4.1.4 控制文字的粗细57

4.1.5 将小写字母转换为大写字母58

4.1.6 设置字体的复合属性59

4.1.7 定义文字的颜色59

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

4.2.1 添加文本的阴影效果61

4.2.2 设置文本溢出效果62

4.2.3 控制文本的换行63

4.2.4 设置字体尺寸64

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

4.3.1 设置单词之间的间隔65

4.3.2 设置字符之间的间隔66

4.3.3 为文本添加下划线、上划线、删除线67

4.3.4 设置垂直对齐方式68

4.3.5 转换文本的大小写69

4.3.6 设置文本的水平对齐方式70

4.3.7 设置文本的缩进效果72

4.3.8 设置文本的行高73

4.3.9 文本的空白处理74

4.3.10 文本的反排75

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

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

4.6 大神解惑79

4.7 跟我练练手80

第5章 使用CSS控制网页图片样式81

5.1 图片缩放82

5.1.1 通过描述标记width和height缩放图片82

5.1.2 使用CSS3中的max-width和max-height缩放图片82

5.1.3 使用CSS3中的width和height缩放图片83

5.2 设置图片的对齐方式84

5.2.1 设置图片横向对齐84

5.2.2 设置图片纵向对齐85

5.3 图文混排87

5.3.1 设置文字环绕效果87

5.3.2 设置图片与文字的间距88

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

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

5.6 大神解惑94

5.7 跟我练练手94

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

6.1 使用CSS控制网页背景96

6.1.1 设置背景颜色96

6.1.2 设置背景图片97

6.1.3 背景图片重复98

6.1.4 背景图片显示100

6.1.5 背景图片位置101

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

6.2.1 背景图片大小102

6.2.2 背景显示区域104

6.2.3 背景图片裁剪区域105

6.2.4 背景复合属性107

6.3 使用CSS控制边框样式108

6.3.1 设置边框样式108

6.3.2 设置边框颜色109

6.3.3 设置边框线宽110

6.3.4 设置边框复合属性112

6.4 CSS3中新增边框圆角效果113

6.4.1 设置圆角边框113

6.4.2 指定两个圆角半径114

6.4.3 绘制4个不同圆角边框115

6.4.4 绘制不同种类的边框117

6.5 CSS3中的渐变效果119

6.5.1 线性渐变效果119

6.5.2 径向渐变效果121

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

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

6.8 大神解惑127

6.9 跟我练练手128

第7章 使用CSS3美化网页浏览效果129

7.1 使用CSS3美化超链接130

7.1.1 改变超级链接基本样式130

7.1.2 设置带有提示信息的超级链接131

7.1.3 设置超级链接的背景图132

7.1.4 设置超级链接的按钮效果133

7.2 使用CSS3美化鼠标特效134

7.2.1 使用CSS3控制鼠标箭头134

7.2.2 设置鼠标变幻式超链接135

7.2.3 设置网页页面滚动条136

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

7.4 综合案例2——鼠标特效140

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

7.6 大神解惑144

7.7 跟我练练手144

第8章 使用CSS控制表格和表单样式145

8.1 美化表格样式146

8.1.1 设置表格边框样式146

8.1.2 设置表格边框宽度148

8.1.3 设置表格边框颜色149

8.2 美化表单样式150

8.2.1 美化表单中的元素150

8.2.2 美化提交按钮152

8.2.3 美化下拉菜单153

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

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

8.5 大神解惑159

8.6 跟我练练手159

第9章 控制列表和菜单样式161

9.1 美化项目列表的样式162

9.1.1 美化无序列表162

9.1.2 美化有序列表163

9.1.3 美化自定义列表165

9.1.4 制作图片列表166

9.1.5 缩进图片列表167

9.1.6 列表复合属性168

9.2 使用CSS制作网页菜单169

9.2.1 制作无须表格的菜单169

9.2.2 制作水平和垂直菜单171

9.3 综合案例1——模拟soso导航栏173

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

9.5 大神解惑178

9.6 跟我练练手178

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

10.1 滤镜概述180

10.2 设置基本滤镜效果181

10.2.1 高斯模糊滤镜181

10.2.2 明暗度滤镜182

10.2.3 对比度滤镜183

10.2.4 阴影滤镜184

10.2.5 灰度滤镜185

10.2.6 反相滤镜186

10.2.7 透明度滤镜187

10.2.8 饱和度滤镜188

10.2.9 深褐色滤镜189

10.3 使用复合滤镜效果190

10.4 大神解惑191

10.5 跟我练练手192

第Ⅲ篇 网页布局195

第11章 CSS定位与DIV布局核心技术195

11.1 了解块级元素和行内级元素196

11.1.1 块级元素和行内级元素的应用196

11.1.2 div元素和span元素的区别198

11.2 盒子模型198

11.2.1 盒子模型的概念198

11.2.2 定义网页border区域199

11.2.3 定义网页padding区域200

11.2.4 定义网页margin区域201

11.3 弹性盒模型204

11.3.1 定义盒子布局方向205

11.3.2 定义盒子布局顺序206

11.3.3 定义盒子布局位置208

11.3.4 定义盒子弹性空间209

11.3.5 管理盒子空间211

11.3.6 盒子空间的溢出管理213

11.4 综合案例1——图文排版效果214

11.5 综合案例2——淘宝导购菜单217

11.6 大神解惑219

11.7 跟我练练手220

第12章 CSS+DIV盒子的浮动与定位221

12.1 定义DIV222

12.1.1 什么是DIV222

12.1.2 创建DIV222

12.2 盒子的定位223

12.2.1 静态定位223

12.2.2 相对定位224

12.2.3 绝对定位225

12.2.4 固定定位226

12.2.5 盒子的浮动227

12.3 其他CSS布局定位方式229

12.3.1 溢出定位229

12.3.2 隐藏定位231

12.3.3 z-index空间定位233

12.4 新增CSS3多列布局234

12.4.1 设置列宽度234

12.4.2 设置列数236

12.4.3 设置列间距237

12.4.4 设置列边框样式238

12.5 综合案例1——定位网页布局样式240

12.6 综合案例2——制作阴影文字效果243

12.7 大神解惑244

12.8 跟我练练手244

第13章 固定宽度网页布局剖析与制作245

13.1 CSS排版观念246

13.1.1 将页面用div分块246

13.1.2 设置各块位置246

13.1.3 用CSS定位247

13.2 固定宽度网页剖析与布局250

13.2.1 网页单列布局模式250

13.2.2 网页1-2-1型布局模式254

13.2.3 网页1-3-1型布局模式258

13.3 大神解惑261

13.4 跟我练练手262

第14章 自动缩放网页布局剖析与制作263

14.1 自动缩放网页1-2-1型布局模式264

14.1.1 “1-2-1”等比例变宽布局264

14.1.2 “1-2-1”单列变宽布局265

14.2 自动缩放网页1-3-1型布局模式266

14.2.1 “1-3-1”三列宽度等比例布局266

14.2.2 “1-3-1”单侧列宽度固定的变宽布局266

14.2.3 “1-3-1”中间列宽度固定的变宽布局270

14.2.4 “1-3-1”双侧列宽度固定的变宽布局273

14.2.5 “1-3-1”中列和左侧列宽度固定的变宽布局277

14.3 分列布局背景色的使用280

14.3.1 设置固定宽度布局的列背景色280

14.3.2 设置特殊宽度变化布局的列背景色282

14.4 综合案例1——单列宽度变化布局284

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

14.6 大神解惑288

14.7 跟我练练手288

第Ⅳ篇 高级技能291

第15章 过渡和动画效果291

15.1 了解过渡效果292

15.2 添加过渡效果292

15.3 了解动画效果295

15.4 添加动画效果296

15.5 大神解惑297

15.6 跟我练练手298

第16章 2D和3D效果299

16.1 了解2D转换效果300

16.2 添加2D转换效果300

16.2.1 添加2D移动效果300

16.2.2 添加2D旋转效果301

16.2.3 添加2D缩放效果302

16.2.4 添加2D倾斜效果303

16.2.5 添加综合变幻效果304

16.3 添加3D转换效果305

16.4 大神解惑308

16.5 跟我练练手308

第17章 创建响应式页面309

17.1 了解弹性盒子310

17.2 使用弹性盒子310

17.3 设置弹性子元素的位置313

17.4 设置弹性子元素的横向对齐方式314

17.5 设置弹性子元素的纵向对齐方式319

17.6 设置弹性子元素的换行方式321

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

17.8 大神解惑325

17.9 跟我练练手326

第Ⅴ篇 综合案例329

第18章 商业门户类网站赏析329

18.1 整体设计330

18.1.1 颜色应用分析330

18.1.2 架构布局分析331

18.2 主要模块设计331

18.2.1 网页整体样式插入331

18.2.2 网页局部样式333

18.2.3 顶部模块样式代码分析340

18.2.4 中间主体代码分析341

18.2.5 底部模块分析344

18.3 网站调整345

18.3.1 部分内容调整345

18.3.2 模块调整345

18.3.3 调整后预览测试347

第19章 设计在线购物类网页349

19.1 整体布局350

19.1.1 设计分析350

19.1.2 排版架构350

19.2 主要模块设计351

19.2.1 Logo与导航区351

19.2.2 Banner与资讯区353

19.2.3 产品类别区域354

19.2.4 页脚区域355

第20章 设计企业门户类网页357

20.1 构思布局358

20.1.1 设计分析358

20.1.2 排版架构358

20.2 主要模块设计359

20.2.1 Logo与导航菜单359

20.2.2 Banner区360

20.2.3 资讯区361

20.2.4 版权信息363

第21章 设计娱乐休闲类网页365

21.1 整体设计366

21.1.1 应用设计分析366

21.1.2 架构布局分析367

21.2 主要模块设计368

21.2.1 网页整体样式插入368

21.2.2 顶部模块代码分析369

21.2.3 视频模块代码分析370

21.2.4 评论模块代码分析371

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

21.2.6 底部模块分析375

21.3 网页调整376

21.3.1 部分内容调整376

21.3.2 调整后预览测试377

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

22.1 整体设计380

22.1.1 颜色应用分析380

22.1.2 架构布局分析381

22.2 主要模块设计382

22.2.1 样式代码分析382

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

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

22.2.4 底部模块分析391

22.3 网站调整392

22.3.1 部分内容调整392

22.3.2 模块调整392

22.3.3 调整后预览测试395