《网页设计与制作项目教程》-任务12首页其他板块的设计与制作

任务12首

其他板块的设计与制作本任务需要完成“学习党的二十大精神专题网”首页的其他板块，包括学习资料、学习光影、学习研讨、学习动态、页脚几个板块。其中学习资料板块使用的是

浮动布局，学习光影、学习研讨、学习动态板块使用弹性布局，页脚使用最基本标

准流布局。这些都是网站开发的基本技能。学习光影板块使用了变形、过渡、动画这三种特效使页面更加炫酷，鼠标移到图片上，图片会缓慢变大，鼠标离开图片时，图片会缩回原来的大小。通过本任务的学习，将利用前面所学到的各种网页制作技术，完成整个首页的制作。网页效果如所示：任务12首页其他板块的设计与制作任务·习兴规宜的二十六须悼，总记远样面端·学习8的二+九酒研E

开断式上方监类

两正确通大力中BrCE·

积加行8传

邪二十人

理

就

会

0

8Dk

立反·进平R

分人士读件

以光发为照理脚ae在建力大地上发用志人作排·习动平在机R

力

模

中

心描

m

二十人播乡值855·

中在菜五

a

口*度业用磨之上发本·中叶关于认典*改光地光的二十大褶的决定·

万中

/

童

友

效

次

通

心

体

购

进

友

膜

感学习光影盛会说221115·信想工宽总变开世究的二十大

n

世人此中人影2211·信单工程F8EB

第十共礼本大曲、第十二共生代家大2023-1-15·

临想工学玩此总支点开2022年生32011

·

儒TN

税此总发并世“里地2035·

工程8开世防程加课地地

2021-3.13·临燃工E

非税此总变细摩写台的十九E

中出绩地

2022日42·临工EP8地

E

工

开

世

继任务12首页其他板块的设计与制作·在

二.在共典雪中温与B·美于平习75折二十大痛神工作哪·单功如的二十大捕神A学

法加

+n.件力流续动力

—

并地nt票学习所您性·世进人与西(以出位角的二十人地神)任务首页其他板块效果202102e7202]01-42022-2152022-112022-11-172022-112022-11-02022-110520233152023-3-152023-12023-3-15学习学习动态学习研讨(1)掌握

flex弹性布局的各种属性及使用方法。

知识目标

(2)熟悉网格模型。(

3

)

掌

握

CSS

变形、过渡、动画的用法。(1)能够使用flex

技术布局页面。技能目标

(2)能够根据网页的实际需要灵活运用各种布局技术。(3)能利用CSS

实现页面中的常用动态效果。(1)掌握并遵循Web

开发标准，培养严谨的工作作风。

素质目标

(2)培养良好的自主学习和思考习惯。(3)加强实践教育，提升实践能力。任务12首页其他板块的设计与制作1.

弹性布局2.

利用CSS

实现动态效果3.

任务实现任务12首页其他板块的设计与制作1.弹性布局1.1弹性布局的基本概念1.2弹性布局的使用1.3弹性布局的属性任务12首页其他板块的设计与制作+float

属性。它对于那些特殊布局不方便，比如垂直居中就不容易实现。弹性布局，又称为

flex

布局，是CSS

的一种新的布局模式，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局

方

式

。1.弹性布局1.1弹性布局的基本概念网页常见的布局方案是基于盒模型，依赖

display属性+position

属性1.弹性布局1.1弹性布局的基本概念引入弹性盒模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。弹性布局有以下两个重要的概念：1.容器和项目容器：需要添加弹性布局的父元素。项目：弹性布局容器中的每个子元素，称为项目。2.主轴和交叉轴主轴：在弹性布局中，通过属性规定水平或垂直方向为主轴。交叉轴：与主轴垂直的另外一方向，称之为交叉轴。1.弹性布局1.2弹性布局的使用弹性布局使用比较简单，但是依然有一些注意事项。在使用时需要注意以下两点：(1)给容器添加display:flex/inline-flex

属性，就可使容器内中的

项目采用弹性布局显示，不遵循常规标准文档流的显示方式。而容器本身在文档流中的定位方式依然遵循常规标准文档流的显示方式。(2)将容器设为弹性布局后，项目的float、clear和vertical-align

属性将失效，但

position

属性依然生效。1.弹性布局1.3弹性布局的属性弹性布局有12大属性，按照作用范围的不同，可以分为容器属性和项

目属性两类。1.容器属性(1)flex-direction

属性flex-direction

属性定义容器要在哪个方向上堆叠项目，它用来定义主轴，

