HTML5+CSS3网页设计任务教程（第2版）课件 汤佳 单元6-8 页面整体布局、Bootstrap5框架简介、HTML5综合案例

页面整体布局单元6目录02clearfix和clear的使用03常用经典布局01960网格系统在网页制作中的使用04常用弹性布局05表格基本知识06使用表格制作个人简历07使用表格制作QQ邮箱08使用基于lib-flexible库的rem单位制作app6-1HTML5+CSS3网页设计任务教程（第二版）960网格系统在网页制作中的使用任务6-1

960网格系统在网页制作中的使用960网格系统是使用固定宽度960px置中对齐画面的方式呈现在网页上。去除左右两边各10px的空间，留下中间940px的区块以20px作为间隔分栏。在空间设计上，可随意合并多栏作为版面配置及网页尺寸的设定，合并出来的栏宽也不会有畸零数，有利于CSS中DIV宽度的设定。960网格系统常用规格有两种：一个是12栏式的，另一个是16栏式的。如果你的设计里面分3个区块你就选择12栏式的，那是因为12能被3整除；同理假如你的设计分四个区块，你可以选12栏式或者16栏式，那时因为12和16都可以被4整除。任务6-1

960网格系统在网页制作中的使用任务6-1

960网格系统在网页制作中的使用〓

两栏网页任务6-1

960网格系统在网页制作中的使用〓

不均分三栏任务6-1

960网格系统在网页制作中的使用〓

均分三栏任务6-1

960网格系统在网页制作中的使用〓

均分四栏6-2HTML5+CSS3网页设计任务教程（第二版）clearfix和clear的使用任务6-2

clearfix和clear的使用1、clear:both在父层<div>内，子层<div>结束处加入<div>，设置clear:both在左右两侧均不允许浮动元素。但是这么做会增加一个没有意义的<div>。2、.clearfix:after.clearfix:after{/*在类名为“clearfix”的元素内最后面加入内容*/content:".";/*内容为“.”就是一个英文的句号而已。也可以不写*/display:block;/*加入的这个元素转换为块级元素*/clear:both;/*清除左右两边浮动*/visibility:hidden;/*设置为隐藏。它和display:none;是有区别的。仍然占据空间，只是看不到而已*/height:0;/*高度为0*/font-size:0;/*字体大小为0*/}任务6-2

clearfix和clear的使用1、clear:both表示“清除浮动”。both会在两侧清理浮动，并将其左边和右侧的浮动元素移除。简单来说，就是谁设定了“clear:both”，哪个元素不能出现在左边和右边。按照定义，写入了clear:both的元素不再允许周围有浮动的元素产生，所以div.left对于div.right也就失去了浮动的效果，div.left对于div.right来说也就有了高度，div.right就会位于div.left的下面，div.right的位置也就撑起了父级元素的高度，解决了高度坍塌的问题。任务6-2

clearfix和clear的使用2、clearfix整段代码就相当于在浮动元素后面跟了个宽高为0的空<div>，然后设定它clear:both来达到清除浮动的效果。原理是经过使用after伪对象，它将在应用clearfix的元素结尾添加content中的内容，也就是一个"."，并且把他设置为块级元素（display="block"）；高度设置为0，clear="both"，然后将其内容隐藏掉（visibility="hidden"），这样就会撑开此块级元素。之所以用它，是因为，你不必在HTML文件中写入大量无意义的空标签，又能清除浮动。任务6-2

clearfix和clear的使用6-3HTML5+CSS3网页设计任务教程（第二版）常用经典布局任务6-3

常用经典布局任务6-3

常用经典布局任务6-3

常用经典布局任务6-3

常用经典布局一、页面结构容器:container页头：header内容：content/container页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：leftrightcenter任务6-3

常用经典布局〓Div+CSS命名规范二、导航导航：nav主导航：mainnav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu子菜单：submenu标题:title摘要:summary任务6-3

常用经典布局〓Div+CSS命名规范三、功能标志：logo广告：banner登陆：login登录条：loginbar注册：regsiter搜索：search功能区：shop标题：title加入：joinus状态：status按钮：btn滚动：scroll标签页：tab文章列表：list提示信息：msg当前的:current小技巧：tips图标:icon注释：note指南：guild服务：service热点：hot新闻：news下载：download投票：vote合作伙伴：partner友情链接：link版权：copyright6-4HTML5+CSS3网页设计任务教程（第二版）常用弹性布局任务6-4

