模块4 网页布局

DreamweaverCC网页设计与制作（4版）模块4网页布局01模块1网页基础知识03模块4网页布局05模块6网站的测试与发布02模块3初级应用04模块5高级应用06模块7综合应用07模块2HTML代码任务描述

通过布局“奋扬青春”网页，学会使用表格布局页面的方法和技巧。任务8奋扬青春

——表格布局页面任务解析在本任务中，需要完成以下操作：1.掌握表格的创建方法和表格、单元格的属性设置；2.掌握嵌套表格的创建方法和属性的设置。3.学会使用表格布局页面的方法和技巧。具体操作：（1）将素材中的renwu8文件夹复制到D盘根目录。运行Dreamweaver，新建站点“奋扬青春”，站点文件夹为D:\renwu8，在站点根目录下新建网页文件index.html；打开“页面属性”对话框，在“外观（css）”分类选项卡中设置背景颜色为#ccc，左、上边距为0；在“链接”分类选项卡中设置链接颜色为黑色，变换图像链接颜色为红色，已访问链接颜色为绿色，始终无下划线，页面属性设置如图4-1所示。

图4-1页面属性设置具体操作：（2）选择“插入→表格(table)”命令，设置表格大小为1行2列，表格宽度为1200像素，其他项为0，如图4-2所示，单击“确定”按钮插入表格。（3）单击表格的边框线，选中整个表格，在“表格”属性面板中设置“对齐”为“居中对齐”，如图4-3所示。

图4-2“表格”对话框

图4-3“表格”属性面板具体操作：（4）将光标定位到表格第1个单元格中，在属性面板中设置宽度为1000，选择“插入→图像”命令，在打开的“选择图像源文件”对话框中选择“renwu8_01.gif”文件，单击“确定”按钮插入图像,如图4-4所示。

图4-4第一个表格效果（5）将光标定位到第2列单元格，在“代码”视图中为单元格添加背景图像“renwu8_02.gif”；代码如图4-5所示。再次光标定位该单元格，选择“插入→表格”命令，设置表格大小为4行1列，表格宽度为100%，其他项为0，单击“确定”按钮插入嵌套表格tab1；分别设置嵌套单元格的第1、2、3、4行行高为38、40、40、40，如图4-6所示。

图4-5第2列单元格的背景图像代码

图4-6第2列单元格的嵌套表格具体操作：（6）光标定位到嵌套表格的第2行单元格，选择输入法“软键盘”中的“特殊字符”项，在单元格中输入◆，然后在单元格中输入文字“设为首页”；同样的方法，在第3行和第4行输入“◆联系我们”和“◆加入收藏”，效果如图4-7所示。

图4-7表格效果1（7）将光标定位到表格的后面或下一行，选择“插入→表格”命令，设置表格大小为1行1列，表格宽度为1200像素，其他项为0，单击“确定”按钮，插入表格。在表格属性面板中设置对齐为居中对齐，单元格属性面板中设置高为41，如图4-8所示。

图4-8表格效果2具体操作：（7）将光标定位到第二个表格，在“代码”视图中为表格添加背景图像“renwu8_03.gif”,代码如图4-9所示。再次光标定位该表格，选择“插入→表格”命令，设置表格大小为1行9列，表格宽度为100%，其他项为0，单击“确定”按钮，插入嵌套表格tab2；分别设置嵌套表格的第1列列宽373，第9列列宽为113，第2列到第8列平均分配列宽为102，高均为41；如图4-10所示。

图4-9第2个表格代码

图4-10第2个表格的嵌套表格设置（8）在第二个表格的嵌套表格中的第2列到第8列，分别输入文本“部门简介，规章制度，教育管理，资助工作，咨询服务，心理服务和宿舍管理”；创建CSS样式表ys01，定义ys01样式表的字体为黑体、大小为16px、颜色为白色、加粗、居中显示，分别为7个单元格的文本内容套用ys01样式，如图4-11所示。

图4-11第2个表格效果具体操作：（9）将光标定位到第2个表格的后面或下一行，选择“插入→表格”命令，设置表格大小为1行3列，表格宽度为1200像素，其他项为0，单击“确定”按钮插入表格。在表格属性面板中设置对齐为居中对齐，单元格属性面板中设置高为542，第三个表格的布局图和参数如图4-12所示。

