Web前端开发任务式教程（HTML5+CSS3）（微课版）课件 模块8--10 元素过渡与动画、 网页布局技术、 网站设计综合实训.pptx

;《Web前端开发任务式教程》;元素过渡与动画;转换与过渡是CSS3的属性，能够设计一些特殊的网页效果，改善用户的交互式体验。本任务介绍转换与过渡属性的基本语法与用法，通过本任务的学习，应全面掌握转换与过渡属性的语法、用法及特点，并能基于转换与过渡属性设计元素造型和网页简单动画。;元素过渡与动画;元素过渡与动画;元素过渡与动画;元素过渡与动画;元素过渡与动画;元素过渡与动画;元素过渡与动画;元素过渡与动画;元素过渡与动画;元素过渡与动画;元素过渡与动画;元素过渡与动画;元素过渡与动画;元素过渡与动画;元素过渡与动画;元素过渡与动画;元素过渡与动画;元素过渡与动画;元素过渡与动画;元素过渡与动画;在任务7.2的第2个任务（7.2.2节）中，设计了轮播图的布局，本任务基于动画属性实现轮播图的动画，网页显示效果如图8-9所示。具体要求如下。

1）能够轮播3幅图像，图8-9a和图8-9b为其中的2幅图像展示。

2）底部水平线指示轮播图像在图库中的位置，与轮播图像位置对应的水平线蓝色显示，分别如图8-9a和图8-9b所示。

3）左、右的小于号、大于号初始颜色为浅浅的蓝色，如图8-9a所示，当鼠标悬停于轮播图像时变为深蓝色，如图8-9b所示。

a)第2幅图像b)第3幅图像，且鼠标悬停于轮播图像

图8-9 轮播图动画展示;元素过渡与动画;元素过渡与动画;元素过渡与动画;元素过渡与动画;元素过渡与动画;元素过渡与动画;元素过渡与动画;元素框模型;元素过渡与动画;;;《Web前端开发任务式教程》;网页布局技术;通过前面知识的学习，大家已经具备了网页内容设计的能力，本任务使用浮动技术设计网页的整体布局。选取若干典型网站进行分析，总结出常见的网页布局形式，如图9-1所示就是其中的一种典型布局，分析如下。

1）网页内容宽度固定，称为版心，图9-1的版心宽度设计为1200px。

2）网页页眉和页脚背景自适应浏览器宽度，增加整体的美观性。;网页布局技术;网页布局技术;网页布局技术;网页布局技术;网页布局技术;网页布局技术;网页布局技术;网页布局技术;网页布局??术;网页布局技术;网页布局技术;网页布局技术;网页布局技术;网页布局技术;通过样式设计动态调整网页内容的隐藏、显示、放大、缩小和移动，以使内容自动适应浏览器窗口的显示尺寸，称为响应式布局设计。

随着前端技术的发展，响应式布局已经是网页的基本布局。本任务使用响应式布局设计一个如图9-10所示的网页，具体要求如下。

1）图9-10a为浏览器窗口宽度大于768px的PC显示效果，内容分为3列显示，菜单项和右侧诗词各占网格布局的3列，中间内容占网格布局的6列。

2）图9-10b为浏览器窗口宽度大于600px、小于768px的平板显示效果，菜单项占网格布局的4列，内容占网格布局的8列。

3）图9-10c为浏览器窗口宽度小于600px的PC和移动设备的显示效果，一列显示，也即占网格布局的12列，100%宽。;网页布局技术;网页布局技术;网页布局技术;网页布局技术;网页布局技术;网页布局技术;网页布局技术;网页布局技术;网页布局技术;网页布局技术;网页布局技术;完善任务9.1，在浮动布局中添加如下内容。

1）在页眉区设计菜单，并使用弹性布局调整菜单项之间的间隔，使菜单项之间的间隔相等。

2）在内容区设计两行内容，内容自适应容器宽度，分别占比40%和60%。

设计完成的网页显示效果如图9-14所示。;网页布局技术;网页布局技术;网页布局技术;网页布局技术;网页布局技术;网页布局技术;网页布局技术;网页布局技术;网页布局技术;网页布局技术;;;网站设计综合实训;网站设计综合实训;1.需求分析

参考华为官网首页顶部导航主菜单，设计网页主菜单，显示效果如图10-2所示，版心宽度为1200px。

1）图10-2a是菜单初始显示效果，仅显示基本菜单项。

2）图10-2b是当鼠标悬停于“在线购买”菜单项时的显示效果，菜单项下面出现红色下划指示线，同时弹出了下拉菜单项。

3）图10-2c是当鼠标悬停于“个人及家庭产品”菜单项时的显示效果，菜单项下面出现红色下划指示线，同时下拉显示菜单项内容。

4）公司徽标菜单项没有鼠标悬停效果。当鼠标悬停于其他菜单项时，为菜单项添加背景颜色，突出显示菜单项。;网站设计综合实训;网站设计综合实训;网站设计综合实训;网站设计综合实训;网站设计综合实训;轮播图轮播若干张广告图像，需求与任务8.3类似，较