常用弹性布局〓百分比布局任务6-4

常用弹性布局〓

圣杯布局任务6-4

常用弹性布局〓

侧边固定宽度任务6-4

常用弹性布局弹性布局，即Flex布局，是CSS3中的一种新的布局模式，可以简便、完整、响应式地实现各种页面布局，当页面需要适应不同的屏幕大小以及设备类型时非常适用。目前，几乎所有的浏览器都支持Flex布局。Flex语法如下：flex:flex-growflex-shrinkflex-basis|auto|initial|inherit;flex-grow：一个数字，规定项目将相对于其他灵活的项目进行扩展的量。flex-shrink：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。flex-basis：项目的长度。1、百分比分别设置：flex:0050%;，flex:0033.3%;2、上下左右四块都设置：flex:00100px;3、侧边栏设置：flex:0020%;内容设置flex:1;页脚设置flex:0010%;6-5HTML5+CSS3网页设计任务教程（第二版）表格基本知识任务6-5

表格基本知识〓

表格的基本属性及使用网页中的表格使用<table>标签表示，以<table>标记开始，以</table>标记结束。表格的基本构成最少需要三个元素：<table>、<tr>、<td>，其他的一些作为可选辅助存在。<table> 表示表格<thead> 表示表头<tbody> 表示表格主体<tfoot> 表示表脚<tr> 表示一行<th> 表示标题行单元格<td> 表示单元格<col> 表示一列<colgroup> 表示一组列<caption> 表示表格标题任务6-5

表格基本知识〓

表格的基本属性及使用网页中的表格使用<table>标签表示，以<table>标记开始，以</table>标记结束。表格的基本构成最少需要三个元素：<table>、<tr>、<td>，其他的一些作为可选辅助存在。<table>：表示表格

<tr>：表示一行<thead>：表示表头

<th>：表示标题行单元格<tbody>：表示表格主体

<td>：表示单元格<tfoot>：表示表脚

<col>：表示一列<caption>：表示表格标题

<colgroup>：表示一组列任务6-5

表格基本知识〓

表格的基本操作<table>标签常用属性<td>表示表格中的单元格，包括如下属性：1、colspan：规定单元格可横跨的列数；2、rowspan：规定单元格可横跨的行数；3、headers：规定与单元格相关的表头，该属性不会在普通浏览器中产生任何视觉变化，但可以被屏幕阅读器使用。任务中所表示的列内合并单元格、行内合并单元格以及合并两行两列需要用到colspan和rowspan属性。任务6-5

表格基本知识〓

表格的基本属性及使用任务6-5

表格基本知识〓

制作细边框表格1、cellspacing：单元格之间的距离。cellpadding：文字与单元格之间的距离。2、border-collapse属性设置表格的边框是否被合并为一个单一的边框。separate默认值。边框会被分开。不会忽略border-spacing和empty-cells属性。collapse如果可能，边框会合并为一个单一的边框。会忽略border-spacing和empty-cells属性。当border-collapse设置为collapse时，表格自身的border与cellspacing属性便没有作用了。任务6-5表格基本知识〓

制作细边框表格常用的制作细边框表格方法有三种，分别是：1、背景设置式：通过将表格背景色设置为黑色，将单元格背景设置为白色，并且将单元格之间的距离cellspaceing设置为大于0的数，从而让边框显示为黑色，cellspaceing值越大，表格框线越粗。2、边框设置式：通过直接设置表格的边框来实现细边框表格，为了方便查看，通过不同颜色的线条来显示边框线，tableborder是表格外一圈边框，tdborder是单元格边框thborder是表头边框。即在设置边框时如果表格外边框只设置上、右边框，单元格只设置下、左边框，保证边框不重复设置即可。3、层叠式：为表格<td>、<th>标签设置了边框线后，因内边框的线条重复设置，导致内边框线条较粗，影响美观，所以在表格CSS样式中需要设置border-collapse属性。任务6-5表格基本知识〓