图4-12第3个表格的布局参数值具体操作：（10）分别设置第三个表格的第1列和第3列列宽为100，第2列列宽为1000。选择表格切换为扩展模式，光标定位在第2列单元格中，插入为4行2列，表格宽度为100%，其他项为0的嵌套表格tab3，分别设置第1行高为207，第2行高位40，第3行高为160，第4行高为45，第1列列宽为390，第2列列宽为610，合并第1行单元格；光标定位在tab3的第3行第1列单元格，插入1行3列，表格宽度为100%，其他项为0的嵌套表格tab3-1，设置tab3-1的高为160，第1列和第3列列宽分别为4%；在tab3的下方，插入1行2列，表格宽度为100%，其他项为0的嵌套表格tab4，设置tab4的高为90，第1列单元格宽为355；单击“插入”面板“布局”类别中的“标准”按钮，切换表格为标准模式。扩展模式如图4-13所示，标准模式如图4-14所示。

图4-13第3个表格的扩展模式图

图4-14第3个表格的标准模式具体操作：（11）为第3个表格部分单元格插入图片。第三个表格第1列和第3列插入图片“renwu8_04.gif”和“renwu8_06.gif”；第2列嵌套表格tab3的第1行插入图片“renwu8_05.gif”，第2行第1列和第2列分别插入图片“renwu8_07.gif”和“renwu8_08.gif”，第4行第1列和第2列分别插入图片“renwu8_11.gif”和“renwu8_12.gif”；第5列嵌套表格tab4的第2列插入图片“renwu8_14.gif”，如图4-15所示。

图4-15第三个表格插入图片的效果具体操作：（12）在“代码”视图中，为第3个表格部分单元格设置背景图像。tab3的第3行第1列单元格的背景图像设置为renwu8_09.gif，第2列单元格的背景图像设置为图片“renwu8_10.gif”；tab4的第1列单元格的背景图像设置为“renwu8_13.gif”，如图4-16所示。

图4-16第三个表格插入图片和背景图像的效果具体操作：（13）为第3个表格部分单元格添加文字。将text文件夹下的“通知通告.doc”内容复制到tab3-1的第2列单元格中。创建CSS样式表ys02，定义ys02样式表的字体大小为12px、行高为20px，选中通知通告文本内容套用ys02样式；同样的方法复制和设置“学生动态”的”文本内容；在“下载专区”中手动输入文本内容““困难学生补助申请书、学生会干部竞聘申请书、缓交学费申请表”按效果图进行分段和缩进，并套用ys02样式，如图4-17所示。

图4-17添加文字后的第三个表格效果具体操作：（14）为“学生动态”和“下载专区”文字设置空链接，创建滑动文字变色效果。选中“学生动态”中的第一行文字，在属性面板的链接框中输入“#”。同样的办法为其它各行文字创建空链接。（15）在第3个表格下方，插入1行1列，表格宽度为1200像素，其他项为0的表格，在表格属性面板中设置对齐为居中对齐，单元格属性面板中设置高为60，水平居中对齐;在”代码“视图为表格设置背景图像为“renwu8_15.gif”，将光标定位单元格中，输入文本内容“@版权所有|站点地图|友情链接、建议使用1280*800分辨率”，并套用ys02样式表，如图4-18所示。

图4-18index.html效果图表格布局此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处

网页设计中，宽度不是绝对固定的。网页尺寸由两个因素决定的：一是显示器屏幕，二是浏览器软件。网页的宽度约等于屏幕大小减去22px，如1024px宽的屏幕，其网页宽度不大于1002px,一般设定为950px或960px。

为了使网页更加美观大方，在制作网页时，需要先对网页的轮廓进行规划，将文字、图片等网页元素进行精确定位，这就需要用到网页的布局。表格布局是目前最常见的网页布局方式之一，它灵活方便、简单易学，熟练地使用表格布局是网页制作的基本要求。此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处

表格由行和列组成，每行或每列又由单元格组成，如图3-19所示，当将某行或某列设为标题行或标题列后，默认情况下，标题单元格中的内容将自动加粗并居中显示。标号①所示的是单元格间距，指的是单元格和单元格之间的距离。标号②所示的是单元格边距(也称为填充)，指的是单元格中的内容与单元格边框之间的距离。

表格的组成此处添加你的信息此处（1）创建表格

①在“文档”窗口中，将光标定位到要插入表格的位置，执行以下操作之一，打开“表格”对话框，如图所示。◉选择菜单“插入→表格（table）”命令。◉单击“插入”面板“html”标签中的“表格（table）”按钮。◉按【Ctrl+Alt+T】组合键。