可以取4个值，具体含义如表所示：属性值描述row默认值。设置横向从左到右排列(左对齐)。水平方向为主轴，垂直方向为交叉轴

弹性项目从左到右水平方向顺序排列。主轴的起始线是弹性容器的左边，终止线是弹性容器的右边。row-reverse反转横向排列(右对齐),从后往前排列，最后一项排在最前面。水平方向为主轴垂直方向为交叉轴，弹性项目从右到左水平方向逆序排列。主轴的起始线是弹性容器的右边，终止线是弹性容器的左边。column纵向排列。垂直方向为主轴，水平方向为交叉轴，弹性项目从上到下垂直方向顺序排列。主轴的起始线是弹性容器的上边，终止线是弹性容器的下边。column-reverse反转纵向排列，从后往前排，最后一项排在最上面。垂直方向为主轴，水平方向为

交叉轴，弹性项目从下到上垂直方向逆序排列。主轴的起始线是弹性容器的下边，

终止线是弹性容器的上边。1.弹性布局1.3弹性布局的属性flex-direction

属性定义主轴1.弹性布局1.3弹性布局的属性(2)flex-wrap

属性flex-wrap

属性用于指定弹性容器的项目换行方式。常用属性值及含义如表所示：表

flex-wrap

属性值及其含义属性值描述nowrap

默认值，弹性容器为单行。该情况下弹性项目可能会溢出容器弹性容器为多行。该情况下弹性项目溢出的部分会被放置到新行，项

wrap

目、内部会发生断行。wrap-reverse反转wrap排列。属性值

描述flex-start弹性项目紧靠主轴起点。flex-end

弹性项目紧靠主轴终点center

弹性项目向主轴中点对齐space-between第一个弹性项目靠起点，最后一个弹性项目靠终点，余下弹性项目平均分配间隔空间，弹性项目会平均地分布在主轴里space-around每个弹性项目两侧的间隔相等。所以，弹性项目之间的间隔比弹性项目与弹性盒子的

边距的间隔大一倍space-evenly

元素间距离平均分配1.弹性布局1.3弹性布局的属性(3)flex-flow

属性flex-flow

是复合属性，是

flex-direction和

flex-wrap的缩写形式。(4)justify

-content

属性justify-content

属性定义了弹性项目在主轴方向的对齐方式，属性值及含义

如表所示：justify-content属性值及含义属性值描述flex-start弹性项目紧靠交叉轴的起点对齐，即弹性项目的侧轴(纵轴)起始位置的边界

紧靠该行的侧轴起始边界。flex-end弹性项目紧靠交叉轴的终点对齐，即弹性项目的侧轴(纵轴)起始位置的边界紧靠该行的侧轴结束边界。center弹性项目向交叉轴的中点对齐，即弹性项目在该行的侧轴(纵轴)上居中放置。(如

果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度)。stretch默认值，如果弹性项目未设置高度或设为auto,弹性项目将被拉伸占满整个容器的高度，但同时会遵照“min/max-width/height”属性的限制。1.弹性布局1.3弹性布局的属性(5)align-items

属性align-items

属性用于设置弹性项目在交叉轴方向上的排列，属性值及含义如表所示：align-items

属性值及其含义属性值描述stretch默认值，将项目拉伸以占据剩余空间。flex-start项目在容器的起点排列。flex-end项目在容器的终点排列。center项目在容器内居中排布。space-between多行项目均匀分布在容器中，其中第一行分布在容器的起点，最后一行分布在容器的重点。space-around多行项目均匀分布在容器中，并且每行的间距(包括离容器边缘的间距)都相等1.弹性布局1.3弹性布局的属性(6)align-content

属性align-content

属性定义了多根主轴线的对齐方式。如果项目只有一根主轴线，

该属性不起作用。属性值及含义如表所示：align-content

属性的属性值1.弹性布局1.3弹性布局的属性2.项目属性(1)order属性order

属性用于控制弹性项目的排列顺序，默认为0,数值越小，排列越

靠前，可以负数或整数。(2)flew-grow

属性flew-grow

属性用来设置项目相对于其他项目的增长量。flew-grow

属性默

认

为

0

,

如

果存在剩余空间不够，也不增长。(3)flew-shrink属性flew-shrink

属性与

flex-grow

属性相反，用来设置项目相对于其他项

目的收缩量，默认值为1。(4)flex-basis

属性flex-basis

属性属性规定弹性项目占据的主轴空间。如果主轴为水平，