制作细边框表格任务6-5

表格基本知识〓

表格宽高百分比设置一个<div>块级元素没有主动为其设置宽度和高度，浏览器会为其分配可使用的最大宽度(比如全屏宽度)，但是不负责分配高度，块级元素的高度是由子元素堆砌撑起来的。那么，html和body标签的高度也都是由子级元素堆砌撑起来的。浏览器默认宽度100%，高度为内容的高度，如果没有内容则高度为0。如果表格高度100%和宽度100%生效，为浏览器设置html,body{width:100%;height:100%}任务6-5

表格基本知识〓

表格宽高百分比设置任务6-5

表格基本知识〓

表格宽度、列宽度和行高度的设置1、通过设置表格属性align="center"。设置表格在网页居中。2、表格宽度在CSS样式中统一设置，本着“结构、表现、行为分离”的原则，一般不直接在<table>属性中设置。3、表格共有四列，在表格宽度设置好的情况下，一般不会四列都设置宽度，会留一列让其“自由呼吸”。4、表格一般都不设置高度，高度根据内容自由伸展。5、细边框表格可使用任务5-3中的第三种方法进行设置，即使用：border-collapse:collapse;设置单元格内容居中需要设置text-align:center;6、CSS3:nth-child(n)选择器可匹配属于其父元素的第n个子元素，不论元素的类型，其中n可以是数字、关键词或公式。例如要求表中第一、二列的样式相同就应该使用：trtd:nth-child(1),trtd:nth-child(2){……}任务6-5

表格基本知识〓

表格宽度、列宽度和行高度的设置任务6-5

表格基本知识〓

表格隔行变色本任务我们使用了CSS3:nth-child()选择器设置奇数行相同背景色和字体颜色，这个伪类选择器的使用方法具体如下：:nth-child(an+b)匹配文档树中在其之前具有an+b-1个兄弟节点的元素，其中n为正值或零值。简单点说就是，这个选择器匹配那些在同系列兄弟节点中的位置与模式an+b匹配的元素。示例：1、0n+3或简单的3匹配第三个元素。2、1n+0或简单的n匹配每个元素。3、2n+0或简单的2n匹配位置为2、4、6、8...的元素。你可以使用关键字even（偶数）来替换此表达式。4、2n+1匹配位置为1、3、5、7...的元素。你可以使用关键字odd（奇数）来替换此表达式。5、3n+4匹配位置为4、7、10、13...的元素。总之，a和b都必须为整数，并且元素的第一个子元素的下标为1。换言之就是，该伪类匹配所有下标在集合{an+b;n=0,1,2,...}中的子元素。任务6-5

表格基本知识〓

表格隔行变色任务6-5

表格基本知识〓

鼠标移上去表格行变色:hover选择器在实现超链接任务时使用过，其实这个伪类选择器是用于选择鼠标指针浮动在上面的元素，可用于所有元素，其中超链接标签<a>最多使用这个伪类选择器。任务中就需要将这个伪类选择器用于表格的行元素。即：tr:hover{……}任务6-5

表格基本知识〓

鼠标移上去表格行变色6-6HTML5+CSS3网页设计任务教程（第二版）使用表格制作个人简历任务6-6

使用表格制作个人简历1、根据任务要求可知本任务的页面文件的主体内容就是一个表单<form>，在表单内插入<h1>标记，用来做标题，写清楚任务的主题：个人简历。结合效果图设置body、字体、背景等样式。2、<form>标签内插入13行6列的<table>标签，可使用类选择器设置表格的样式，设置表格宽度为960px。依照效果图设置表格的行和列，并可分别使用类选择器设置表格的每一列以及不同单元格的样式，注意文字居中效果。3、将表格设置为细边框，同时设置单元格内容与边框之间的距离。4、结合表格的整体宽度适当地设置列的宽度，并按照要求合并单元格。例如<tdcolspan="2"rowspan="5"></td>为合并5行2列，合并完用来放置照片。5、注意个人简历中的标题单元格都是灰色背景，字体加粗的，需要进行单独设置。至此，可以完成个人简历框架页面效果，下面为进行内容的填充。任务6-6

使用表格制作个人简历任务6-6

