CSS3+DIV网页样式与布局（全案例微课版）

第1章　网页设计需要学什么   001
1.1　认识网页和网站   002
1.1.1　认识网页    002
1.1.2　认识网站    003
1.2　网页设计需要的技术   004
1.2.1　HTML   004
1.2.2　DIV布局     005
1.2.3　CSS样式     005
1.2.4　脚本语言JavaScript     006
1.3　网页文档的基本结构   007
1.3.1　制作个网页   007
1.3.2　文档类型说明     008
1.3.3　html标签     008
1.3.4　头部标签     008
1.3.5　主体标签     008
1.3.6　注释标签     009
1.4　网页设计的流程   009
1.4.1　网站规划     010
1.4.2　搜集资料     010
1.4.3　设计网页结构      010
1.4.4　获取网页素材      011
1.4.5　搭建网页DIV层   012
1.4.6　设计网页效果      013
1.4.7　测试网页     013
第2章　网页实现技术——HTML5   015
2.1　HTML5中的常用标签  016
2.1.1　基础标签的应用   016
2.1.2　文本格式标签     017
2.1.3　超级链接标签     017
2.1.4　列表标签的应用   018
2.2　HTML5中的图像标签  019
2.2.1　插入并编辑网页中的图像   020
2.2.2　定义图像热点区域     021
2.2.3　绘制网页图形图像     022
2.3　HTML5中的表单标签  023
2.3.1　文本类输入框     024
2.3.2　按钮类输入框     025
2.3.3　网页中的按钮     026
2.3.4　图像域和文件域   027
2.3.5　设置表单中的列表     028
2.3.6　表单常用属性的应用    029
2.4　HTML5中的表格标签  030
2.4.1　表格的基本结构    030
2.4.2　使用属性编辑表格      031
2.4.3　完整的表格标签    033
2.5　HTML5中的多媒体标签    034
2.5.1　audio标签的应用   034
2.5.2　在网页中添加音频文件  035
2.5.3　认识video标签     036
2.5.4　在网页中添加视频文件  037
2.6 标签    039
2.7　标签      040
2.8　新手常见疑难问题     041
2.9 实战技能训练营   041
第3章　初始CSS3层叠样式表  042
3.1 CSS概述   043
3.1.1　CSS的功能介绍    043
3.1.2　CSS的发展历史    043
3.1.3　CSS的构造规则    044
3.1.4　CSS的注释   044
3.2 CSS中的常用单位    045
3.2.1　颜色单位     045
3.2.2　长度单位     048
3.3 创建和编辑CSS 文件  049
3.4 在HTML5 中调用CSS 的方法    051
3.4.1　行内样式     051
3.4.2　内嵌样式     052
3.4.3　链接样式     053
3.4.4　导入样式      054
3.5 调用方法的优先级     055
3.5.1　行内样式和内嵌样式比较     055
3.5.2　内嵌样式和链接样式比较     055
3.5.3　链接样式和导入样式     056
3.6　新手常见疑难问题     057
3.7　实战技能训练营   057
第4 章 CSS3 选择器的特性及应用    058
4.1　认识CSS 选择器      059
4.2　选择器的应用     059
4.2.1　标签选择器   059
4.2.2　类选择器     061
4.2.3　ID 选择器     062
4.2.4　全局选择器   063
4.2.5　组合选择器   063
4.2.6　继承选择器   064
4.2.7　伪类选择器   065
4.2.8　属性选择器   066
4.2.9　结构伪类选择器    067
4.2.10　UI 元素状态伪类选择器     068
4.3 选择器声明       069
4.3.1　集体声明      069
4.3.2　多重嵌套声明       070
4.4　CSS3 的继承特性     070
4.4.1　继承关系      070
4.4.2　CSS 继承的运用     071
4.5 CSS3 的层叠特性     072
4.5.1　同一选择器被多次定义的处理      072
4.5.2　同一标签运用不同类型选择器的处理   072
4.6　新手常见疑难问题     073
4.7　实战技能训练营   073
第5 章 使用CSS3 设计字体与文本样式    074
5.1 设置字体样式     075
5.1.1　控制字体类型      075
5.1.2　定义字体大小      076
5.1.3　定义字体风格      077
5.1.4　控制文字的粗细    077
5.1.5　将小写字母转换为大写字母  078
5.1.6　设置字体的复合属性    079
5.1.7　定义文字的颜色    080
5.2　设置文本的高级样式   081
5.2.1　添加文本的阴影效果    081
5.2.2　设置文本溢出效果      082
5.2.3　控制文本的换行    082
5.2.4　设置字体尺寸      083
5.3　设置文本间距与对齐方式   084
5.3.1　设置单词之间的间隔     084
5.3.2　设置字符之间的间隔     085
5.3.3　为文本添加装饰线       086
5.3.4　设置垂直对齐方式       086
5.3.5　转换文本的大小写       088
5.3.6　设置文本的水平对齐方式     088
5.3.7　设置文本的缩进效果     090
5.3.8　设置文本的行间距       090
5.3.9　文本的空白处理     091
5.3.10　文本的反排     092
5.4　新手常见疑难问题     093
5.5　实战技能训练营   093
第6 章　使用CSS3 设计图片与边框样式    095
6.1 图片样式基础     096
6.1.1　图片大小     096
6.1.2　图片对齐     097
6.1.3　文字环绕图片       099
6.1.4　图片与文字的间距       100
6.2　边框样式基础     101
6.2.1　边框样式     101
6.2.2　边框颜色     103
6.2.3　边框线宽     104
6.2.4　边框复合属性      105
6.3　圆角边框样式     106
6.3.1　定义圆角边框      106
6.3.2　指定两个圆角半径      107
6.3.3　绘制四个不同圆角的边框    107
6.3.4　绘制不同种类的边框    108
6.4 新手常见疑难问题     110
6.5 实战技能训练营   110
第7 章 使用CSS3 控制网页背景样式   111
7.1　背景样式基础     112
7.1.1　设置背景颜色      112
7.1.2　网页板块配色      113
7.1.3　设置背景图像      114
7.1.4　平铺背景图像      115
7.1.5　固定背景图像      116
7.1.6　定位背景图像      117
7.2　新增控制背景属性     119
7.2.1　背景图像大小      119
7.2.2　背景显示区域      120
7.2.3　裁剪背景图像      121
7.2.4　背景复合属性      122
7.3　网页背景渐变效果     123
7.3.1　线性渐变效果      123
7.3.2　径向渐变效果      124
7.4 新手常见疑难问题     125
7.5 实战技能训练营   126
第8 章 使用CSS3 定义链接和鼠标样式    127
8.1　链接样式基础     128
8.1.1　设置链接样式      128
8.1.2　定义下划线样式    130
8.1.3　定义链接背景图    131
8.1.4　定义链接提示信息      132
8.1.5　定义链接按钮      133
8.2　定义鼠标指针特效     134
8.2.1　鼠标样式基础      134
8.2.2　变幻鼠标光标      137
8.2.3　定义滚动条样式    138
8.3 新手常见疑难问题     139
8.4　实战技能训练营   140
第9 章　使用CSS3 设计表格样式     141
9.1　表格样式基础     142
9.1.1　设置表格颜色      142
9.1.2　设置表格边框      143
9.1.3　设置表格边框宽度      144
9.1.4　设置表格边框颜色      145
9.1.5　设置表格标题的位置    145
9.1.6　隐藏空单元格      146
9.1.7　设置单元格的边距      147
9.2　设置悬浮变色的表格   148
9.3　使用表格布局网页     151
9.4　新手常见疑难问题     153
9.5　实战技能训练营   153
第10 章　使用CSS3 设计表单样式    154
10.1　表单样式基础    155
10.1.1　表单字体样式     155
10.1.2　表单边框样式     156
10.1.3　表单背景样式     157
10.1.4　设计表单按钮样式     158
10.1.5　设计下拉菜单样式     159
10.2　制作用户登录页面    160
10.3　制作用户注册页面    161
10.4　新手常见疑难问题    162
10.5 实战技能训练营      163
第11 章　使用CSS3 设计列表与菜单样式   164
11.1 项目列表样式    165
11.1.1　无序项目列表      165
11.1.2　有序项目列表      166
11.1.3　自定义项目列表    167
11.1.4　图片列表样式      168
11.1.5　设置图片列表的位置    169
11.1.6　列表复合属性的应用    170
11.1.7　将段落转变成列表      171
11.2　菜单样式基础    172
11.2.1　制作动态导航菜单      172
11.2.2　制作水平方向菜单      173
11.2.3　制作多级菜单列表      175
11.2.4　模拟制作SOSO 导航栏     177
11.3　新手常见疑难问题    179
11.4　实战技能训练营      179
第12 章　使用CSS3 滤镜设计网页图片特效     180
12.1　CSS3 中的滤镜      181
12.2　设置基本滤镜效果    182
12.2.1　高斯模糊（blur）滤镜      182
12.2.2　明暗度（brightness）滤镜   183
12.2.3　对比度（contrast）滤镜     183
12.2.4　阴影（drop-shadow）滤镜   184
12.2.5　灰度（grayscale）滤镜      185
12.2.6　反相（invert）滤镜     185
12.2.7　透明度（opacity）滤镜      186
12.2.8　饱和度（saturate）滤镜     187
12.2.9　深褐色（sepia）滤镜   188
12.2.10　使用复合滤镜效果    188
12.3　新手常见疑难问题    189
12.4　实战技能训练营      189
第13 章 使用CSS3 设计动画效果    191
13.1　2D 转换动画效果     192
13.1.1　添加2D 移动效果      192
13.1.2　添加2D 旋转效果      193
13.1.3　添加2D 缩放效果      194
13.1.4　添加2D 倾斜效果      195
13.1.5　添加2D 综合变换效果      196
13.2　3D 转换动画效果     197
13.2.1　添加3D 移动效果      197
13.2.2　添加3D 旋转效果      200
13.2.3　添加3D 缩放效果      202
13.3　设计过渡动画效果    204
13.3.1　设置过渡属性     204
13.3.2　设置过渡时间     205
13.3.3　设置延迟时间     206
13.3.4　设置过渡动画类型     207
13.4　设计帧动画效果      208
13.4.1　设置关键帧    208
13.4.2　设置动画属性     210
13.5　新手常见疑难问题    212
13.6　实战技能训练营      213
第14 章 使用CSS 中的盒子模型     214
14.1 块级元素与行内级元素    215
14.1.1 块级元素的应用   215
14.1.2 行内元素的应用   216
14.2 盒子模型  216
14.2.1 定义盒子边界     217
14.2.2 定义盒子边框     219
14.2.3 定义盒子补白     220
14.2.4 定义盒子大小     221
14.3 CSS3 新增的盒子模型属性      222
14.3.1 定义盒子的布局方向   223
14.3.2 定义盒子的布局顺序   224
14.3.3 定义盒子的布局位置   225
14.3.4 定义盒子的显示空间   226
14.3.5 管理盒子空间的大小   227
14.3.6 盒子空间的溢出管理   228
14.4 弹性盒子模型    229
14.4.1 使用弹性盒子     229
14.4.2 设置弹性子元素的位置     231
14.4.3 设置弹性子元素的横向对齐方式  231
14.4.4 设置弹性子元素的纵向对齐方式  233
14.4.5 设置弹性子元素的换行方式      234
14.5 新手常见疑难问题    235
14.6 实战技能训练营      236
第15 章 CSS DIV 布局的浮动与定位   237
15.1 定义DIV   238
15.1.1 什么是DIV    238
15.1.2 创建DIV    238
15.2 网页元素的定位      238
15.2.1 静态定位    239
15.2.2 相对定位    239
15.2.3 定位    240
15.2.4 固定定位    241
15.2.5 浮动定位    241
15.3 其他CSS 布局定位方式   242
15.3.1 溢出（overflow）定位      243
15.3.2 隐藏（visibility）定位      244
15.3.3 z-index 空间定位    245
15.4 新增CSS3 多列布局  245
15.4.1 设置列宽度     246
15.4.2 设置列数     246
15.4.3 设置列间距     247
15.4.4 设置列边框样式    248
15.5 新手常见疑难问题    250
15.6 实战技能训练营      250
第16 章 使用CSS3 布局网页版式    251
16.1 认识CSS3 布局版式  252
16.1.1 将页面用DIV 分块     252
16.1.2 设置各块位置     252
16.1.3 用CSS 定位版式       253
16.2 固定宽度网页布局模式    255
16.2.1 网页单列布局模式     255
16.2.2 网页1-2-1 型布局模式      258
16.2.3 网页1-3-1 型布局模式      260
16.3 自动缩放网页布局模式    262
16.3.1 1-2-1 等比例变宽布局   262
16.3.2 1-2-1 单列变宽布局     262
16.3.3 1-3-1 单侧列宽度固定布局   263
16.3.4 1-3-1 中间列宽度固定布局   265
16.3.5 1-3-1 双侧列宽度固定布局   267
16.3.6 1-3-1 中列和左侧列宽度固定布局     269
16.4 新手常见疑难问题    271
16.5 实战技能训练营      271
第17 章 设计可响应式的移动网页     273
17.1 什么是响应式网页设计    274
17.2 像素和屏幕分辨率    275
17.3 视口      275
17.3.1 视口的分类和常用属性     275
17.3.2 媒体查询    276
17.4 设计响应式网页的布局    277
17.4.1 常用布局类型     277
17.4.2 布局的实现方式   277
17.4.3 响应式布局的设计与实现   278
17.5 设计响应式图片      279
17.5.1 使用 标签     279
17.5.2 使用CSS 图片     280
17.6 设计响应式视频      281
17.7 设计响应式导航菜单  282
17.8 设计响应式表格      284
17.8.1 隐藏表格中的列    284
17.8.2 滚动表格中的列    285
17.8.3 转换表格中的列    286
17.9 新手常见疑难问题    288
17.10 实战技能训练营     289
第18 章 使用JavaScript 控制CSS3 样式     290
18.1 JavaScript 语法基础  291 
18.1.1 什么是JavaScript       291
18.1.2 数据类型    291
18.1.3 变量    292
18.1.4 运算符      293
18.1.5 流程控制语句     295
18.1.6 JavaScript 中的函数     297
18.2 常见的JavaScript 编写工具     299
18.2.1 记事本编写工具   299
18.2.2 Dreamweaver 编写工具      300
18.3 JavaScript 在HTML 中的使用    300
18.3.1 在HTML 网页头中嵌入JavaScript代码    301
18.3.2 在HTML 网页中嵌入JavaScript代码    301
18.3.3 在HTML 网页的元素事件中嵌入JavaScript代码    302
18.3.4 在HTML 中调用JavaScript 文件   303
18.3.5 通过JavaScript 伪URL 引入JavaScript脚本代码    303
18.4 JavaScript 与CSS3 的结合使用  304
18.4.1 动态改变网页元素     304
18.4.2 改变网页元素的动态样式   305
18.4.3 动态定位网页元素     306
18.4.4 设置网页元素的显示与隐藏      307
18.5 HTML5、CSS3 和JavaScript 的搭配应用      308
18.5.1 设定左右移动的图片   308
18.5.2 制作背景颜色选择器   310
18.5.3 制作文字跑马灯效果   312
18.6 新手常见疑难问题    313
18.7 实战技能训练营      314
第19 章 使用CSS 设计XML 文档样式    315
19.1 XML 语法基础   316
19.1.1 XML 的基本应用       316
19.1.2 XML 文档的组成和声明     317
19.1.3 XML 元素介绍     318
19.2 CSS 修饰XML 文件  319
19.2.1 在XML 中使用CSS   320
19.2.2 设置字体属性     320
19.2.3 设置色彩属性     321
19.2.4 设置边框属性     322
19.2.5 设置文本属性     322
19.3 新手常见疑难问题    323
19.4 实战技能训练营      323
第20 章 流行的响应式开发框架Bootstrap  325
20.1 Bootstrap 概述   326
20.1.1 Bootstrap 的特色    326
20.1.2 Bootstrap 4 的重大更新      326
20.2 下载与安装Bootstrap     327
20.2.1 下载Bootstrap      327
20.2.2 安装Bootstrap      329
20.2.3 使用Bootstrap      329
20.3 使用常用组件    330
20.3.1 使用下拉菜单     330
20.3.2 使用按钮组    331
20.3.3 使用导航组件     332
20.3.4 绑定导航和下拉菜单   334
20.3.5 使用面包屑    335
20.3.6 使用广告屏    335
20.3.7 使用card（卡片）      336
20.3.8 使用进度条    337
20.3.9 使用模态框    340
20.3.10 使用滚动监听    342
20.4 胶囊导航选项卡（Tab 栏）      344
20.5 新手常见疑难问题    345
20.6 实战技能训练营      346
第21 章 项目实训1——开发连锁咖啡响应式网站    347
21.1 网站概述  348
21.1.1 网站结构    348
21.1.2 设计效果    348
21.1.3 设计准备    349
21.2 设计首页布局    350
21.3 设计可切换导航      351
21.4 主体内容  356
21.4.1 设计轮播广告区   356
21.4.2 设计产品推荐区   358
21.4.3 设计登录、注册按钮和Logo      359
21.4.4 设计特色展示区   360
21.4.5 设计产品生产流程区   361
21.5 设计底部隐藏导航    364
第22 章 项目实训2——开发房产企业响应式网站    365
22.1 网站概述  366
22.1.1 网站结构    366
22.1.2 设计效果    366
22.1.3 设计准备    367
22.2 设计主页  367
22.2.1 主页布局    367
22.2.2 设计导航条    368
22.2.3 设计轮播广告     370
22.2.4 设计功能区    372
22.2.5 设计特色展示     373
22.2.6 设计脚注    377
22.3 设计侧边导航栏      378
22.4 设计登录页      380
第23 章 项目实训3——开发在线购物网站  382
23.1 整体布局  383
23.1.1 设计分析    383
23.1.2 排版架构    383
23.2 主要模块设计    384
23.2.1 Logo 与导航区     384
23.2.2 Banner 与资讯区    385
23.2.3 产品类别区域     387
23.2.4 页脚区域    388
第24 章 项目实训4——开发企业门户网站  389
24.1 构思布局  390
24.1.1 设计分析    390
24.1.2 排版架构    390
24.2 主要模块设计    391
24.2.1 Logo 与导航菜单       391
24.2.2 Banner 区     392
24.2.3 资讯区      393
24.2.4 版权信息    395