设置这个属性相当于设置项目的宽度，原width

属性将会失效。1.弹性布局1.3弹性布局的属性(5)flex

属性flex

属性是

flex-grow、flex-shrink

和

flex-basis

三个属性的简写。默认值为0,

1

,auto

。

后两个属性是可选。(6)align-self

属性align-self

属性用控制单个弹性项目在交叉轴上排列方式，而

align-items属

性用于控制弹性容器中所有弹性项目的排列。如果设置了项目的

align-self

属性，

将会覆盖容器的align-items

属性。2.利用CSS

实现动态效果2.1

transition过渡2.2

transform

变形2.3

animation

动画任务12首页其他板块的设计与制作转变到另一个样式的过渡动画效果。也就是通过transition

属性，可以设置属性值在一定的时间区间内平滑地过渡另一个属性值的过渡动画。这种效果可以

在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效

果改变属性值。要实现这种过渡动画效果，必须规定以下两项内容：(1)指定要添加效果的

CSS

属

性

；(2)指定效果的持续时间。2.利用

CSS

实现动态效果属性(过渡属性)给元素添加从一种样式2.1

transition

过渡在CSS

中，可以使用

transition属性值

描述transition-property规定应用过渡的CSS属性的名称transition-timing-function定义过渡效果花费的时间，默认是0transition-timing-function规定过渡效果的时间曲线，默认是"ease"transition-delay规定过渡效果何时开始，默认是0transition

简写属性，用于在一个属性中设置四个过渡属性2.1

transition

过渡实现过渡效果的属性及含义如下表所示：过渡属性

transition2.利用CSS

实现动态效果其

中

，none表示没有属性会获得过渡效果；all:默认值，所有属性都将获得过

渡效果；property

表示定义应用过渡效果的CSS

属性名称，多个属性名之间以逗号

分隔，例如：transition-property:background-color,width;(2)transition-duration

属性transition-duration

属性用来定义过渡效果所花费的时间，默认值为0,常用

单位是秒(s)或者毫秒(ms)

。语法格式如下：2.1

transition

过渡(1)transition-property

属性transition-property

属性用来定义哪些属性需要进行平滑过渡动画。语法格式

如

下

：transition-property:none

|all

|property;transition-duration:数值s/ms;属性值数值的数值为0时，没有过渡动画。属性值描述linear指定以相同速度(匀速)开始至结束的过渡效果ease默认值，指定以慢速开始，然后变快，最后慢慢结束的过渡效果ease-in指定以慢速开始，然后逐渐加快的过渡效果ease-out指定以慢速结束的过渡效果ease-in-out指定以慢速开始和结束的过渡效果cubic-bezier(n,n,n,n)定义用于加速或者减速的贝塞尔曲线的形状，它们的值是0~1(3)transition-timing-function

属性transition-timing-function

属性规定过渡效果的速度曲线，可以根据时间的推

进去改变属性值的变换速率，有6个变换速率值，属性值及含义如表所示。transition-timing-function

属性值2.2.1

transition

过渡利用

CSS

实现动态

效果transition-delay

的属性值可以为正整数、负整数和0。当设置为负数时，过渡动作会从该时间点开始，之前的动作被截断；设置为正数时，过渡动作会被延迟触发。(5)transition属性transition

属

性

是

一

个

复

合

属

性

，

用

于

在

一

个

属

性

中

设

置

transition-

property

、transition-duration

、transition-timing-function

、transition-delayg

共4个过渡属性。语法格式如下：2.1

transition

过渡(4)transition-delay

属性transition-delay

属性用来定义过渡动画的延迟触发的时间，默认值为0,属

性值数值的常用单位是秒(s)

或者毫秒(ms)。

语法格式如下：transition:transition-propertytransition-durationtransition-timing-functiontransition-delay;transition-delay:数值s/ms;2.1

transition

过渡在使用

transition

属性设置过渡效果时，它的各个参数必须按照顺序进行定义，

不能颠倒。无论是单个属性还是简写属性，使用时都可以实现多个过渡效果。例如：使用

transition

属性在设置过渡动画效果时，可以添加多个样式的变换效果，

添加的属性由逗号分隔。例如以下代码： transition:width

2s,height

2s;设置了宽度和高度两个属性上的过渡动画效果。等价于 transition:width2sease

Os;

也等价于下面的代码段：transition-property:width;193transition-duration:2s;transition-timing-function:ease;transition-delay:Os;transition:width2s;2.2

transform

变形在

CSS中，可以利用transform