使用表格制作个人简历6、每个单元格内填写文字，文本框，单选框、复选框、下拉列表、图片等不需要插入。7、自我评价的文字，放入段落<p>标记内，设置字体时，先写英文字体，再写中文字体，会优先匹配使用英文字体，但是在英文字体中找不到中文字符，这样中文就会自动使用后写的中文字体了。8、工作经验栏对应的内容是一个没有边框线的表格，表格3行3列，根据效果图分析可设置其宽度为700px，第一列左对齐，第二列左对齐，第三列居中对齐。9、性别，插入单选按钮组，注意name="sex"；政治面貌，插入单选按钮组，注意name="organization"；熟练程度，插入单选按钮组，注意name="degree"；计算机水平，插入单选按钮组，注意name="level"；爱好特长，插入复选按钮组，注意name="hobby"，checked="value"disabled="disabled"表示此项默认选中且不可编辑。name一致表示为同一组别。任务6-6

使用表格制作个人简历10、插入照片，设置<td>的样式align="center"valign="middle"，使得照片上下居中，左右居中。11、民族对应的内容采用<select>制作下拉列表，<option>为菜单项，<optionvalue="1"selected>汉</option>代表默认值是"汉"。12、设置我的主页，使用超链接，显示在新页面中，即target="_blank"。13、设置手机输入11个字符，maxlength="11"，表示文本框最多输入11位。14、采用<ol>有序列表，制作奖惩情况，采用<ul>无序列表，制作个人简历，其中个人简历的单元格<td>设置上下居中valign=“middle”。无论是有序列表还是无序列表，每个列项内容都是使用<li>...</li>标记的。任务6-6

使用表格制作个人简历6-7HTML5+CSS3网页设计任务教程（第二版）使用表格制作QQ邮箱任务6-7

使用表格制作QQ邮箱〓

框架制作1、插入两行两列的表格，设置属性border="0"cellspacing="0"cellpadding="0"，合并第一行单元格。2、新建类.table-out修饰表格width:100%height:100%，此时高度不起作用。3、样式表设置html，body样式margin:0，padding:0，width:100%，height:100%，为了让表格撑满整个浏览器。4、新建类.row-one，修饰表格第一行，根据上面背景图片的高度，设置height:67px（根据top_bg.jpg的高度来设置）。5、新建类.col-one，修饰表格第一列，根据左面菜单图片的宽度，设置width:188px（根据left-1.png的宽度来设置，left-1.png、left-2.png、left-3.png宽度一致）。左面菜单可以自行采用ps工具进行裁切。任务6-7

使用表格制作QQ邮箱〓

框架制作任务6-7

使用表格制作QQ邮箱〓

上部、左部内容填充6、在table.table-out表格第一行内插入一行三列表格，表格border="0"cellspacing="0"cellpadding="0"。第一列和第三列需要设置宽度，第二列不需要设置。第一列和第三列都把图像设置为背景。7、新建类.table-top：height:67pxwidth:100%修饰上面一行三列的表格。8、新建类.logo，根据logo图片的大小，设置width:201px（根据logo.png的宽度来设置），高度不需要设置，因为表格已经具有高度67px，设置背景为logo.png背景不重复background-repeat:norepeat；新建类.topbg：width:463px（根据top_bg.jpg的宽度来设置）高度也不需要设置，设置背景为topbg.jpg，背景不重复background-repeat：norepeat。.logo、.topbg分别修饰table.table-top的第一列和第三列。9、在table.table-out表格第二行第一列下插入三行一列表格，表格border="0"cellspacing="0"cellpadding="0"。第一行和第三行需要设置高度，第二行不需要设置。10、新建类.table-left修饰左面的三行一列的表格，width:188pxheight:100%，用来放左面的导航。11、新建类.row-1：height:120px（根据left-1.png的高度来设置）背景设置成left-1.png；新建类.row-2高度不要设置，背景设置成left-2.png；新建类.row-3：height:12px（根据left-3.png的高度来设置）背景设置成left-3.png。.row-1、.row-2、.row-3分别修饰table.table-left的第一行、第二行和第三行。任务6-7

使用表格制作QQ邮箱〓

上部、左部内容填充任务6-7

