第十一章第十一章.ppt

第11章HTML5和弹性布局;1．HTML5概述

2．HTML5结构元素

3．弹性盒子布局

4．媒体查询应用;HTML5是在HTML4.01规范的基础上，建立起来的一个全新HTML标准规范，得到了各主流浏览器厂商的广泛认可和支持。;11.1.1HTML5简介

11.1.2HTML5特性;在HTML5标准规范中，对视频、音频、图像、动画以及与计算机等终端设备的交互进行了标准化，引入新标签元素和属性，以适应互联网应用的迅速发展，为桌面和移动平台提供无缝衔接的丰富内容。;解决了跨浏览器问题

新增了多个新特性

设计安全机制

表现和内容进一步分离

简化HTML描述语言;11.2.1HTML5结构标签

11.2.2课堂案例——在线课程

;article标签

header标签

nav标签

section标签

aside标签

footer标签;案例学习目标：学习掌握HTML5结构标签的使用。

案例知识要点：article标签、header标签、nav标签、section标签、aside标签和footer标签等在文字页面结构中的作用。

素材所在位置：案例素材/ch11/课堂案例-在线课程。

案例布局要求如图11-1所示，案例效果如图11-2所示。;11.3.1弹性盒子概念

11.3.2弹性容器属性

11.3.3弹性容器项目属性

11.3.4课堂案例-尚品家居;弹性盒子是实现“弹性布局的基础，弹性盒子模型如11-35所示。弹性盒子是具有弹性布局属性的元素，也可称为”弹性容器“，所有嵌入到“弹性容器”内的元素称为容器成员，简称项目。;弹性容器可以通过flex-direction，flex-wrap，justify-content，align-item等属性，设置项目的排列方式。;弹性盒子中的项目可以通过flex-grow和flex-shrink属性控制自身缩放比例，以适应弹性盒子的大小变化，最终适应浏览器窗口大小的变化。;案例学习目标：学习应用弹性布局的方法。

案例知识要点：设置弹性盒子相关属性的方法，以及弹性盒子内各项目的显示方式。

素材所在位置：案例素材/ch11/课堂案例-尚品家居。

案例布局效果如图11-52所示，案例效果如图11-53所示。;11.4.1媒体查询

11.4.2课堂案例-健康大步走;媒体查询介绍

媒体查询是一种条件语句，可用来确定将不同的CSS样式应用到Web页面，因此弹性布局和媒体查询的结合使用，可以实现一个能适应移动、平板和桌面环境的响应式页面设计。

媒体查询的使用

媒体查询格式：

@media媒体类型and（媒体特征）{样式代码}

媒体查询通过不同的媒体类型和媒体特征的定义调用特定的样式表规则。

媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同特

征条件。

;案例学习目标：学习应用媒体查询的方法。

案例知识要点：设置媒体查询条件的方法以及将不同CSS样式应用到不同的Web页面。

素材所在位置：案例素材/ch11/课堂案例-健康大步走。

案例布局要求如图11-85所示，11-86所示，案例效果如图

11-87所示，11-88所示。;11.5.1练习案例——优胜企业网站12.3.2练习案例-恒生国际老年公寓

11.5.2练习案例——雅派服饰

;案例练习目标：练习HTML5结构元素的使用。

案例操作要点：

1．创建名称为index.html的网页文档并存于站点根文件夹中。

2．将外部样式表文件mystyle.css链接到网页中。

3．根据案例布局要求，使用HTML5结构标签header、

article、section、aside和footer以及预设样式

body、#container、.n1、.n1a:link、.n1a:hover、.h、.s1、

.a1、.as1和.f1，完成网页制作。;案例练习目标：练习弹性布局的设置。

案例操作要点如下。

1．创建名称为index.html的网页文档并存于站点根文件夹中。

2．将外部样式表文件mystyle.css链接到网页中。

3．根据案例布局要求，应用预设样式body、#container、#logo、#nav、#nava:link、#nava:hover、#banner、.mainbox-1和#footer，定义#header、#mainbox、img和*样式，插入div标签。

4、设置#header样式属性，宽度为100%，高度为40px，背景颜色为#cccccc；

设置display属性为flex，justify-content属性为space-between。

5、设置#mainbox样式属性，宽度为100%，左右外边距为自动；设置display

属性为flex，flex-wrap属性为wrap， j