创建表格此处添加你的信息此处

创建嵌套表格就是在已有表格的某单元格中插入新的表格，如图所示。使用表格的嵌套可以使大量的网页元素进行复杂定位，从而整齐地展示在浏览者面前，在一些综合性网站中都会普通使用。

若要在当前表格的单元格中插入嵌套表格，可以直接拖动“插入”面板“常用”类别中的“表格”按钮到相应的单元格中，或者将光标定位到该单元格中，使用前面新建表格的方法插入表格。创建表格（1）选择整个表格

◉单击表格的边框线。

◉将光标定位到表格中，在标签选择器中单击<table>标签。

◉将鼠标指针移到表格的左上角，或边框线附近的敏感区域，当鼠标指针的右下角出现表格的缩略图时，单击鼠标左键。

◉将光标定位到表格中，按两次【Ctrl+A】组合键。（2）选择行

◉直接用鼠标拖动选中该行中的所有单元格。

◉将光标定位到要选择行的某个单元格中，在标签选择器中单击<tr>标签。

◉将鼠标指向要选择行的左边缘，当鼠标指针变为右箭头“”时，单击鼠标左键。（3）选择列

◉直接用鼠标拖动选中该列中的所有单元格。

◉将鼠标指向要选择列的上边缘，当鼠标指针变为下箭头“”时，单击鼠标左键。

◉光标定位到单元格中，在对应列的“列标题”菜单中选择“选择列”命令。选择表格元素（4）选择单元格

要选择单个单元格，可采用以下方法。

◉按住【Ctrl】键在单元格内单击。

◉在单元格内单击并向相邻的单元格拖动鼠标。

◉将光标定位到单元格内，单击标签选择器上的<td>标签。

◉将光标定位到单元格内，按【Ctrl+A】组合键。

要选择多个单元格，可采用以下方法。

◉直接用鼠标从第一个单元格拖到最后一个单元格。

◉将光标定位到第一个单元格内，按住【Shift】键单击最后一个单元格，可以选择矩形区域内的所有单元格，如图4-27所示。

◉按住【Ctrl】键依次单击要选择的单元格，可以选择不连续的单元格，再次单击可取消其选择。选择表格元素

图4-29“表格”属性面板“表格”：用来输入表格的名字。“行”和“列”：用来指定表格中行、列的数目，还可以通过修改此值，达到添加或删除表格中行或列的目的。“宽”：以像素为单位或按百分比指定表格宽度。“填充(cellpad)”：指的是单元格边距，即单元格的内容和单元格边框之间的像素数。

间距(cellspace)”：指的是单元格间距，即相邻单元格之间的像素数。“对齐(align)”：用于设置表格相对于同一段落中其他元素（例如文本和图像）的显示位置。“边框(border)”：指定表格边框的宽度（单位为像素），若表格仅用于页面布局可将值设为0。“清除列宽”按钮：从表格中删除所有明确指定的列宽。“清除行高”按钮：从表格中删除所有明确指定的行高。“将表格宽度转换成像素”按钮：将表格中每列的宽度和整个表格的宽度设置为以像素为单位的当前宽度。“将表格宽度转换成百分比”按钮：将表格中每列的宽度和整个表格的宽度设置为按百分比表示的宽度。设置表格属性

图4-30“单元格”属性面板“合并单元格”：将所选的单元格、行或列合并为一个单元格。“拆分单元格”：将一个单元格拆分成多个单元格。“水平”和“垂直”：设置单元格中的内容在水平和垂直方向上的对齐方式。“宽”和“高”：用来设置所选单元格的宽度和高度，可以在文本框中输入以像素为单位的数字，也可以输入按表格宽度或高度的百分比指定的以百分号“%”结尾的数字。“不换行”复选框：如果选中了该复选框，当单元格中的文本超过单元格的宽度时，单元格会自动加宽以容纳所有文本；如果没有选中该复选框，当单元格内的数据超过单元格的宽度时，会自动换行。“标题”复选框：如果选中该复选框，则选择的单元格被设置为表格标题单元格。“背景颜色”：设置所选单元格的背景颜色。设置单元格属性（1）调整表格的大小

◉选中表格后，表格边框会出现3个控制柄，鼠标指向控制柄呈双向箭头时拖动鼠标，可调整整个表格的大小。

