正版新书]HTML5+CSS3+JavaScript项目开发刘蕾9787302520511

咖啡商城项目导引1
学习目标1
内容安排2
项目背景2
项目构思3章开发工具HBuilder5
1.1飞速编码的极客工具6
1.2安装HBuilder6
1.3认识界面8
1.4新建项目9
1.5Web项目的运行11
1.6移动App的运行12第2章HTML基础15
2.1认识HTML16
2.1.1HTML基本语法16
2.1.2HTML文档的基本结构17
2.1.3项目： 个HTML页面18
2.2HTML常用标签19
2.2.1文本与标签19
2.2.2项目： 介绍我的学校1
.表格元素24
..1表格标签25
..2项目： 图书统计表26
2.4表单元素27
2.4.1常用表单元素27
2.4.2项目： 个人信息统计表31
2.5咖啡商城——商品分类模块33
2.5.1项目说明34
2.5.2项目设计34
2.5.3项目实施34
习题36第3章HTML5新增元素和属37
3.1新增文档结构元素38
3.1.1认识HTML538
3.1.2HTML5页面结构39
3.1.3HTML5主体结构元素39
3.1.4HTML5非主体结构元素42
3.1.5项目： 新闻评论网43
3.2新增表单元素45
3.2.1HTML5表单新功能45
3.2.2HTML5表单新的输入类型46
3..HTML5表单新的属47
3.2.4项目： 订货人个人信息页49
3.3咖啡商城——用户注册模块实现51
3.3.1项目说明51
3.3.2项目设计52
3.3.3项目实施52
习题54第4章CSS基础56
4.1CSS基本语法57
4.1.1CSS语句格式57
4.1.2CSS选择符58
4.1.3项目： 世界杯胜负榜64
4.2文本和字体相关属66
4.2.1字体属66
4.2.2文本属69
4..项目： 介绍我的学校270
4.3背景和边框相关属72
4.3.1边框72
4.3.2边框阴影75
4.3.3圆角边框76
4.3.4图形边框76
4.3.5背景77
4.3.6项目： 校训Logo80
4.4咖啡商城——页脚模块实现82
4.4.1项目说明82
4.4.2项目设计82
4.4.3项目实施82
习题84第5章CSS盒子模型87
5.1盒子相关属8
5.1.1内边距和外边距88
5.1.2块级元素与行内元素90
5.1.3项目： 盒子模型92
5.2浮动定位93
5.2.1float属93
5.2.2clear属95
5..项目： 3个相框95
5.3位置定位97
5.3.1position属97
5.3.2项目： 照片墙99
5.4隐藏与显示101
5.4.1visibility属101
5.4.2zindex属102
5.4.3display属103
5.4.4项目： 悬浮菜单103
5.5咖啡商城——商品分类模块美化效果实现105
5.5.1项目说明105
5.5.2项目设计106
5.5.3项目实施106
习题109第6章CSS3动画113
6.1Animation动画114
6.1.1定义关键帧114
6.1.2绑定动画115
6.1.3项目： 跑动的汽车116
6.2Transition动画118
6.2.1Transition过渡118
6.2.2项目： 页面切换效果119
6.3咖啡商城——商品介绍模块实现122
6.3.1项目说明122
6.3.2项目设计1
6.3.3项目实施1
习题125第7章JavaScript基础126
7.1JavaScript简介127
7.2在HTML页面中嵌入JavaScript的方法128
7.3JavaScript的语法规则129
7.3.1语法129
7.3.2标识符130
7.3.3注释131
7.3.4项目： 个JavaScript程序131
7.4数据类型133
7.4.1常用数据类型133
7.4.2typeof运算符133
7.4.3Undefined类型134
7.4.4Null类型134
7.4.5Object类型135
7.5变量136
7.6运算符137
7.7流程控制语句138
7.8JavaScript函数140
7.8.1JavaScript函数定义140
7.8.2项目： 单击我142
7.9事件和事件处理144
7.9.1JavaScript常用事件144
7.9.2项目： 的兔子145
习题148第8章JavaScript对象151
8.1内置对象152
8.1.1认识JavaScript内置对象152
8.1.2Math对象153
8.1.3Date对象154
8.1.4String对象156
8.1.5Number对象158
8.1.6Array对象160
8.1.7项目： 数字时钟162
8.2BOM对象164
8.2.1认识BOM对象164
8.2.2window对象166
8..history对象168
8.2.4location对象169
8.2.5screen对象169
8.2.6document对象170
8.2.7项目： 打开新窗口170
习题172第9章DOM文档对象模型175
9.1认识DOM对象176
9.2HTML DOM Document对象176
9.3HTML DOM Event对象181
9.4HTML DOM Element对象183
9.5HTML DOM attribute对象184
9.6DOM与事件185
9.6.1事件绑定的方式185
9.6.2事件处理函数的执行顺序187
9.6.3事件冒泡和事件捕获187
9.7项目： 诗词鉴赏189
9.8咖啡商城——购物车模块实现192
9.8.1项目说明192
9.8.2项目设计193
9.8.3项目实施194
习题1950章Canvas画布200
10.1绘制基本图形201
10.1.1认识Canvas201
10.1.2Canvas的常用属和方法201
10.1.3使用Canvas绘图对象绘制基本图形202
10.1.4项目： 来自星星的它209
10.2绘制图像213
10.2.1使用Canvas绘图对象裁剪图像213
10.2.2项目： 放大镜216
10..项目： 跳动的心218
10.2.4项目： 鼠标画板220
10.3咖啡商城——商品详情模块实现2
10.3.1项目说明2
10.3.2项目设计2
10.3.3项目实施224
习题2261章本地存储229
11.1Web Storage0
11.1.1Web Storage的常用属和方法0
11.1.2项目： 简易购物车1
11.2本地数据库
11.2.1本地数据库访问
11.2.2项目： 简易留言本
11.3咖啡商城——购物车本地存储模块实现245
11.3.1项目说明245
11.3.2项目设计246
11.3.3项目实施247
习题2512章jery基础253
12.1jery的由来及简介254
12.1.1向页面添加jery库254
12.1.2项目： 个jery程序255
12.2jery选择器256
12.2.1基本选择器256
12.2.2层次选择器256
12..过滤选择器257
12.2.4表单元素选择器259
1.jery常用方法259
12.4jery对象与DOM对象263
12.5jery事件264
12.5.1常见的DOM事件264
12.5.2事件绑定/移除267
12.6jery动画269
12.6.1隐藏和显示269
12.6.2淡入和淡出270
12.6.3animate动画270
12.7咖啡商城——图片轮播271
12.7.1项目说明271
12.7.2项目设计272
12.7.3项目实施272
12.8JSON273
12.8.1JSON语法规则273
12.8.2常用类型274
12.8.3基础示例274
12.9Ajax275
12.9.1Ajax如何工作275
12.9.2jery中的Ajax277
12.10咖啡商城——查看商品详情279
12.10.1项目说明279
12.10.2项目设计279
12.10.3项目实施280
习题2813章跨平台移动App开发285
13.1HTML5 Plus规范286
13.2HTML5+ App286
13.3HelloMUI示例287
13.4建立MUI项目289
13.5咖啡商城——移动App291
13.5.1项目说明291
13.5.2项目设计292
13.5.3项目实施292
13.6Hello H5+ 示例294
13.7创建Hello H5+ 项目296
13.8项目： 语音答题App301
13.8.1项目说明301
13.8.2项目设计302
13.8.3项目实施3024章综合设计305
14.1项目构思306
14.2UI设计309
14.3网页制作314附录A学习知识点及能力要点324
A.1教材的知识要点及掌握程度324
A.2教材的能力要点及重要程度325附录BRGB颜色对照表326附录C部分习题参考331参考文献335