属性来实现元素的旋转、缩放、倾斜、移动等变形处理。变形处理由变形函数来完成，变形函数用来操控元素发生旋转、

缩放、倾斜、移动等变化。transform

属性的语法格式如下：属性值描述none默认值，表示不进行变形transform-function用于设置变形函数，可以是一个或多个变形函数列表其属性值的含义见表所示。transform

属性值及其含义transform:none|transform-function;变形类型2D变形函数描述旋转元素rotate(angel)参数angel是度数值，代表旋转角度缩放元素scale(x,y)改变元素的高度和宽度。x,y的值代表缩放比例，

小数取值包括正数、负数和scaleX(x)改变元素的宽度scaleY(y)改变元素的高度倾斜元素移动元素skew(x-angel,y-angel)参数angel是度数值，代表倾斜角度skewX(angel)沿着x轴倾斜元素skewY(angel)translate沿着y轴倾斜元素(x,y)基于x和y坐标重新定位元素translatex(x)translateY(y)沿着x轴移动元素，即左右方向沿着y轴移动元素，即上下方向2.利用CSS

实现动态效果轴进行变形。常用2D变形函数2.2transform

变形1.2D变形2D变形是指某个元素围绕其x轴和y如表所示。常用2D变形函数变形类型3D变形函数描述Rotate3d(x,y,z,angel)

前三个参数用于判断需要旋转的坐标轴，旋转轴的值设置为1,否则为0,参数angel代表旋转角度3D旋转RotateX(angel)

沿着x轴3D旋转RotateY(angel)沿着y轴3D旋转RotateZ(angel)

沿着z轴3D旋转Scale3d(x,y,z)

参数x,y,z是缩放比例，取值包括正数、负数和小数3D缩放元素scaleX(x)沿着x轴缩放scaleY(y)沿着y轴缩放scaleZ(z)

沿着z轴缩放3D

变形是指某个元素围绕其

x

轴、y

轴、z轴进行变形。常用3D

变形函数见表所示。常

用

3D变形函数2.2transform

变形2.3D

变形2.利用CSS

实现动态效果变形类型

3D变形函数

描述skew(x-angel,y-angel)参数angel是度数值，代表倾斜角度倾斜元素skewX(angel)

沿着x轴倾斜元素skewY(angel)

沿着y轴倾斜元素移动元素Translate3d(x,y,z)

(x,y,z)基于x、y和z轴坐标重新定位元素translatex(x)沿着x轴移动元素，即左右方向translateY(y)translateY(z)沿着y轴移动元素，即上下方向沿着z轴移动元素3D透视图

Perspective(n)

参数n是透视深度的数值2.2

transform

变形

2.利用CSS

实现动态效果偏移量取值描述X轴偏移量指定以方向位置名词有：left、center、right;

具体数值，如：20px百分比：如10%y轴偏移量方向位置名词有：

top、center、bottom;具体数值，如：20px百分比：如10%z轴偏移量具体数值，如：20px2.2

transform

变形3.元素变形基准点变形默认都是以元素的中心点为基准点进行的，如果需要改变这个基准点，

可以使用transform-origin

属性，语法格式如下：xy

z分别是x

轴、y轴和z

轴的偏移量，偏移量的取值可以是具体数据、

百分比，也可以是方向位置名词。偏移量的属性值含义见表所示。transform-origin属性值(偏移量)transform-origin:xy

z;2.3animation

动画动画是使元素从一种样式逐渐变化为另一种样式的效果。

CSS

中主要是运用

@keyframes

关键帧和animation

相关属性来实现。@keyframes

用来定义动

画，animation

将定义好的动画绑定到特定元素，并定义动画时长、重复次数等

相关属性。1.@keyframes

定义动画关键帧状态@keyframes

属性用来定义动画关键帧的状态，其语法格式如下：其中，animationname

定义动画的名称，其值是一个自定义标识符，例如：

colorchange。

keyframes-selector

是关键帧选择器，值是通常是一个百分比，

指定当前关键帧在整个动画过程中的位置，0%表示动画的开始，100%表示动画

的结束。还可以使用

from

或者

to

表示

，from

表示动画的开始，相当于0%,

to

表示动画的结束相当于100%。

CSS-styles

表示执行到当前关键帧时对应的

动画状态，其值是一个样式表。每个关键帧表示动画过程中的一个状态，动画有

多个关键帧。@keyframes

