第38卷 DIV+CSS网页布局（1） 浙江省对口考试-计算机类《网页设计》考点双析卷

编写说明：浙江省高校招生职业技能考试-计算机类《网页设计》考点双析卷专辑，依据省教育厅《浙江省高校招生职业技能考试大纲》编写。“考点双析卷”即围绕一个考点，一份是老师的讲解卷一份是学生的练习卷，助力师生构建“讲练结合”的学习闭环，特别适用于浙江省高校招生职业技能考试第一轮高考复习教学。 本专辑第38卷精准对标浙江省考纲，考试内容及范围【网页设计】： （六）理解盒子模型及 DIV+CSS 的网页布局方法。 浙江省高校招生职业技能考试 计算机类 《网页设计》考点双析卷 第38卷 DIV+CSS网页布局（1） 学生练习卷 时间：45分钟 总分：100分 班级_______ 姓名_______ 学号_______ 成绩_______ 一、单项选择题（本大题共20小题，每题3分，共60分） 1．利用CSS＋DIV布局网页，下列描述错误的是 （   ） A．选择“插入”菜单“布局对象”选项中的“DIV标签”命令，即可插入DIV块 B．DIV中所包含元素的属性通过CSS进行控制，从而实现整个页面的布局 C．在每个DIV块中可以显示不同的网页文档，各个文档之间可以毫无关联 D．CSS＋DIV布局网页，在修改页面的时候更加容易、省时 【答案】C 2．下列关于CSS＋DIV布局网页的描述，不正确的是 （   ） A．DIV是网页的“块”，网页中的元素被划分到不同的块中 B．通过CSS样式表对块及块中的元素进行控制 C．CSS样式表不能对网站中的所有网页进行批量处理，每次只能对同一张网页进行修改 D．使用CSS＋DIV布局的网页，代码简洁、结构清楚、面向搜索引擎更加友好 【答案】C 3．网页中要实现两个块的水平方向排列，必须使用块的 属性。 （   ） A．浮动 B．宽度 C．高度 D．边界 【答案】A 4．与表格在布局网页的作用相比较，下列不属于CSS＋DIV布局的优势是 （   ） A．大量的代码写在CSS中，使得页面容量变小 B．面向搜索引擎更加友好 C．可以通过修改CSS完成页面的批量修改，方便有效 D．将页面设置成多个区域，相互之间嵌套，加载时可以充分体现整体性 【答案】D 5．在Dreamweaver CS6中，利用CSS＋DIV对网页进行布局，下列叙述错误的是 （   ） A．插入DIV块，可以选择“插入”面板“布局”选项中的“插入DIV标签”命令 B．若要实现两个DIV块的水平方向排列，必须要使用到块的“浮动”属性 C．在网页中顺序插入的两个块，只要设置了合适的宽度，就可以保持在水平方向上的排列 D．修改时可以根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式 【答案】C 6．Dreamweaver CS6中，与其他布局方式相比，使用_____布局的网页，代码简洁，结构清晰，面向搜索引擎更加友好。 （   ） A．表格 B．CSS＋DIV C．框架 D．表单 【答案】B 7．关于插入“Div标签”，下列方法错误的是 （   ） A．“插入”菜单“布局对象”选项中的“Div标签”命令 B．“插入”面板“常用”选项卡中的“插入DIV标签”按钮 C．“插入”面板“布局”选项卡中的“插入DIV标签”按钮 D．“插入”菜单“布局对象”选项中的“插入Div标签”命令 【答案】D 8．下列不属于CSS＋DIV布局网页的特点的是 （   ） A．在不同的DIV中可以显示不同的网页 B．比表格布局代码更简洁、结构清晰 C．通过CSS可以同时修改多个网页中的DIV D．网站维护成本低 【答案】A 【详解】DIV是HTML容器，仅用于划分区域，无法独立显示不同网页内容 9．下列关于CSS＋DIV布局网页的叙述中，错误的是 （   ） A．选择“插入”菜单→“布局”→“Div标签”命令可插入DIV块 B．插入DIV块后，单击“CSS样式”面板中的“新建CSS规则”，在弹出的对话框中应将“选择器类型”定义为“ID” C．使用CSS＋DIV布局网页，代码简洁，结构清晰，可以实现批量页面的修改 D．两列固定宽度的布局方式是网页中常见的布局结构，两个块呈水平方向排列 【答案】A 10．在网页制作时，要插入一个DIV块的操作，正确的是 （   ） A．“插入”→“媒体”→“DIV标签” B．“插入”→“布局对象”→“DIV标签” C．“插入”→“表单”→“DIV标签” D．“插入”→“HTML”→“DIV标签” 【答案】B 11．在Dreamweaver CS6中，使用DIV＋CSS布局时定义两个块横向并排，则在“CSS规则定义”对话框中，要设置 （   ） A．区块→对齐方式→左对齐 B．区块→浮动→left C．方框→对齐方式→左对齐 D．方框→浮动→left 【答案】D 12．在利用CSS＋DIV布局网页时，若要使两个DIV块如下图所示排列，则要用到 （   ） A．“区块”里的“float”属性 B．“区块”里的“margin”属性 C．“方框”里的“float”属性 D．“方框”里的“margin”属性 【答案】C 13．使用CSS+DIV布局网页，页面大部分代码写在 中，使得页面容量变得更小。 （   ） A．CSS B．DIV C．P D．BODY 【答案】A 14．在DreamWeaver CS6中， 页面布局方式代码简单、结构清晰，修改容易。 （   ） A．表格 B．框架 C．div+CSS D．层 【答案】C 15．要实现两个DIV块的水平方向排列，需在方框分类中设置 属性。 （   ） A．float B．clear C．padding D．margin 【答案】A 16．在Dreamweaver CS6中，使用______进行页面布局能使得修改页面更加方便、容易，从而实现整个布局页面。 （   ） A．表格 B．框架 C．表单 D．CSS＋DIV 【答案】D 17．在Dreamweaver CS6中，要实现两个块的水平排列需设置方框中的 （   ） A．Right为left B．Clear为left C．Float为left D．Left为left 【答案】C 18．下列 是CSS规则定义中“定位”的属性。 （   ） A．字体 B．单词间距 C．各元素的高、宽 D．大小 【答案】D 19．在Dreamweaver CS6中,如图(a)所示,光标在“容”字后面,再新插入一个DIV标签,下列设置能得到图(c)的是（   ） A．插入DIV标签选择“在插入点”,两个DIV块的float属性都设为“left” B．插入DIV标签选择“在标签之前”,两个DIV块的float属性都设为“right” C．插入DIV标签选择“在标签之后”,两个DIV块的float属性都设为“left” D．插入DIV标签选择“在开始标签之后”,两个DIV块的float属性都设为“left” 【答案】C 20．CSS样式定义类型中用 来设置div居中的。（   ） A．区块 B．定位 C．边框 D．方框 【答案】A 二、多项选择题（本大题共5小题，每题4分，共20分） 21．要制作如图所示的CSS＋DIV布局，以下理解正确的有（   ） A．需要插入两个DIV块 B．在插入DIV块时，可以选择“ID”或者“类” C．从图中可以看出这里选择了“类” D．要实现left和right两个块的水平排列，就要将“区块”分类中的“浮动”属性都定义为“左对齐” 【答案】AB 22．下列 属于“CSS规则定义”对话框中的分类项。（   ） A．类型 B．边界 C．边框 D．过渡 【答案】ACD 23．“CSS规则定义”对话框中，区块可用来设置 等属性。（   ） A．行高 B．单词间距 C．文本缩进 D．浮动 【答案】BC 24．在CSS规则定义对话框中，左侧选项卡包括的内容有（   ） A．字体 B．区块 C．方框 D．类型 【答案】BCD 25．使用CSS＋DIV布局网页的优点有（   ） A．代码简洁，结构清晰 B．可以将一个浏览器窗口划分为多个区域，每个区域显示不同的HTML文档 C．通过修改CSS能完成批量页面的变化 D．面向搜索引擎更加友好 【答案】ACD 三、简答题（本大题共4小题，每题5分，共20分） 26．如何创建嵌套Div？ 【答案】打开index.html,选择“插入”——“Div”命令，在DOM面板中输入 Div的名称“#container”；将鼠标光标定位在“#container”层中 再次选择“插入” “Div” 命令，选择“嵌套”，插入嵌套Div,在DOM面板中输入名称“#links”。使用同样的方法创建“#banner”、 “#contentl” “ #content2 ”、“ #content3 ” “#content4”和“#footer”嵌套Div 27．布局网络的主要概念和内容？ 【答案】jQuery Mobile提供了一套样式分列布局。由于手机的屏幕宽度限制，一般不建议使用分栏分列布局。如果需将较小的元素（如按钮或导航标签）并列排序，则可以使用分列布局。 28．圆角的使用规则是什么？ 【答案】四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。 三个值：第一个值为左上角，第二个直为右上角和左下角，第三个值为右下角。 两个值：第一个值为左上角与右下角，第二个值为右上角与左下角。 一个值：四个圆角的值相同。 29．容器的常用属性有哪些？ 【答案】（1）flex-direction属性：决定主轴的方向，即项目的排列方向 column-reverse：主轴为垂直方向，起点在下沿。 column：主轴为垂直方向，起点在上沿。 row（默认值）：主轴为水平方向，起点在左端。 （2）flex-wrap属性：在默认情况下，项目都排在一条线（又称“轴线"）上，如果一条轴线排不下，则flex-wrap属性定义如何换行。 （3）align-content属性：定义多条轴线的对齐方式。如果项目只有一条轴线，则该属性不起作用。 试卷第6页，共6页 试卷第5页，共6页 学科网（北京）股份有限公司 $ 编写说明：浙江省高校招生职业技能考试-计算机类《网页设计》考点双析卷专辑，依据省教育厅《浙江省高校招生职业技能考试大纲》编写。“考点双析卷”即围绕一个考点，一份是老师的讲解卷一份是学生的练习卷，助力师生构建“讲练结合”的学习闭环，特别适用于浙江省高校招生职业技能考试第一轮高考复习教学。 本专辑第38卷精准对标浙江省考纲，考试内容及范围【网页设计】： （六）理解盒子模型及 DIV+CSS 的网页布局方法。 浙江省高校招生职业技能考试 计算机类 《网页设计》考点双析卷 第38卷 DIV+CSS网页布局（1） 学生练习卷 时间：45分钟 总分：100分 班级_______ 姓名_______ 学号_______ 成绩_______ 一、单项选择题（本大题共20小题，每题3分，共60分） 1．利用CSS＋DIV布局网页，下列描述错误的是 （   ） A．选择“插入”菜单“布局对象”选项中的“DIV标签”命令，即可插入DIV块 B．DIV中所包含元素的属性通过CSS进行控制，从而实现整个页面的布局 C．在每个DIV块中可以显示不同的网页文档，各个文档之间可以毫无关联 D．CSS＋DIV布局网页，在修改页面的时候更加容易、省时 2．下列关于CSS＋DIV布局网页的描述，不正确的是 （   ） A．DIV是网页的“块”，网页中的元素被划分到不同的块中 B．通过CSS样式表对块及块中的元素进行控制 C．CSS样式表不能对网站中的所有网页进行批量处理，每次只能对同一张网页进行修改 D．使用CSS＋DIV布局的网页，代码简洁、结构清楚、面向搜索引擎更加友好 3．网页中要实现两个块的水平方向排列，必须使用块的 属性。 （   ） A．浮动 B．宽度 C．高度 D．边界 4．与表格在布局网页的作用相比较，下列不属于CSS＋DIV布局的优势是 （   ） A．大量的代码写在CSS中，使得页面容量变小 B．面向搜索引擎更加友好 C．可以通过修改CSS完成页面的批量修改，方便有效 D．将页面设置成多个区域，相互之间嵌套，加载时可以充分体现整体性 5．在Dreamweaver CS6中，利用CSS＋DIV对网页进行布局，下列叙述错误的是 （   ） A．插入DIV块，可以选择“插入”面板“布局”选项中的“插入DIV标签”命令 B．若要实现两个DIV块的水平方向排列，必须要使用到块的“浮动”属性 C．在网页中顺序插入的两个块，只要设置了合适的宽度，就可以保持在水平方向上的排列 D．修改时可以根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式 6．Dreamweaver CS6中，与其他布局方式相比，使用_____布局的网页，代码简洁，结构清晰，面向搜索引擎更加友好。 （   ） A．表格 B．CSS＋DIV C．框架 D．表单 7．关于插入“Div标签”，下列方法错误的是 （   ） A．“插入”菜单“布局对象”选项中的“Div标签”命令 B．“插入”面板“常用”选项卡中的“插入DIV标签”按钮 C．“插入”面板“布局”选项卡中的“插入DIV标签”按钮 D．“插入”菜单“布局对象”选项中的“插入Div标签”命令 8．下列不属于CSS＋DIV布局网页的特点的是 （   ） A．在不同的DIV中可以显示不同的网页 B．比表格布局代码更简洁、结构清晰 C．通过CSS可以同时修改多个网页中的DIV D．网站维护成本低 9．下列关于CSS＋DIV布局网页的叙述中，错误的是 （   ） A．选择“插入”菜单→“布局”→“Div标签”命令可插入DIV块 B．插入DIV块后，单击“CSS样式”面板中的“新建CSS规则”，在弹出的对话框中应将“选择器类型”定义为“ID” C．使用CSS＋DIV布局网页，代码简洁，结构清晰，可以实现批量页面的修改 D．两列固定宽度的布局方式是网页中常见的布局结构，两个块呈水平方向排列 10．在网页制作时，要插入一个DIV块的操作，正确的是 （   ） A．“插入”→“媒体”→“DIV标签” B．“插入”→“布局对象”→“DIV标签” C．“插入”→“表单”→“DIV标签” D．“插入”→“HTML”→“DIV标签” 11．在Dreamweaver CS6中，使用DIV＋CSS布局时定义两个块横向并排，则在“CSS规则定义”对话框中，要设置 （   ） A．区块→对齐方式→左对齐 B．区块→浮动→left C．方框→对齐方式→左对齐 D．方框→浮动→left 12．在利用CSS＋DIV布局网页时，若要使两个DIV块如下图所示排列，则要用到 （   ） A．“区块”里的“float”属性 B．“区块”里的“margin”属性 C．“方框”里的“float”属性 D．“方框”里的“margin”属性 13．使用CSS+DIV布局网页，页面大部分代码写在 中，使得页面容量变得更小。 （   ） A．CSS B．DIV C．P D．BODY 14．在DreamWeaver CS6中， 页面布局方式代码简单、结构清晰，修改容易。 （   ） A．表格 B．框架 C．div+CSS D．层 15．要实现两个DIV块的水平方向排列，需在方框分类中设置 属性。 （   ） A．float B．clear C．padding D．margin 16．在Dreamweaver CS6中，使用______进行页面布局能使得修改页面更加方便、容易，从而实现整个布局页面。 （   ） A．表格 B．框架 C．表单 D．CSS＋DIV 17．在Dreamweaver CS6中，要实现两个块的水平排列需设置方框中的 （   ） A．Right为left B．Clear为left C．Float为left D．Left为left 18．下列 是CSS规则定义中“定位”的属性。 （   ） A．字体 B．单词间距 C．各元素的高、宽 D．大小 19．在Dreamweaver CS6中,如图(a)所示,光标在“容”字后面,再新插入一个DIV标签,下列设置能得到图(c)的是（   ） A．插入DIV标签选择“在插入点”,两个DIV块的float属性都设为“left” B．插入DIV标签选择“在标签之前”,两个DIV块的float属性都设为“right” C．插入DIV标签选择“在标签之后”,两个DIV块的float属性都设为“left” D．插入DIV标签选择“在开始标签之后”,两个DIV块的float属性都设为“left” 20．CSS样式定义类型中用 来设置div居中的。（   ） A．区块 B．定位 C．边框 D．方框 二、多项选择题（本大题共5小题，每题4分，共20分） 21．要制作如图所示的CSS＋DIV布局，以下理解正确的有（   ） A．需要插入两个DIV块 B．在插入DIV块时，可以选择“ID”或者“类” C．从图中可以看出这里选择了“类” D．要实现left和right两个块的水平排列，就要将“区块”分类中的“浮动”属性都定义为“左对齐” 22．下列 属于“CSS规则定义”对话框中的分类项。（   ） A．类型 B．边界 C．边框 D．过渡 23．“CSS规则定义”对话框中，区块可用来设置 等属性。（   ） A．行高 B．单词间距 C．文本缩进 D．浮动 24．在CSS规则定义对话框中，左侧选项卡包括的内容有（   ） A．字体 B．区块 C．方框 D．类型 25．使用CSS＋DIV布局网页的优点有（   ） A．代码简洁，结构清晰 B．可以将一个浏览器窗口划分为多个区域，每个区域显示不同的HTML文档 C．通过修改CSS能完成批量页面的变化 D．面向搜索引擎更加友好 三、简答题（本大题共4小题，每题5分，共20分） 26．如何创建嵌套Div？ 27．布局网络的主要概念和内容？ 28．圆角的使用规则是什么？ 29．容器的常用属性有哪些？ 试卷第6页，共6页 试卷第5页，共6页 学科网（北京）股份有限公司 $