使用表格制作QQ邮箱〓

右部内容填充12、设置表格第二行第二列对齐方式为垂直顶端对齐并插入两行一列表格，表格border="0"cellspacing="0"cellpadding="0"。13、新建类.table-right：width:100%height:100%，用来修饰右面插入的两行一列的表格。14、新建类.row-4，height:6px（根据right-1.png、right-2.png的高度来设置），背景设置为right-2.png，用来修饰右面表格的第一行。15、在右面表格第一行插入right-1.png，制作圆角。16、在右面表格第二行，插入<iframe>标签，新建类.frame：width:100%height:100%，用来修饰<iframe>标签。设置用来放置邮箱内容，邮箱内容在另一个网页单独制作。任务6-7

使用表格制作QQ邮箱〓

右部内容填充6-8HTML5+CSS3网页设计任务教程（第二版）使用基于lib-flexible库的rem单位制作app任务6-8

使用基于lib-flexible库的rem单位制作app任务6-8

使用基于lib-flexible库的rem单位制作apprem基本知识：1、rem是CSS3新增的一个相对单位（rootem，根em）。使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前所有的浏览器（ie8及以下版本除外）都支持rem。2、rem的计算方法：需转换的px值/自适应对象宽度px值*10。3、通常在写移动端页面的时候，我们都会设置viewport，保证页面缩放没有问题，最常见的viewport的meta标签如下：<metaname="viewport"content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>4、文本字号不建议使用rem。任务6-8

使用基于lib-flexible库的rem单位制作app制作步骤：1、制作头部和banner制作我们搭建各页面相同的框架部分，包含顶部菜单栏、搜索框、banner以及底部工具栏。采用position:fixed;属性固定顶部和底部菜单。2、底部导航制作我们采用<UL>制作底部菜单栏，每个菜单的宽度为2.5rem。3、主页面菜单制作主页菜单和底部导航的制作方法类似，宽度根据实际需求来计算，窗口的宽度为10rem。4、index.html、author.html、book.html、logon.html的制作可以参考之前所学知识。任务6-8

使用基于lib-flexible库的rem单位制作app页面整体布局单元6Bootstrap5框架简介单元7目录02制作栅格化布局页面03制作响应式导航栏01Bootstrap5基础知识04制作响应式轮播图05制作响应式文字和图片06制作完整的响应式网站7-1HTML5+CSS3网页设计任务教程（第二版）Bootstrap5基础知识任务7-1Bootstrap5基础知识什么是响应式网站？响应式网站是一种网页布局能够兼容多个终端的网站，无论用户使用笔记本、平板还是移动终端，页面都能够自动切换分辨率以适应不同设备。换句话说，页面应该有能力去自动响应用户的设备环境，具体效果如图所示。任务7-1Bootstrap5基础知识<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">这段代码的几个参数解释：width=device-width：宽度等于当前设备的宽度。height=device-height：高度等于当前设备的高度。initial-scale：初始的缩放比例（默认设置为1.0）。minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）。maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）。user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）。任务7-1Bootstrap5基础知识远程调用Bootstrap5框架<linkhref="/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"rel="stylesheet"><scriptsrc="/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>7-2HTML5+CSS3网页设计任务教程（第二版）制作栅格化布局页面任务7-2制作栅格化布局页面〓

宽度≥1400px显示1行12列任务7-2制作栅格化布局页面〓

宽度≥1200px且<1400px显示2行6列任务7-2制作栅格化布局页面〓

宽度≥992px且<1200px显示3行4列任务7-2制作栅格化布局页面〓

宽度≥768px且<992px显示4行3列任务7-2制作栅格化布局页面〓

宽度≥576px且<768px显示2行6列任务7-2制作栅格化布局页面〓

