Chapter01 一起来学HTML 5 14
Warming Up HTML 5能做什么 14
Section 01更强大的元素 16
01一起来画图 16
02一个实用的表单 17
03路痴的救星 18
04让图片可以拖拽 19
Section 02更精美的样式 20
01漂亮的文字 20
02炫酷的图片 22
03设置动画效果 23
04自适应网页 25
Section 03更炫酷的特效 26
01 banner是怎样制作的 26
02消息的提示框 27
Test课后作业 28
Chapter02 网页绘图如此有趣 32
Warming Up强大的canvas 32
Section 01潜心修行canvas 34
01圆形表盘 34
Try it制作圆形表盘 35
02分针、时针和秒针 36
Try it制作表针 36
03时间刻度线 37
Try it制作时间刻度线 38
04看看几点了 39
Try it计时开始 40
Section 02图像好看的样式 42
01让图片更加高级 43
Try it修饰图片 44
02观看图片的局部 45
Try it图片的局部显示 46
03给图片添加“蒙版” 48
Try it微信聊天框效果 48
04图片的立体显示 49
Try it图片的阴影效果 50
Try it文字、边框、图片的阴影效果 50
Section 03图形的各种效果 51
01螺旋形旋转 51
Try it螺旋旋转图形 52
02两种渐变设置 53
Try it图形的渐变设置 53
03当图形重叠时 55
Try it组合图形的绘制 56
Test课后作业 57
Chapter03 生成漂亮的表单 60
Warming Up怎样让表单变漂亮 60
Section 01一起制作表单 62
01改变传统登录方式 62
Try it制作一个登录表单 63
02注册简洁大方型表单 64
Try it制作简洁的注册型表单 65
Section 02多姿多彩的表单 65
01年月日的出现 66
Try it表单中出现的日期 67
02怎样限制范围 67
Try it最大值和最小值的设置 67
03选择自己喜欢的颜色 68
Try it添加颜色样式 68
Section 03更多好看的表单 69
01简介浏览器支持情况 70
02很多样式用法总结 71
03实用的属性总结 72
Test课后作业 79
Chapter04 播放器的打开姿势 82
Warming Up网页播放器 82
Section 01看视频听音乐之前 83
01了解浏览器支持情况 84
02测试浏览器 84
Try it亲测浏览器是否支持 85
Try it嵌入插件作为备选解决不支持 85
Section 02享受视听盛宴 86
01沉浸在音乐的海洋 86
Try it制作音乐播放器 87
02打开视频的正确方式 88
Try it制作视频播放器 89
03了解播放器中的方法 90
Test课后作业 91
Chapter05 定位自己的位置 96
Warming Up一起学习定位知识 96
Section 01有导航不迷路 97
01学习经纬度知识 97
02 IP地址定位数据 97
03 GPS地理定位 98
Section 02开始定位 99
01获取地理位置 99
Try it获取当前的地理位置 100
02浏览器的支持情况 101
Try it测试浏览器支持情况 102
Section 03找到自己 103
01保护用户的隐私 103
02调用地图接口 104
Try it调用谷歌地图 104
03显示你的位置 106
Try it定位自己的位置 108
Test课后作业 111
Chapter06 实用的上传方式 114
Warming Up拖拽上传的应用 114
Section 01调整图片位置 116
01实现拖放的步骤 116
02实现拖拽的方法 116
Section 02拖放操作 117
01拖放应用 118
Try it最简单的拖放操作 118
02拖放列表 121
Try it制作拖放列表 121
03拖拽上传文件 125
Try it附件的拖拽上传 125
Section 03离线知识 128
01支持离线行为 128
Try it演示网页是否在线 128
02检测浏览器支持与否 129
Try it检测浏览器是否支持 130
03 Web Workers的简单应用 130
Test课后作业 133
Chapter07 开启样式的大门 136
Warming Up让网页多姿多彩 136
Section 01给样式作修饰 138
01选择元素进行样式设置 138
Try it需要重点标注的句子 138
02设置一类元素的样式 139
Try it给所有元素设置相同样式 140
Try it使用什么方法能制作出相同的效果 140
03属性也可以设置样式 140
Try it设置其中一张图片的属性 141
Section 02选择性地修饰 142
01新版本与旧版本的比较 143
02让设计更高级 144
Try it单击链接发生颜色变化 145
Try it设置多彩的输入框 146
Try it单击时按钮颜色发生变化 147
03结构性伪类的用法 148
Try it变化的字体颜色 149
04伪类选择器 150
Try it给第一句诗添加背景颜色 151
Try it设置首字母的大小写 152
Try it运用其他方法做出图片效果 153
Test课后作业 154
Chapter08 网页中的“动画片” 158
Warming Up怎样让元素动起来 158
Section 01过渡知识 160
01与用户的互动 160
Try it让元素不再呆板 160
02变化出更多样式 162
Try it多种变化效果 163
03模拟DOCK的缩放特效 164
Try it制作一个有导航的电脑桌面 165
Section 02实现动画 168
01动起来的关键 169
Try it一起荡秋千 170
02制作旋转的圈圈 172
Try it制作loading图标 173
Try it制作loading进度条 174
03使用放大镜查看 175
Try it使用放大镜查看图片 176
Test课后作业 177
Chapter09 让浏览更轻松 180
Warming Up三站合一 180
Section 01自适应效果 182
01多媒体查询能做什么 182
02窗口大小控制颜色 184
Try it网页背景随浏览器大小改变而改变 185
03自适应导航栏 189
Try it制作流行的网页导航栏 189
Section 02与用户的互动 194
01制作一张电子报纸 195
Try it多列布局的用法 195
02 Photoshop中的滤镜效果 198
Try it PS一张美女图片 200
03修饰图片 201
Try it修饰图片的轮廓 202
04开关按钮样式 202
Try it用最简单的方法制作按钮 203
Test课后作业 206
Chapter10 重要的网页元素 210
Warming Up变花样的文字和边框 210
Section 01文字让网页更突出 212
01文字的阴影效果 212
Try it让文字显得立体 212
Try it用阴影增加前景色与背景色的对比 215
02更多的文字效果 215
Try it制作更多文字效果 216
03文本溢出的设置 220
Try it制作文本的溢出效果 221
04英文单词的换行 222
Try it长单词的换行 222
Try it拆分单词 223
Section 02颜色让网页更好看 224
01多变的颜色 225
Try it制作颜色渐变 226
Try it制作一颗闪闪的星星 228
02色彩的模式 229
Try it制作一个HSL颜色模式表 229
03扩展的色彩模式 231
Try it制作颜色的不透明度 232
Section 03动作让网页更高级 233
01图片的3D旋转 234
Try it制作图片的3D旋转 234
02高级图标 235
Try it制作扁平化的图标 235
Test课后作业 237
Chapter11 特效是用什么做的 240
Warming Up JavaScript怎样嵌入 240
Section 01流行的网页样式 242
01 JavaScript的作用 242
02 JavaScript的特点 244
03 JavaScript的应用 245
Try it单击按钮出现文字 246
Section 02炫酷特效的前提 248
01掌握一些类型 249
02了解一些语句 255
Try it单击按钮出现问候语 255
Try it用时间点来设置问候语 257
Try it让代码循环计算5次 259
Try it一直循环代码 260
03应用哪些事件 261
04事件的句柄 266
05怎样处理事件 266
Test课后作业 268
Chapter12 炫酷效果应用方向 272
Warming Up怎样制作滚动banner 272
Section 01这个函数不一样 274
01函数定义 274
Try it单击按钮显示“你好” 274
Try it单击按钮出现欢迎词 275
Try it制作一个计算器 276
02函数参数 277
Try it给参数设置默认值 278
Try it设置查找值的函数 279
03函数调用 281
Section 02表单中的应用 282
01按钮对象 282
Try it设置表单的按钮对象 283
02复选框对象 283
Try it可以全选的复选框 284
03列表框对象 284
Try it设置列表框对象 285
04增加列表框 285
Try it与用户的互动效果 286
05表单中的时间 286
Try it调用时间 286
Section 03网页中的应用 287
01轮播图效果 288
Try it制作一个网页的轮播图 288
02字体闪烁效果 296
Try it制作文字的闪烁效果 297
03鼠标滑过效果 298
Try it制作鼠标滑过图片的震动效果 298
Section 04 网页中的特效 300
01显示网页停留时间 300
Try it显示所在网页停留的时间 300
02制作定时关闭窗口 301
Try it让窗口在设定好的时间自动关闭 302
Test课后作业 302