网站设计与网页制作立体化项目教程（第4版） 课件 2-3-4 课件：“英博特智能科技”企业网站首页页面制作-公司优势制作

任务3：“英博特智能科技”企业网站首页页面制作第二篇：项目实战篇3.4公司优势制作1-2任务2：页面制作-人物介绍内容呈现（1）熟练运用弹性布局。（2）灵活运用CSS伪类。能力要求学习导览任务概述完成首页页面中公司优势模块的制作。1-2任务2：页面制作-人物介绍内容呈现该模块包含左中右三个部分，风格一致，实现过程包括搭建模块结构、三列布局设计以及图文样式的设计。任务思考1-2任务2：页面制作-人物介绍内容呈现（1）浏览器对弹性布局的支持情况与兼容问题是怎样的？

（2）弹性布局在水平方向上的对齐方式“space-around”和“space-between”有何差别？

（3）如何快速选择某个元素的第2个子元素？

弹性布局1-2任务2：页面制作-人物介绍内容呈现Flex是FlexibleBox的缩写，意为“弹性布局”，是一种响应式布局，能自动伸缩盒模型达到自适应的效果。弹性盒子模型

（1）Flex容器通过display:flex属性，可将元素声明块级弹性容器；通过dsplay:inline-fex，可将元素声明为行内弹性容器。Flex容器包含6个属性，分别为flex-direction、flex-wrap、flex-flow、justify-content、align-items以及align-content。1-4任务4：图文混排-人物介绍页面布局弹性盒子模型

①flex-direction属性flex-direction指定主轴(maincross)的方向，即元素排列的方向。flex-direction:row|row-reverse|column|column-reverserow:水平方向，从左往右row-reverse:水平方向，从右往左column:垂直方向，从上往下column-reverse:垂直方向，从下往上1-4任务4：图文混排-人物介绍页面布局弹性盒子模型

②flex-wrap属性flex-wrap属性，指定弹性项目的换行方式，即弹性项目超过一行时如何换行。flex-wrap:no-wrap|wrap|wrap-reverseno-wrap:不换行(默认)wrap:正常换行

wrap-reverse:换行，第一行在下方，从下往上换行1-4任务4：图文混排-人物介绍页面布局弹性盒子模型

③flex-flow属性flex-flow属性，为flex-direction和flex-wrap的合并属性，其中第一个为flex-direction,第二个为flex-wrap。flex-fow:<flex-direction><flex-wrap>1-4任务4：图文混排-人物介绍页面布局弹性盒子模型

④justify-content属性justify-content属性，指定弹性内容在主轴上的排列方式。justify-content:flex-start|flex-center|flex-end|space-between|space-aroundflex-start:从主轴起点(mainstart)到主轴终点(mainend)center:居中

flex-end:从主轴终点(mainend)到主轴起点(mainstart)space-between:均匀分布在行里，第一个元素边界与行起始位置边界对齐，最后一个元素边界与行结束位置的边界对齐

space-around:均匀分布在行里，两端子元素与行边界有间距1-4任务4：图文混排-人物介绍页面布局弹性盒子模型

⑤align-items属性align-items属性，指定弹性项目在纵轴上的对齐方向。align-items:flex-start|center|flex-end|base-line|stretchflex-start:项目对齐纵轴的起点(crossstart)center:居中

flex-end:项目对齐纵轴的终点(crossend)baseline:基于基线对齐

stretch:拉伸(默认)，从起点(crossstart)到终点(croosend)1-4任务4：图文混排-人物介绍页面布局弹性盒子模型

⑥align-content属性align-content属性，指定当主轴(mainaxis)随项目换行时，多条主轴线如何对齐。align-content:flex-start|center|flex-end|space-between|space-around|stretchflex-start:从纵轴起点(crossstart)到终点(crossend)center:居中

flex-end:从纵轴终点(crossend)到纵轴起点(crossstart)space-between:元素均匀分布在列里，第一个元素边界与列起始位置边界对齐，最后一个元素边界与列结束位置的边界对齐

space-around:元素均匀分布在列里，两端子元素与列边界有间距

stretch:拉伸(默认)，拉伸项目以布满纵轴长度1-4任务4：图文混排-人物介绍页面布局弹性盒子模型

（2）Flex项目尽管弹性容器已经有设置弹性项目的各种布局行为，但总有个别弹性项目需要自定义布局方式。Flex项目包含6个属性，分别为order、flex-grow、flex-shrink、flex-basis、flex以及align-self属性。①order属性，指定弹性项目的排列序号，数值越小越靠前。order:<integer>②flex-grow属性，指定弹性项目在有空余空间的放大比例。默认为0：表示即使有剩余空间也不放大。flex-grow:<number>③flex-shrink属性，指定弹性项目在空间不够时的缩小比例。默认为1：表示空间不够时项目将缩小。flex-shrink:<number>④flex-basis属性，指定弹性项目的基本长度。flex-basis:<length>⑤flex属性，为flex-grow、flex-shrink和flex-basis的合并属性。flex:flex-grow,flex-shrink,flex-basis默认:0,1,autoauto:1,1,autonone:0,0,auto1-4任务4：图文混排-人物介绍页面布局弹性盒子模型

align-self属性align-self属性，指定弹性项目在纵轴上的对齐方式，将覆盖掉弹性容器的align-items属性。align-self:autoflex-start|center|flex-end|base-line|stretchauto:自动

flex-start:项目对齐纵轴的起点(crossstart)center:居中

flex-end:项目对齐纵轴的终点(crossend)baseline:基于基线对齐

stretch:拉伸(默认)，从起点(crossstart)到终点(croosend)1-4任务4：图文混排-人物介绍页面布局任务实施“公司优势”模块CSS样式设计（三列布局）02.“公司优势”模块CSS样式设计（图像和文本样式）03.01.“公司优势”模块HTML结构设计1-2任