animationname{keyframes-selector{CSS-styles;}}偏移量取值描述animation-name规定@keyframes动画的名称animation-duration规定动画完成一个周期所花费的秒或毫秒，默认是0animation-timing-function规定动画的速度曲线，默认是"ease"animation-fill-mode规定当动画不播放时(当动画完成时，或当动画有一个延迟未开始播放时),要应用到元素的样式animation-delay规定动画何时开始，默认是0animation-iteration-count规定动画被播放的次数，默认是1animation-direction

"normal"规定动画是否在下一周期逆向播放，默认是animation-play-state规定动画是否正在运行或暂停，默认是"running"animation所有动画属性的简写属性2.动画的调用当

在

@keyframes中创建动画时，需把它捆绊到某个选择器，否则不会产生

动画效果。CSS

通过

animation

属性调用动画，animation

相关的属性如表所示。

animation属性2.3animation

动画2.利用CSS

实现动态效果其

中

，Keyframename

用于规定需要绑定到选择器的@keyframes

定义的

动画名称，如果值为

none,则表示不应用任何动画，通常用于覆盖或者取消动

画

。(2)animation-duration

属性anmnon-duraton

属性用于定义整个动画效果完成所需要的时间，语法格

式加下：2.3animation

动画(1)animation-name

属性animation-name

属性用于定义要应用的动画名称，为@keyframes

动画规

定名称。语法格式如下：数值是以秒(s)或者毫秒(ms)为单位的时长，默认值为0,表示没有任何动画效果。

当值为负数时，则被视为0。animation-name:keyframename|none;animation-duration:数值；属性值速度曲线描述linear动画从头到尾的速度是相同的ease默认值，动画以速度开始，然后加快，在结束前变慢ease-in动画以低速度开始ease-out动画以低速度结束ease-in-out动画以低速度开始和结束2.3animation

动画(3)animation-timing-function

属性animation-timing-function

用来规定动画的速度曲线，定义使用哪种方式

来执行动画效果。语法格式如下：属性值及含义如表所示。animation-timing-function

属性值及其含义animation-timing-function:

属性值；2.3animation

动画(4)animation-fill-mode属性animation-fill-mode

属性用来设置动画播放时间之外的效果，即动画开始

或动画结束时的状态。语法格式如下：属性值描述none默认开始保持原来的样式，结束保持原来的样式backwards开始前处于第一帧的样式，结束默认保持原来的样式forwards开始前默认保持原来的样式，结束保持最后一帧的样式both开始保持第一帧，结束保持最后一帧的样式属性值及含义如表所示。animation-fill-mode

属性值及其含义animation-fill-mode:none|backwards

|forwards

|both;2.3animation

动画(4)animation-fill-mode属性animation-fill-mode

属性用来设置动画播放时间之外的效果，即动画开始

或动画结束时的状态。语法格式如下：属性值描述none默认开始保持原来的样式，结束保持原来的样式backwards开始前处于第一帧的样式，结束默认保持原来的样式forwards开始前默认保持原来的样式，结束保持最后一帧的样式both开始保持第一帧，结束保持最后一帧的样式属性值及含义如表所示。animation-fill-mode

属性值及其含义animation-fill-mode:none|backwards

|forwards

|both;取值说明：数值是动画开始前等待的时长，其单位是秒(s)

或者毫秒(ms),

默认属性值为0。(6)animation-iteration-count

属性animation-iteration-count

属性用于定义动画的播放次数。其基本语法格

式如下

：2.3animation

动画(5)animation-delay属性animation-delay

属性用于定义动画什么时候开始。其基本语法格式如下：取值说明：数值是播放动画的次数，初始值为1;如果值是infinite,则动

画循环播放。animation-iteration-count:数值|infinite;animation-delay:数值；取值说明：normal:默认值，表示动画每次都会正常显示。alternate:动画

播放完成后会逆向交替循环，即动画会在奇数次数正常播放，而在偶数次数逆向播

放。(8)animation-play-state

属性animation-play-state属性规定动画是否正在运行或暂停，其语法格式如

下

：2.3animation

动画(7)animation-direction

属性animation-direction属性定义动画播放完成后是否逆向交替循环。其基本

语法格式如下：属性值paused设置动画已暂停。running

是默认值，规定动画正在播放。animation-play-state:running|paused;animation-direction:normal|alternate;2.利用CSS

实现动态2.3animation

动画(9)animation

属性animation

属性是一个复合属性。语法格式如下：其中，使用animation

属性时必须指定animation-name

和animation-duration属性，如果持续的时间为0,则不会播放动画。其他属性如果没有设置，

可以省略。除了animation-play-state