◉选中表格后，在表格属性面板的“宽”文本框中输入数值以精确指定表格的宽度。当调整整个表格的大小时，表格中所有单元格将按比例更改大小。如果表格的某单元格指定了明确的宽度或高度，则调整表格大小时不会更改这些单元格指定的宽度或高度。（2）调整行高和列宽用鼠标拖动要更改行或列的边框线。改变行高，可上下拖动该行的下边框线，如图4-33所示；改变列宽，可左右拖动该列的右边框线，如图3-34所示。表格的基本操作

图4-33改变行高及效果图

图4-34改变列宽及效果图（3）插入行或列

◉选中行或列，右键选择菜单“表格-插入行（插入列）”命令，如图3-35所示，可在所选行的上方插入一新行或所选列的左方插入一新列。

◉选中行或列，右键选择菜单“表格→插入行或列”命令，弹出“插入行或列”对话框，如图4-36所示，设置插入的行（列）数及位置，单击“确定”按钮，可以插入多行或多列。

◉打开某列的“列标题”菜单，选择“左侧插入列”或“右侧插入列”，可在当前列的左侧或右侧插入一新列，如图4-37所示。表格的基本操作

图4-35插入行或列

图4-36

“插入行或列”对话框（4）删除行或列

◉选中要删除的行或列，右键选择菜单“表格-删除行（删除列）命令。

◉选中要删除的行或列，直接按【Del】键。（5）合并和拆分单元格

①选择要进行合并的单元格，具体操作步骤如下。

◉右键菜单中选择“表格→合并单元格”命令。

◉单击属性面板上的“合并单元格”按钮。

◉按【Ctrl+Alt+M】组合键。

②拆分单元格是将一个单元格分成多个单元格，具体操作步骤如下。

◉右键菜单中选择“表格→拆分单元格”命令。

◉单击属性面板上的“拆分单元格”按钮。

◉按【Ctrl+Alt+S】组合键。表格的基本操作图4-37“列标题”右键菜单图4-38“拆分单元格”对话框

Dreamweaver中有两种表格模式，分别为标准模式和扩展表格模式，如图4-40所示。标准模式是表格默认的视图模式，表格及其内容的绝大部分操作适合在该模式下进行。在扩展表格模式下，Dreamweaver会临时向文档中的所有表格添加单元格边距和间距，并且增加表格的边框，可使编辑操作更加直观。使用这种模式，可以方便选择表格中的内容或精确的定位插入点。扩展表格模式图4-40标准模式和扩展表格模式提醒：要进入扩展表格模式，可以右键选择菜单“表格→扩展表格模式”命令。

在扩展表格模式下，选择内容或定位插入点后，可使用以下方法返回标准模式。

◉直接单击“文档”窗口上方的“退出”。

◉选择再次单击右键选择菜单“表格→表格扩展模式”命令。◉任务描述

通过布局“架构梦想”网页，学会使用CSS+Div布局和美化网页。任务9

架构梦想——

CSS+Div布局页面任务解析

在本任务中，需要完成以下操作：

◉学会Div的创建和属性设置；

◉学会使用CSS+Div布局和美化网页。具体操作：（1）页面布局图和各Div（块）的关系，如图4-41所示。

图4-41网页布局图及各Div（块）的关系（2）将素材中的renwu9文件夹复制到D盘根目录。运行DreamweaverCC，新建站点“架构梦想”，站点文件夹为D:\renwu9。打开站点根目录新建空白文档index.htm，修改标题为“CSS+Div布局网页”,打开“页面属性”对话框，在“外观（css）”分类选项卡中设置背景颜色为#CCC,“左、右、上、下”边距均为0px。具体操作：（3）创建嵌套Div。打开index.html，“插入→Div”,在DOM面板中输入Div的名字“#container”；光标定位在“#container”层中，再次选择“插入→Div”，选择“嵌套”，如图4-42，插入嵌套Div,在DOM面板中输入名称“#banner”；同样的方法创建“#content”、“#footer”嵌套Div，DOM面板如图4-43所示。

图4-42Div插入模式

图4-43DOM面板具体操作：(4)定义container层的样式。在CSS设计器中，创建#container样式，并设置属性，如图4-44所示。

图4-44#container的属性设置

图4-45#banner的属性设置具体操作：（4）在banner层中插入图片并编辑CSS样式。光标定位在banner层中，选择“插入→图像（image）”命令，打开“选择图像源文件”对话框，选择“images”文件夹中的01.gif，单击“确定”按钮。

在CSS设计器中，创建#banner样式并设置属性，如图3-45所示；完善banner层后的“拆分”视图如图4-46所示。