宽度<576px显示12行1列任务7-2制作栅格化布局页面设备项目超小设备<576px平板≥576px桌面显示器≥768px大桌面显示器≥992px特大桌面显示器≥1200px超大桌面显示器≥1400px容器最大宽度None(auto)540px720px960px1140px1320px类前缀.col-.col-sm-.col-md-.col-lg-.col-xl-.col-xxl-列数量和12间隙宽度1.5rem（一个列的每边分别.75rem）可嵌套Yes列排序Yes任务7-1Bootstrap5基础知识1、.container类，如果视口宽度<576px，容器的实际宽度将为100%。如果视口宽度≥576px但<768px，则为540px；如果视口宽度≥768px但<992px，则为720px；如果视口宽度≥992px但<1200px，则为960px；如果视口宽度≥1200px但<1400px，则为1140px；如果视口宽度≥1400px，则为1320px。2、.container-fluid类，创建一个宽度为100%的容器。无论设备或屏幕尺寸如何，流体容器的宽度将始终为100%，网页两侧没有留白。3、.row元素向左和向右扩展15px。.container有个15px的padding，而我们设定的每个.col也都有15px的padding，如果两者直接配合，那么就会产生30px的间距，导致内容和浏览器边框的距离较大，所以用.row将所有的col包裹，.row会有一个-15px的margin，可以抵消掉一个.container或.col产生的15px的padding值。7-3HTML5+CSS3网页设计任务教程（第二版）制作响应式导航栏任务7-3制作响应式导航栏〓PC端样式任务7-3制作响应式导航栏〓

移动端样式任务7-3制作响应式导航栏1、使用<nav>标签采用.navbar类创建标准导航栏，再使用响应式折叠类.navbar-expand-xxl|xl|lg|md|sm在特大、超大、大、中型设备或小屏幕上实现垂直堆叠导航栏。2、使用<button>标签设置class="navbar-toggler"、data-bs-toggle="collapse"和data-bs-target="#thetarget"实现折叠按钮。然后将导航栏内容（链接等）包裹在class="collapsenavbar-collapse"的<div>元素中，后跟与按钮的data-bs-target匹配的ID："thetarget"。3、如需在导航栏中添加链接，则使用class="navbar-nav"的<ul>元素（或<div>）。然后添加带有.nav-item类的<li>元素，后跟带有.nav-link类的<a>元素。将.active类添加到<a>元素可突出显示当前链接，或添加.disabled类来指示链接不可点击。4、.navbar-brand类用于突出显示页面的品牌/标志/项目名称：<aclass="navbar-brand"href="#">Logo</a>5、导航栏可以固定在页面的顶部或底部，固定导航栏会在独立于页面滚动的固定位置（顶部或底部）保持可见。.fixed-top类使导航栏固定在页面的顶部，.fixed-bottom类把导航栏停留在页面底部。7-4HTML5+CSS3网页设计任务教程（第二版）制作响应式轮播图任务7-4制作响应式轮播图〓PC端样式任务7-4制作响应式轮播图〓

移动端样式任务7-4制作响应式轮播图1、.carousel：创建一个轮播。2、.carousel-indicators：为轮播添加一个指示符，就是轮播图底下的一个个小点，轮播的过程可以显示目前是第几张图。3、.carousel-inner：存放图片的标签，按钮不在里面。4、.carousel-item：指定每个图片的内容。5、.carousel-control-prev：添加左侧的按钮，点击会返回上一张。6、.carousel-control-next：添加右侧按钮，点击会切换到下一张。7、.carousel-control-prev-icon与.carousel-control-prev一起使用，设置左侧的按钮。8、.carousel-control-next-icon与.carousel-control-next一起使用，设置右侧的按钮。9、.slide：切换图片的过渡和动画效果，如果你不需要这样的效果，可以删除这个类。7-5HTML5+CSS3网页设计任务教程（第二版）制作响应式文字和图片任务7-5制作响应式文字和图片任务7-5制作响应式文字和图片1、.rounded：为图像添加圆角。2、.rounded-circle：将图像塑造为圆形。3、.img-thumbnail：将图像塑造为缩略图（带边框）。4、.float-start：将图像向左浮动，.float-end：将图像向右浮动。5、.mx-auto(margin:auto)和.d-block(display:block)：使图像居中。6、.img-fluid：为图像应用max-width:100%和height:auto，图像将很好地缩放到父元素内。7-6HTML5+CSS3网页设计任务教程（第二版）制作完整的响应式网站任务7-6制作完整的响应式网站任务7-6制作完整的响应式网站任务7-6制作完整的响应式网站常用类含义.float-start{float:left!important}左浮动.float-end{float:right!important}右浮动.mx-auto{margin-right:auto!important; margin-left:auto!important}左右居中.d-flex{display:flex!important}弹性布局.d-none{display:none!important}隐藏元素并脱离文档，不占实际空间.d-block{display:block!important}转换为块状元素任务7-6制作完整的响应式网站常用类含义.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030}置顶.fixed-bottom{position:fixed; right:0;bottom:0;left:0;z-index:1030}置底.visible{visibility:visible!important}元素正常显示.invisible{visibility:hidden!important}隐藏元素.overflow-hidden{overflow:hidden!important}元素溢出隐藏.overflow-visible{overflow:visible!important}内容不会被修剪，会呈现在元素框之外.overflow-scroll{overflow:scroll!important}如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容任务7-6制作完整的响应式网站〓

