《网页设计与制作项目教程（HTML+CSS+Bootstrap） 》题库练习题复习题习题测试题带答案

1、项目一思考练习答案练习1一、填空题1URL（Uniform Resource Locator）即 统一资源定位系统 ，也就是网络地址，是在Internet上用来描述信息资源，并将Internet提供的服务统一编址的系统。2因特网（Internet）又称为 互联网 ，是一个把分布于世界各地的计算机用传输介质互相连接起来的网络。3. Dreamweaver CC是有 Adobe 公司出品的。4HTML（Hyper Text Markup Language 超文本标识语言）是一种用来制作 超文本文档简单语言 。二、单选题1万维网是( A )。A. 无数个网络站点和网页的集合B. 互联网C. 一个网站

2、D. 一个网页2目前在Internet上应用最为广泛的服务是(B)A.FTP服务B.WWW服务C.Telnet服务D.Gopher服务3网页的特征是（ D ）AHTML文档的基本特征超文本 B标识语言，网页中不能没有标记（Tag） C网页提供了一些措施以防在网上冲浪的过程中迷失方向 D网页实现了对原文档信息的无限补充或扩展三、简单题（略）练习2 一、选择题（单选或多项）1Dreamweaver CC的新建文档页面，一般情况下，创建完全空白的静态页面应选择( D ）。A.XML B.PHPC.CSSD.HTML2Dreavermeaver CC中关闭所有面板和面板组，按（ B ）。A.【F1】B

3、.【F4】C.【CTRL】D.【TAB】3利用Dreamweaver建立站点，要创建站点根文件夹，以下说法正确的是（ BCD ）。A.存放网站链接B.是网站中的一部分C.用来保存网站内容（包括网页文件和图像、动画等）的文件夹D.创建若干个子文件夹，以存放不同类型的文件二、判断题1静态的首页命名只能为“index.html”。（ ）2最好不要使用中文命名文件和文件夹（包括根文件夹），因为在使用Unix或Linux作为操作系统的主机上，使用中文名容易出错。（ ）3文件名不要用大写英文字母，因为Unix操作系统区分英文字母大小写，而Windows操作系统不区分英文字母大小写（ ）4.浏览器是一种硬件

4、设备，最常用的有IE、腾讯浏览器等。( )5.IP地址由四个数字组成，以圆点分隔，如11。（ ）6.域名就像网站的名字，并且该名字是全世界唯一的。（ ）7.我们可以在不设置 Dreamweaver 站点的情况下编辑网页文件。（ ）8.图像可以用于充当网页内容，但不能作为网页背景。 ( )项目二思考练习答案一、单选题1下列说法错误的是（B）A. 表示上标B. 表示下划线C. 表示删除线D. 表示删除线2表示（D）A. 斜体B. 粗体C. 下划线D. 强调3换行符的HTML代码是（B）A. B. C. D. 4 html中标注标题的是（A）A. B. C. D. 二、简单题（

5、略）练习2一、单选题1链接基本语法是（D）A. . B. . C. . D. . 2 . ,表示（B）A. 跳转到bn页面B. 跳转到页面的bn锚点C. 超链接的属性是bnD. 超链接的对象是bn3表示新开一个窗口的超链接代码是（C）A. .B. .C. .D. .4 . ,表示（B）A. 跳转到hello.html页面的顶部B. 跳转到hello.html页面的top锚点C. 跳转到hello.html页面的底部D. 跳转到hello.html页面的文字top所在链接5表示（A）A. 表示水平线没有阴影B. 表示水平线没有边框C. 表示页面边界没有阴影D. 表示水平线不显视6下列说法正确的是

6、（B）A. 和的区别是插入了一个空行B. 和的区别是不是换行符，而是C. 和的区别就是后面不能加入文字D. 和的区别就是后面不能加入文字7，表示（C）A. 图像的地址B. 图像的排列方式C. 在浏览器尚未完全读入图象时，在图象位置显示的文字D. 在浏览器尚未完全读入图象时，在图象的上方显示的文字8. 创建最小的标题的文本标签是（C） A. B. C. D. 二、简答题(略)任务一1、#innercolor:red属于内部样式表类型的样式表。2、CSS的全称是层叠样式表。3、标记包含在标签中。4、当浏览器不支持图像时，图像标记的（ C ）属性的文本内容可以替代说明图像。A、align B、hei

7、ght C、alt D、border5、若要以标题2、居中、红色显示“我的网站”，以下用法中，正确的是（ C ） 。A、我的网站B、我的网站C、我的网站D、我的网站6、用于设置表格背景颜色的属性是（ B ） A、 B、 C、 D、 7、以下关于FONT标记符的说法中，错误的是：（ D ） A、可以使用 color 属性指定文字颜色。 B、可以使用 size 属性指定文字大小（也就是字号）。 C、指定字号时可以使用 17 的数字。 D、语句 这里是2号字 将使文字以2号字显示。8、以下说法中，正确的是：（ C ） A、P标记符与BR标记符的作用一样。 B、多个P标记符可以产生多个空行。 C、多个

8、BR标记符可以产生多个空行。 D、P标记符的结束标记符通常不可以省略。9、要控制水平线的粗细，应使用以下属性：（ C ） A、color B、width C、size D、height10、在CSS的文本属性中，文本修饰的取值text-decoration：overline表示（ C ）A、不用修饰 B、下划线 C、上划线 D、横线从字中间穿过11、下面不属于CSS插入形式的是( A ) A、索引式 B、内联式 C、嵌入式 D、外部式12、简述CSS样式表在网站设计中的作用。CSS样式能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，

9、主要的功能如下：（1）只需修正一个CSS文件，便可同时更新众多的网页版面外观及格式；（2）可以使html的文件内码更精简，缩小档案下载的速度；（3）可以更精确的控制网页版面的文字、背景、字型等；（4）适用于所有浏览器，兼容性好。任务二1、在默认情况下，浏览器内已选择的超链接文本颜色显示为 下划线蓝色，已访问的超链接颜色显示为 下划线紫色 。2、在Dreamweaver中，超链接中定义目标的属性为_blank，表示用户单击超链接时会弹出一个新的网页窗口。3、若要在页面中创建一个图形超链接，要显示的图形为cic.jpg，所链接的地址为 以下用法中，正确的是（ B ） A、 cic.jpg B、 C

10、、 D、 4、选中某文本或图片，在DreamWeaver的属性面板中的“链接”文本框中输入（ A ）可以制作其空链接。A、 # B、 C、$ D、&5、如果链接的对象是同一网页中的内容可以使用（ A ） A、锚点链接 B、文本链接 C、外部链接 D、内部链接6、以下路径中属于绝对路径的是( A )。 A、 B、address.htm C、/xuesheng/chengji/mingci.htm D、staff/telephone.htm7、在创建图像热点链接时，不包括（ A ）形状的图像热点。 A、不规则曲线 B、多边形 C、矩形 D、椭圆形8、在图片中设置超连接的说法中正确的是（ D ）。

11、A、图片上不能设置超连接 B、一个图片上只能设置一个超连接 C、鼠标移动到带超连接的图片上仍然显示箭头形状 D、一个图片上能设置多个超连接9、绝对路径、相对路径和基准地址的区别与联系是什么？在HTML文件中，主要提供了三种路径：绝对路径、相对路径和根路径，不同的路径使用在不同的链接中。在添加内部链接的时候，常用到相对路径和根路径；在添加外部链接的时候，常用到绝对路径。绝对路径指对站点的根目录而言某文件的位置，当所有网页引用同一个文件时，所使用的路径都是相同的；相对路径指以当前文件所处目录而言某文件的位置，当保存于不同目录的网页引用同一个文件时，所使用的路径将不同。10、链接网页的“目标”位置有

12、几种？target：用于指定打开链接的目标窗口，其默认方式是原窗口。_parent在上一级窗口中打开。_blank在新窗口打开。_self在同一个桢或窗口中打开。_top在浏览器的整个窗口中打开，忽略任何框架。练习11根据Web标准化，网页主要由三部分组成：结构（Structure）、表现（Presentation）、行为（Behavior）。2根据CSS盒模型理论，所有HTML元素都可以看作一个盒子，盒子是由内容（content）、内边距（padding）、边框（border）和外边距（margin）4个部分组成。3使用CSS+DIV布局的第一步是构建网页结构，从操作来说，也就是创建各个Di

13、v。4Border属性包含三个方面：border-style（样式）、border-color（颜色）和border-width（宽度）。5margin是指border外边沿与相邻元素之间的距离。6下列属于HTML5新的结构元素标签的是（ B ）。A、Head B、HeaderC、content D、border7Padding是指border内边沿与（ C ）之间的距离。A、border外边沿 B、相邻元素C、content D、另一条border8HTML5结构化元素标签中，标记导航类辅助内容的是（ D ）。A、section B、HeaderC、article D、nav9画出盒模型示意

14、图，并且标明盒模型的各个部分。10为什么说用DIV+CSS进行网页布局时，网页改版会变得很容易？DIV+CSS布局是一种内容与形式分离的布局方式，所以网页改版时只需要修改对应的CSS文件和图片，就能在不更改程序和结构代码的情况下完成所有的改版。练习21CSS的继承性指的是 子 标记会继承 父 标记的所有样式风格，并可以在 父 标记样式风格的基础上修改，产生新的样式，而 子 标记的样式风格完全不影响 父 标记。（子、父）2网页布局主要包括以下三种形式：自然布局、浮动布局、定位布局。3实现两个盒子的并列布局，主要通过设置 float 属性。4、CSS定义了 clear 属性来清除浮动。5CSS盒模

15、型是方形为基础的，所以设置边框，除了可以用border属性，还可以按照方向通过以下四个属性单独设置：border-top（顶）、border-bottom（底）、border-left（左）、border-right（右）。6根据CSS盒模型，Width 属性用来设置_的宽度/高度。（ A ）。A、content B、content+paddingC、content+padding+border D、content+padding+border+margin7对于属性margin的定义：margin:25px 50px 75px;以下解读正确的是：（ B ）A、上下边距为25px B、左右边距

16、为50pxC、上下边距为75px D、左右边距为75px8. 下列说法正确的是（ D ）。A、因为页面只有一个网页标题，所以header标签在一张页面中只会出现一次。B、因为页面只有一个网页脚注，所以footer标签在一张页面中只会出现一次。C、因为页面只有一个网页导航，所以nav标签在一张页面中只会出现一次。D、section标签可以包含article标签，article标签也可以包含section标签。、9网页布局的基本流程是什么？使用CSS+DIV布局的第一步是构建网页结构，第二步是写入网页内容，第三步是设置网页布局样式。10CSS提供了Float属性用来实现多列布局的样式。可是为什么还

17、要设置clear属性，用来清除浮动呢？Float属性虽然实现了自然布局没有办法呈现的多列布局的样式，但是，受float属性的影响，原本不打算浮动的对象可能也会受其影响出现各种布局问题。为此，CSS又定义了clear属性，用来清除浮动。任务一 思考练习1. CSS按其位置可以分成三种：外部样式表、内部样式表、 内联样式。2. 对一个宽度固定的块级元素应用 margin:0 auto 样式，可使其水平居中。3. 在HTML文档中，引用外部样式表的正确位置是？（D）A.文档的末尾 B.文档的顶部C. 部分D. 部分4. CSS中id选择器在定义的前面要有指示符 （D）A.*B. .C.!D.#5.

18、如何利用UL实现导航菜单？答：将UL、LI标签与CSS样式配合使用，可以实现导航菜单，并设置为需要的样式。示例如下：HTML代码：网站首页关于我们企业新闻公司案例业务咨询CSS样式：#menuwidth:600px;margin: 0;padding: 0;list-style: none;#menu lifloat:left;width:120px;text-align: center;line-height: 25px;#menu li atext-decoration: none;color: blue;display: block;#menu li a:hoverbackground:

19、 blue;color:#fff;6. 层的设置的先后影响他布局的左右顺序吗？答：原则上，在HTML中书写DIV时，先写的DIV出现上方，后写的DIV出现在下方。但若配合CSS样式的float属性使用时，DIV的左右顺序会脱离文档流而存在。例如：顺序出现的两栏div1和div2，若div1设置属性float:right，div2设置属性float:left时，在外层容器宽度足够的情况下，div2会出现在div1左侧位置。7. 边界（外边距margin）与填充（内边距padding）有什么区别？答：margin和padding样式最简单的区别方法是使用border边框来验证：1 margin是外

20、边距的意思，是指从border界限以外边框距离附近元素的距离。2 padding是内边距的意思，是指border界限以内边框到盒子里内容元素的距离。盒子模型图解如下：8. id和class的使用有什么区别？答：1 在css中，ID的前缀用#，Class的前缀用.2 同一个标签，只能有一个ID，但可以有多个Class（如：div id=div1 class=div1 div2 div3，表示该div的ID为div1，Class分别为div1、div2、div3三个）3 优先级：同时定义一个标签的ID和Class的css，ID所定义的css优先于Class（如：#divfont-size:14px

21、; .divfont-size:12px;；则它的字体大小是14px）4 在同一个页面，ID只能出现一个，Class则可以出现多个。任务二 思考练习1. 将一个盒子的上边框定义为 1 像素、蓝色、单实线，下列代码正确的是（A）。A. border-top：1px solid #00f;B. border：1px solid #00f;C. border-top：1px dashed #00f;D. border：1px dashed #00f;2. 在下面的程序中，第一个div和第二个div之间的垂直间距是40 px。divwidth:200px;height:60px;background:

22、red;.one margin-bottom:20px;.two margin-top:40px;第一个 div第二个 div3. 已知每个小盒子总宽度 80px，总高度 30px，仔细观察下图，运用所学知识做一个与之类似的导航栏，并用火狐浏览器测试：代码实现如下：导航栏1#menulist-style: none;margin: 0 auto;padding: 0 30px;border-top: 2px solid #fdcc36;width: 516px;#menu lifloat:left;width: 80px;height: 30px;margin: 0 3px;backgroun

23、d: #fdcc36;color:#fff;font-size: 12px;font-weight: bold;text-align: center;line-height: 30px;导航栏导航栏导航栏导航栏导航栏导航栏4. 已知每个小盒子总宽度 80px，总高度 30px，边框 2 像素，仔细观察下图，运用所学知识做一个与之类似的导航栏，并用火狐浏览器测试：代码实现如下：导航栏2#menulist-style: none;margin: 0 auto;width: 344px;#menu lifloat:left;width: 76px;height: 26px;margin: 0 3px

24、;background: #fdcc36;color:#fff;font-size: 14px;font-weight: bold;text-align: center;line-height: 26px;border:2px dotted #dece77;首页产品介绍企业新闻联系方式任务一1、用于设置文本框显示宽度的属性是Size。2、用户设置文本框可最大输入文字长度的属性是maxlength。3、当标记的TYPE属性值为checkbox_时，代表一个可选多项的复选框。4、在指定单选框时，只有将education属性的值指定为相同，才能使它们成为一组。5、若要产生一个4行30列的多行文本域，

25、以下方法中，正确的是（ C ）。 A、 B、 C、 D、 6、在Dreamweaver中，最常用的表单处理脚本语言是（ D ）。 A、C B、Java C、ASP D、JavaScript7、以下有关表单的说明中，错误的是：（ C ） A、表单通常用于搜集用户信息。 B、在 FORM 标记符中使用 action 属性指定表单处理程序的位置。 C、表单中只能包含表单控件，而不能包含其他诸如图片之类的内容。D、在 FORM 标记符中使用 method 属性指定提交表单数据的方法。8、创建选项（ A ）菜单应使用以下标记符： A、SELECT 和 OPTION B、INPUT 和 LABEL C、I

26、NPUT D、INPUT 和 OPTION9、以下表单控件中，不是由 INPUT 标记符创建的为：（ C ）A、单选框 B、口令框 C、选项菜单 D、提交按钮10、在表单中，需要把用户输入的数据以密码的形式来接收，应该使用的表单元素是（ A ）。 A、 B、 C、 D、11、根据下图所示的页面效果，写出对应的表单代码。请输入姓名：请输入密码：请选择性别：男女请选择兴趣： 运动 美术音乐 任务二1、在HTML文件中嵌入一段JavaScript语言程序，其起始和结束标记是（ A）。 A、 B、 C、 D、 2、html事件中，onDblClick表示（ D ）。A、设定取得资料时触发事件执行B、设

27、定改变资料时触发事件执行 C、设定放置资料完成时触发事件执行 D、设定鼠标左键双击标记时触发事件执行 3、当鼠标移动到文字链接上时显示一个隐藏层，这个动作的触发事件应该是（ C ）。 A、onClick B、onDblClick C、onMouseOver D、onMouseOut4、下列动作中，用于在新浏览器窗口中打开指定网页的是：（ A ）。 A、Go To URL B、Check Browser C、Popup Message D、Open Browser Window5、JavaScript包括在HTML中，它成为HTML文档的一部分，可将.标识放入（ C ）。 A、只能在. 之间 B

28、、只能在.之间 C、既可放入. 之间，也可放入.之间 D、只能在.之间6、JavaScript的函数用return返回函数的计算结果。7、如果需要在提交表单时检查表单内容的有效性，则需要定义onsubmit事件句柄。项目七 建设快乐花店网站（模板应用）习题参考答案任务一 制作模板网页1Dreamweaver CC中创建的模板文件，一般保存在站点的 Templates 文件夹里。2Dreamweaver CC中创建模板的方法一般有两种，分别是 新建空白模板 和 将现有文档另存为模板 。3设置“可编辑标签”的含义是 指定哪些内容是可以编辑的 。4定义可选区域可以实现网页中一些内容可以 显示 和 隐

29、藏 。5创建基于模板的站点，模板文件一般在存放在那个文件夹？（ B ）A、站点文件夹根目录下。B、站点文件夹Templates子文件夹下。C、由站点制作者任意指定存放位置。 D、站点文件夹Images子文件夹下。6定义可编辑区名称时，以下那个不可以使用？（ D ）A、商品1 B、COM1C、A123 D、“商品”（有双引号）7定义可编辑区以下那种方法是错误的？（ B ）A、在“插入”面板“模板”选项卡中，单击“可编辑区域”按钮。 B、按CtrlAltW组合键。 C、选择“插入 模板 可编辑区域”命令。D、在文档窗口中单击鼠标右键，在弹出菜单中选择“模板 新建可编辑区域”。8模板文件的扩展名一般

30、是？（ A ）A、dwt B、jpgC、html D、css9模板在网页制作中起到了什么作用，有哪些特点？答：利用Dreamweaver CC的模板功能，将网站中所有风格类似的网页，不变化的部分设计成模板网页，利用制作的模板来生成网页，我们只需制作网页中变化的部分，这样就极大的提高网站制作效率。特点：（1）利用制作的模板来生成网页，我们只需制作网页中变化的部分。（2）要修改网站中所有网页的某项固定信息时，只需修改模板。10定义可编编辑区和定义可编辑的重复区域，它们的区别是什么？答：可编辑区域：基于模板的网页中未锁定区域，是模板用户可以编辑修改的部分。模板创作者可以将模板的任何区域指定为可编辑区

31、。重复区域：是网页中设置为重复的布局部分。如可以设置一个重复的表格行。通常重复区域是可以编辑的，这样模板用户可以编辑重复元素中的内容，同时使设计本身处于模板创作者的掌控下。任务二 基于模板制作网站首页和子页1 模板网页修改和删除后，对基于模板制作的网页有那些影响？答：网页模板可以根据需要反复进行修改，模板修改后，Dreamweaver CC会提醒更新整个站点或应用特定模板的所有网页。可以选择更新所有基于此模板的网页，也可以只更新其中一部分或不更新。2基于模板网页制作网站的一般流程是什么？答：（1）设计和制作模板网页；（2）基于设计的模板生成所有网页；（3）修改网页中可编辑部分为需要显示的内容。

32、任务一 思考练习1. 一个完整的网站，页面一般分为 首页 、 列表页 、 内容页 、 交互页 、单页面 几种类型。2. 我们可以通过Photoshop的工具 矩形选框工具 来获取布局的宽度和高度，并设置标尺单位为 像素 ，用 吸管 工具来获取美工图的颜色。3. 溢出文本隐藏并显示为省略号，需要设置三个CSS属性，即 text-overflow: ellipsis; 、 white-space: nowrap; 、 overflow: hidden; 。4. 简述一般静态网站的制作流程。答：一般静态网站制作的流程有以下几个步骤：1 素材整理根据网站主题需要设置栏目、搜集素材并整理归类，在纸上画草

33、图；2 美工图及切片在Photoshop中进行美工图的设计，并切图生成小图片；3 页面布局使用DIV+CSS或者Bootstrap框架进行页面布局，完成首页；4 模板制作新建模板页或者另存为模板页；5 应用模板应用模板完成其他分页，添加超链接；6 网站后台应用框架、表格、表单等技术完成后台静态页面的制作；7 网站调试在浏览器中进行网站调试，包括超链接、特效等。5. 请简述DIV和Table的优缺点和使用的场合。答：DIV+CSS布局的优缺点：优点：符合W3C标准、页面加载速度快、布局灵活，内容和样式的分离，改版更加方便；搜索引擎更加友好。缺点：对于CSS的高度依赖使得网页设计变得比较复杂、浏览

34、器兼容性问题比较突出；TABLE表格布局的优缺点:优点：布局容易、快捷、结构严谨、兼容性好。缺点：改动不便，需重新调整整个页面，工作量大。所以，DIV主要用来给网站布局，定位，而表格主要是用来承载数据。表格经常和DIV一起协同使用，并经常用于数据列表。表格在网站后台出现的概率比较多，样式也可以多种多样。6. 要实现鼠标划过图片时，图片变换的效果，我们需要做哪些工作？答：首先需要设计两幅图片，分别是正常的图片的鼠标划过时的图片。然后可以在Dreamweaver中单击插入面板的“鼠标经过图像”按钮，在弹出的对话框中进行设置，即可自动添加JavaScript代码，并实现鼠标划过时变换图像的效果。当然

35、，手写JavaScript代码也可以实现。7. 如何在菜单栏用超链接的活动状态来指示当前页面？答：超链接有四种状态，分别为：a:link：未被访问的链接；a:visited：已被访问的链接；a:hover：鼠标指针划过的链接；a:active：正在被点击的链接。可以分别为其不同的状态设置不同的CSS样式。若当前页面为index.html，可以将“首页”的超链接设置类.current，其样式可以跟a:hover或者a:active的样式一样。用以指示当前页面为首页。任务二 思考练习1. 关于元素的显示模式，下列说法正确的是（AB）A. 块元素会独占一行。B. 一行中可以有多个行内元素C. 块元素

36、不能直接设置宽和高D. 多个行内显示元素自上而下显示2. 下列选项中，关于显示模式的转换说法正确的是（ABCD）。A. 行内显示模式转换为块显示模式的代码为 display:block;B. 块显示模式转换为行内显示模式的代码为 display:inline;C. 行内显示模式转换为行内块显示模式的代码为 display:inline-block;D. 使用 display 属性可以转换元素的显示模式3. 使块级元素水平居中，需要遵循以下哪些条件（BC）A. 使元素有高度（height）B. 使元素有宽度（width）C. 使元素左右外边距的值为 autoD. 使元素浮动（float）4. 举

37、例说明块级元素和行内元素的区别，这两者之间如何转换？答：块级元素：1 块级元素会独占一行，多个块级元素会各自新起一行。默认情况下，块级元素宽度自动填满其父元素宽度。2 块级元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。3 块级元素可以设置margin和padding属性。行内元素:1 行内元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。2 行内元素设置width,height属性无效。3 行内元素的margin和padding属性，水平方向的padding-left, padding-right

38、, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。常见的块级元素有 div, form, table, p, pre, h1h6, dl, ol, ul 等。常见的行内元素有 span, a, strong, em, label, input, select, textarea, img, br 等。块级元素与行内元素的转换：一般我们会用display:block，display:inline来调整元素的布局级别。5. 如何使父级DIV的

39、高度随着子级DIV的高度自动变化？答：父级DIV的高度随着子级div的高度自动变化，即DIV高度自适应内容的高度，这需要分两种情况进行解释：1. 若子级div没有浮动（float），此时父级div不设置高度，即高度自适应内容的高度；2. 若子级div有浮动（float），此时父级div就没有高度，有两种方法来解决自适应的问题：1 子元素最后使用空标记清除浮动（）2 设置父元素的样式(style=overflow:hidden)6. 由一个网页扩展到一个风格统一的网站，我们一般使用什么技术？使用的步骤是什么？答：由一个网页扩展到一个风格统一的网站。我们一般使用“模板”技术。使用的步骤为：1 构思

40、整个网站的列表页、内容页、单页面、交互页等页面。思考网页布局中哪些部分是一样的；2 新建一个模板，或者将网页另存为模板，只留下网站中页面布局共同的部分；需要修改的部分设置为“可编辑区域”；3 应用模板新建各分页，在“可编辑区域”中填充各分页独有的内容；4 在模板中修改超链接，并调试整个网站。7. 使用Bootstrap的栅格系统进行布局，中等屏幕大小一行显示4个图片、小屏幕一行显示3个图片，特小屏幕一行显示2个图片，如何进行设置？答：Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统通过一系列的行（

41、row）与列（column）的组合来创建页面布局，内容可以放入这些创建好的布局中。假设图片路径为“images/pic.jpg”，实现需求代码如下：Document任务三 思考练习1. 绝对定位要求父级元素设置为 相对定位 ，否则以 浏览器的左上角 为原始点进行定位。配合 left, top, right，bottom 属性 进行位置的设置。可以通过 z-index进行对象的层叠。2. 我们在DIV+CSS布局中，一般使用 相对定位 ，特殊的场合使用 绝对定位 。3. 浮动框架是一个窗口，里面的内容是 一个网页 。4. 当我们设置一个超链接的目标指向一个浮动框架时，需要进行哪两步的设置？答：第一步：为浮动框架添加