网页设计与制作HTML5+CSS3

任务12

首页其他板块的设计与制作

任务本任务需要完成“学习党的二十大精神专题网”首页的其他板块,包括学习资料、学习光影、学习研讨、学习动态、页脚几个板块。其中学习资料板块使用的是浮动布局，学习光影、学习研讨、学习动态板块使用弹性布局，页脚使用最基本标准流布局。这些都是网站开发的基本技能。学习光影板块使用了变形、过渡、动画这三种特效使页面更加炫酷，鼠标移到图片上，图片会缓慢变大,鼠标离开图片时，图片会缩回原来的大小。通过本任务的学习，将利用前面所学到的各种网页制作技术,完成整个首页的制作。网页效果如图12-1所示：任务12首页其他板块的设计与制作

任务任务12首页其他板块的设计与制作图12-1首页其他板块效果

任务12首页其他板块的设计与制作知识目标技能目标素质目标（1）掌握flex弹性布局的各种属性及使用方法。（2）熟悉网格模型。（3）掌握CSS变形、过渡、动画的用法。（1）能够使用flex技术布局页面。（2）能够根据网页的实际需要灵活运用各种布局技术。（3）能利用CSS实现页面中的常用动态效果。（1）掌握并遵循Web开发标准，培养严谨的工作作风。（2）培养良好的自主学习和思考习惯。（3）加强实践教育，提升实践能力。

弹性布局利用CSS实现动态效果任务实现任务12首页其他板块的设计与制作

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

1.1弹性布局的基本概念网页常见的布局方案是基于盒模型，依赖display属性+position属性+float属性。它对于那些特殊布局不方便，比如垂直居中就不容易实现。弹性布局，又称为flex布局，是CSS的一种新的布局模式，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。1.弹性布局

1.1弹性布局的基本概念1.弹性布局引入弹性盒模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。弹性布局有以下两个重要的概念：1.容器和项目容器：需要添加弹性布局的父元素。项目：弹性布局容器中的每个子元素，称为项目。2.主轴和交叉轴主轴：在弹性布局中，通过属性规定水平或垂直方向为主轴。交叉轴：与主轴垂直的另外一方向，称之为交叉轴。

1.2弹性布局的使用1.弹性布局position:static|relative|absolute|fixed|sticky;弹性布局使用比较简单，但是依然有一些注意事项。在使用时需要注意以下两点：（1）给容器添加display：flex/inline-flex属性，就可使容器内中的项目采用弹性布局显示，不遵循常规标准文档流的显示方式。而容器本身在文档流中的定位方式依然遵循常规标准文档流的显示方式。（2）将容器设为弹性布局后，项目的float、clear和vertical-align属性将失效，但position属性依然生效。

1.2弹性布局的属性1.弹性布局!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8/titleflex弹性布局/titlestyle.flex-container{display:flex;background-color:#1e90ff;}【案例12-1】example12-1.html演示了弹性布局的用法，代码如下：

1.2弹性布局的属性1.弹性布局flex-containerdiv{background-color:#f1f1f1;margin:10px;padding:20px;font-size:30px;}/style/headbodydivclass=flex-containerdiv1/divdiv2/divdiv3/div/div/body/html

1.2弹性布局的属性1.弹性布局flex-containerdiv{background-color:#f1f1f1;margin:10px;padding:20px;font-size:30px;}/style/headbodydivcl