常用背景色类常用类含义1.bg-primary2.bg-secondary3.bg-success4.bg-danger5.bg-warning6.bg-info7.bg-light8.bg-dark9.bg-body10.bg-white11.bg-transparent1.蓝色背景2.深灰色背景3.绿色背景4.红色背景5.黄色背景6.浅蓝色背景7.浅灰色背景8.黑色背景9.白色背景10.白色背景11.透明背景任务7-6制作完整的响应式网站〓

常用文字颜色类常用类含义1.text-muted2.text-primary3.text-success4.text-info5.text-warning6.text-danger7.text-secondary8.text-dark9.text-body10.text-light11.text-white1.浅灰色文本2.蓝色文本3.绿色文本4.浅蓝色文本5.黄色文本6.红色文本7.灰色文本8.深灰色文本9.黑色文本10.浅灰色文本11.白色文本Bootstrap5框架简介单元7HTML5综合案例单元8目录01静态网页开发的基本流程02期末大作业8-1HTML5+CSS3网页设计任务教程（第二版）静态网页开发的基本流程静态网页开发的基本流程和软件开发的流程基本一致，包括对网站先进行需求分析、概要设计、详细设计、代码编写、项目测试、网站交付、网站运维等一系列操作以满足客户的需求并且解决客户的问题，如果有更高需求，还需要对网站进行二次开发、升级处理、运营推广等操作。1、需求分析相关系统分析员向用户初步了解需求，然后用相关的工具软件列出要开发网站的大功能模块，每个大功能模块有哪些小功能模块，对于有些需求比较明确相关的界面时，在这一步里面可以初步定义好少量的界面。系统分析员深入了解和分析需求，根据自己的经验和需求用WORD或相关的工具再做出一份文档系统的功能需求文档。这次的文档会清楚列出网站大致的大功能模块，大功能模块有哪些小功能模块，并且还列出相关的界面和功能。任务8-1

静态网页开发的基本流程

2、概要设计概要设计需要对网站的整体设计进行考虑，根据需求分析确定网站由哪些页面组成、每个页面的网站风格、页面结构、模块划分、数据结构设计和出错处理设计等，为网站的详细设计提供基础。3、详细设计在概要设计的基础上，开发者需要进行网站的详细设计。在详细设计中，根据用户提供的素材确定网站展示的内容、大小、位置、颜色、展示形式等，以便开发人员进行编码和测试。应当保证网站的需求完全分配给整个网站。详细设计应当足够详细，能够根据详细设计报告进行编码。4、代码编写在代码编写阶段，不同技术人员会根据《网站系统详细设计报告》，根据自己的职责安排进行代码编写，分别实现软件在功能、性能、接口、界面等方面的要求，这过程需要项目经理、UI设计师、安卓开发工程师/苹果开发工程师、测试工程师等人员共同配合完成，在开发过程中需要项目经理统筹全局，保持和客户的紧密沟通，对于开发出现的问题采取相应措施进行解决。任务8-1

静态网页开发的基本流程

5、项目测试测试人员根据业务逻辑，尽可能全方位地测试项目，找出网站的缺陷，并且提交测试报告，研发人员根据报告对项目bug进行修复。测试过程需要反复多次进行，尽量多的找出网站的问题所在。6、网站交付在网站测试证明达到用户要求后，网站开发者应向用户提交开发的