第5章CSS盒子模型本章概述通过本章的学习，重点掌握CSS中盒子模型的各个属，熟练使用margin、padding、border、width等属，掌握盒子模型的3种定位机制，了解display属、显示及隐藏的方法。通过对5个盒子项目的实施，掌握浮动、position定位等机制。
学习重点与难点重点：（1）盒子相关属。
（2）浮动定位。
（3）位置定位。
（4）display属。
难点：（1）浮动定位。
（2）clear属。
（3）CSS的层叠。
重点及难点学习指导建议：盒子模型在前端开发中重要，重点掌握CSS中盒子模型的各个属，学须通过大量编码练习强化记忆。
浮动和定位在页面布局中有着重要的意义，是学习时必须掌握的重点，通过编码实践，比较每一个属值不同的含义。
了解clear属知识，从而设置元素的某个方向不允许出现浮动元素。5.1盒子相关属在页设计中，经常会使用内容（content）、内边距（padding）、边框（border）、外边距（margin）等属。如图5.1所示，可以视这些CSS属为日常生活中的盒子模型，盒子模型是实现网页布局的基础，学习网页布局必须了解盒子模型。
盒子模型如图5.1所示。俯视这个盒子，margin为盒子边缘与物体的距离，一般称为边界或外边距；border类似于盒子的厚度，称为边框；padding是填充的厚度，一般称为填充或者内边距；而content为盒子的内容。也就是说，整个盒子在页面中占的位置大小应该是内容的大小加上填充的厚度再加上框边的厚度再加上它的外边距。
图5.1盒子模型5.1.1内边距和外边距在HTML中，每个元素都可以被视为一个“盒子”，不管这个元素是段落，还是图像。想象一个盒子，它有上、下、左、右4条边，所以每个属除了内容（content），都包括4个部分：上、下、左、右；这4部分可同时设置，也可分别设置，如图5.2所示。
图5.2标准盒子模型下面分别说明各个属的语法。
1.外边距外边距属也称为边界属，根据上、下、左、右4个方向可细分为上边距（margintop）、下边距（marginbottom）、左边距（marginleft）、右边距（marginright）。一般情况下，可以使用margin属一次设置4个边距，也可以分别对不同的边距设置不同的属，设置时必须按顺时针方向依次代表上、右、下、左4个方向的属值。如果省略，则按上下、左右同值处理。
例如，有如下语句：margin:1pxpxpx4px;有4个值，表示上外边距为1px,右外边距为2px，下外边距为3px，左外边距为4px。margin:1px4px;有两个值，表示上下外边距为1px，左右外边距为4px。
除了上述设置具体值之外，也可以设置水平位auto，这样做会使盒子里的水平位置自动居中。
如下面代码所示，样式设置为.marginwidth:200px;margin:0pxauto内容设置为使用auto效果

注释span是行内元素