图4-46完善banner层后的“拆分”视图具体操作：（5）在content层中插入图片并编辑CSS样式表。光标定位在#content层中，选择“插入→图像（image）”命令，打开“选择图像源文件”对话框，选择“images”文件夹中的2.gif，单击“确定”按钮。在CSS设计器中，创建#content样式并设置属性，如图4-47所示；完善content层后的“拆分”视图如图4-48所示。

图4-47#content的属性设置

图4-48完善content层后的“拆分”视图具体操作：（6）在footer层中设置背景图像和文本，并编辑CSS样式表。在CSS设计器中，创建#footer样式并设置属性，如图4-49所示。

图4-49#footer的属性设置

图4-50完善footer层后的“拆分”视图具体操作：（7）光标定位在footer层中，将text文件夹下的“精益求精.doc”文本内容复制到footer层中。在CSS设计器中，创建#footerp样式并设置属性，如图4-51所示。

图4-51#footerp的属性设置

图4-52完善“footerp”的“拆分”视图(8)保存文件，按F12预览网页效果。具体操作：(8)保存文件，按F12预览网页效果。CSS定位与Div布局此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处

CSS+Div是网站标准（或简称web标准）中常用的术语之一。Div只是HTML语言中的一个标签，而CSS是一种语言，通常为了说明与HTML网页设计语言中表格（table）定位方式的区别。因为在XHTML网站设计标准中，不再使用表格定位技术，而是采用CSS+Div的方式实现各种定位。此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处Div元素是一个块级元素，也是用来插入各种网页元素并能够自由精确定位和容易控制的容器。（1）创建Div，有以下2种方法：◉选择菜单“插入-Div”，弹出“插入Div”对话框，插入位置可选择在“在插入点”、“在标签选择之前”和“在标签选择之后”，如图3-54所示。◉选择“插入”面板中的“html→Div”，同样也会弹出如图4-54所示的插入面板。如果不是新创建的Div，插入面板会如图4-55所示。

图4-54插入Div对话框

图4-55插入Div对话框DIV-基本操作此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处（2）选择Div的方法◉单击Div的边框线。◉在“DOM”面板中单击Div。◉按下Shift键，分别单击要选择的各个Div的内部或边框线，可以选中多个Div。在“DOM”面板中还可以为Div命名并调整顺序。

DIV-基本操作此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处

在css设计器中的属性面板中，可以为Div设置布局、文本、边框和背景等属性值，如图4-56、图4-57、图4-58和图3-59所示。图4-56布局属性设置

图4-57文本属性设置

图4-58边框属性设置

图4-59背景属性设置

DIV-属性设置此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处

一个盒子模型由content(内容)、boder(边框)、padding(间隙)和margin（间隔）等4个部分组成，如4-60所示。

一个盒子的实际宽度（或高度）是由content+boder+padding+margin组成的。在CSS中可以通过设定width和height的值来控制content的大小，并且对于任何一个盒子，都可以分别设定各自的boder、padding和margin。

图4-60盒子模型

盒子模型此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处（1）float定位：是CSS排版中非常重要的手段。属性float的值很简单，可以设置为left、right或者默认值none.当设置了元素向左或者向右浮动时，元素会向其父元素的左侧或右侧靠紧。（2）position定位：块的位置，即块相对于其父块的位置和相对于它自身应该在的位置。

position属性共有6个值:

absolute:生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。

fixed:生成绝对定位的元素，相对于浏览器窗口进行定位。

relative:生成相对定位的元素，相对于其正常位置进行定位。

static:默认值。

inherit:规定应该从父元素继承position属性的值。（3）z-index空间位置：用于调整定位时重叠块的上下位置，与它的名称一样，想象页面为x-y轴。垂直于页面的方向为z轴，z-index值打的页面位于其值小的上方。

盒子模型此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处（1）使用Div对页面整体规划

使用Div可以将页面首先在整体上进行<div>标记的分块，然后对各个块进行CSS定位，最后再在各个块中添加相应的内容。这样进行<div>标记过的页面更新起来会十分容易，同时也可以通过修改CSS的属性来重新定位。

CSS布局要求设计者首先对页面有一个整体的框架规划，包括整个页面分为哪些模块、各个模块之间的父子关系如何等。以最简单的框架为例，页面是由Banner、主题内容（content）、菜单导航（links）和脚注（footer）等几个部分组成，各个部分分别用自己的id来标识，整体规划如图3-61所示。图中的每个块都是一个<div>,页面中的所有Div块都属于块#container,一般的Div布局都会在最外边加上这么一个父Div,以便对页面的整体进行调整。对于每个Div块，还可以再加入各种元素或者行内元素。（2）设计各块的位置当页面的内容已经确定后，则需要根据内容本身来考虑整体的页面版型，例如单栏、双栏或左中右等。考虑到导航的易用性，我们用双栏模式，如图3-62所示。CSS+Div布局的常用方法任务描述

通过布局“数字未来”网页，学会使用Flex布局页面的方法和技巧。任务10数字未来

——Flex布局任务解析

在本任务中，需要完成以下操作：

◉巩固CSS+Div布局和美化网页的方法和技巧。

◉学会使用Flex布局和美化网页的方法和技巧。具体操作：（1）页面布局图和各Div（块）的关系，如图4-62所示。

图4-62页面版型具体操作：（2）将素材中的renwu10文件夹复制到D盘根目录。运行DreamweaverCC，新建站点“数字未来”，站点文件夹为D:\renwu10，在站点根目录下新建网页文件index.html；打开“页面属性”对话框，在“外观（css）”分类选项卡中设置背景颜色为#000，文本颜色为#FFF；页面属性设置如图4-63所示。

图4-63页面属性设置具体操作：（3）创建嵌套Div。打开index.html，“插入→Div”,在DOM面板中输入Div的名字“#wrapper”；光标定位在“#wrapper”层中，再次选择“插入→Div”，分别插入嵌套Div,“#banner”和“#main”；同样的方法创建“#content”、“#img-list”嵌套Div，DOM面板如图4-64所示。

图4-64DOM面板具体操作：(4)在CSS设计器中分别定义wrapper层的样式,设置宽为865px,左、右边界为auto，如图4-65、图4-66所示。

图4-65wrapper的宽度设置图4-66wrapper的边界设置具体操作：(5)在CSS设计器中定义banner层的样式,并插入“images”文件夹中的图像“1.jpg”，如图4-67、图4-68所示。

图4-67banner的属性设置

图4-68设置好banner层后的“拆分”视图具体操作：(6)在content层中输入“数字未来.doc”中的文本并编辑CSS样式表,如图4-69、图4-70、图4-71和图4-72所示。

图4-69content的布局属性图4-70content的文本属性图4-71content的边框属性具体操作：

图4-72content的文本内容及圆角设置具体操作：（7）在img-list层插入图像及Flex布局样式。光标定位在img-list层中，插入“images”文件夹中的“2.jpg”、“3.jpg”、“4.png”和“5.jpg”四幅图像，并设置四个图像间隔平均分配的flex布局样式，如图4-73、图4-74和图4-75所示。

图4-73content的flex布局属性

图4-74content的padding属性图4-75content的flex布局属性-两端对齐，图像之间间隔相等具体操作：

图4-76img-list层的Flex布局样式具体操作：(7)保存文件，按F12预览网页效果。

图4-77index.html效果图Flex布局此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处

Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{display:flex;}行内元素也可以使用Flex布局。.box{display:inline-flex;}注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处

采用Flex布局的元素，称为Flex容器（flexcontainer），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flexitem），简称"项目"。

图4-78Flex容器

基本概念图3-78Flex容器此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处

（1）flex-direction属性：决定主轴的方向（即项目的排列方向）。.box{flex-direction:column-reverse|column|row|row-reverse；}图4-79flex-direction效果·column-reverse：主轴为垂直方向，起点在下沿。·column：主轴为垂直方向，起点在上沿。·row（默认值）：主轴为水平方向，起点在左端。·row-reverse：主轴为水平方向，起点在右端。

容器的常用属性此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处（2）flex-wrap属性:默认情况下，项目都排在一条线（又称"轴线"）上,flex-wrap属性定义，如果一条轴线排不下，如何换行。.box{flex-wrap:nowrap|wrap|wrap-reverse;}

·nowrap（默认）：不换行。·wrap：换行，第一行在上方。

·wrap-reverse：换行，第一行在下方。

容器的常用属性此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处（3）justify-content属性：定义项目在主轴上的对齐方式。.box{justify-content:flex-start|flex-end|center|space-between|space-around；}具体对齐方式与轴的方向有关,下面假设主轴为从左到右。

·flex-start（默认值）：左对齐。·flex-end：右对齐。

·center：居中。