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

编写说明：浙江省高校招生职业技能考试-计算机类《网页设计》考点双析卷专辑，依据省教育厅《浙江省高校招生职业技能考试大纲》编写。“考点双析卷”即围绕一个考点，一份是老师的讲解卷一份是学生的练习卷，助力师生构建“讲练结合”的学习闭环，特别适用于浙江省高校招生职业技能考试第一轮高考复习教学。 本专辑第39卷精准对标浙江省考纲，考试内容及范围【网页设计】： （六）理解盒子模型及 DIV+CSS 的网页布局方法。 浙江省高校招生职业技能考试 计算机类 《网页设计》考点双析卷 第39卷 DIV+CSS网页布局（2） 老师讲解卷 时间：45分钟 总分：100分 班级_______ 姓名_______ 学号_______ 成绩_______ 一、单项选择题（本大题共20小题，每题3分，共60分） 1．在DreamWeaverCS6的CSS规则 定义时，主要是用来控制页面上各元素的位置。（   ） A．区块 B．方框 C．过渡 D．定位 2．“CSS规则定义”对话框中， 主要用来设置背景色或背景图像等属性。（   ） A．背景 B．区块 C．列表 D．扩展 3．在Dreamweaver CS6中，常见的网页布局方式不包括（   ） A．表格布局网页 B．框架布局网页 C．CSS＋DIV布局网页 D．图片布局网页 4．单击层边界，按住 可以同时选定多个层。（   ） A．【Shift】 B．【Ctrl】 C．【AIt】 D．【Alt+Shift】 5．选定层，按键盘上的四个方向键，来移动层，每按一次，移动一个象素，如果同时按住【Shift】键,每次可移动 个象素的距离。（   ） A．1 B．8 C．10 D．4 6．在进行网页布局时，如果要将多个元素（如图片和文字）组织在一起，可以使用什么方法（   ） A．表格 B．框架 C．层（Div） D．以上都可以 7．以下属于CSS+DIV布局的典型应用场景是（   ） A．需要大量嵌套表格的页面 B．需要频繁修改样式的企业官网 C．仅支持老旧浏览器的系统 D．无需响应式设计的静态页面 8．当进行页面布局的时候能够使用的方法有（   ） A．页面布局法 B．实时布局法 C．软件布局法 D．抽象布局法 9．CSS+DIV布局的主要优势是（   ） A．依赖表格嵌套 B．代码冗余复杂 C．便于批量修改样式 D．不利于SEO优化 10．在Dreamweaver8中，通过 实现对网页内容的精确定位。（   ） A．表单 B．层 C．表格 D．文本域 11．以下单位表示相对于视口宽度的百分比的是（   ） A．vw B．vh C．% D．rem 12．以下伪元素用于在元素内容前插入内容的是（   ） A．::before B．::after C．::first-line D．::selection 13．在盒模型中，padding属性的作用是（   ） A．设置元素内容与边框的距离 B．设置元素边框的宽度 C．设置元素之间的外边距 D．设置元素的背景颜色 14．若要将元素定位到父容器右下角，应使用（   ） A．margin: auto B．position: relative; left: 100% C．float: right D．position: absolute; right: 0; bottom: 0 15．在CSS中，z-index属性用于控制（   ） A．元素的宽度 B．元素的透明度 C．元素的层叠顺序 D．元素的背景颜色 16．以下属性用于清除浮动的是（   ） A．float: left B．display: inline C．position: relative D．clear: both 17．以下是CSS盒模型的正确组成部分的是（   ） A．内容、填充、边框、边距 B．内容、边距、颜色、字体 C．宽度、高度、背景、阴影 D．块、行内、浮动、定位 18．在Flex布局中，设置主轴方向的属性是（   ） A．flex-direction B．justify-content C．align-items D．flex-wrap 19．现代的网页布局更倾向于使用什么技术？（   ） A．表格 B．Flash C．Div+CSS D．JavaScript 20．在“CSS 规则定义”对话框中，选择器中a:visited选项指的是（   ） A．定义链接目前未被访问时的样式 B．定义链接被访问过后的样式 C．定义鼠标指针移动到超链接上的状态 D．定义鼠标按下不放时的显示状态 二、多项选择题（本大题共5小题，每题4分，共20分） 21．目前常用的网页布局方式有（   ） A．表单布局 B．框架布局 C．DIV+CSS布局 D．表格布局 22．关于网页的三种布局方式：表格布局、框架布局、CSS＋DIV布局，下列说法错误的是（   ） A．三种布局方式中，框架不能精确定位元素 B．框架集属性面板中的源文件可以用来设置所引用的网页文件 C．表格嵌套使用时是逐层加载的，使得加载速度加快，省时 D．CSS对DIV块进行设置时，可以采用外部CSS文件，这样既节省存储空间，又可以同时修改多个页面样式 23．目前常用的网页布局方式有（   ） A．利用表格布局网页 B．利用框架布局网页 C．利用DIV＋CSS布局网页 D．利用JavaScript布局网页 24．插入DIV块操作中，在“插入DIV标签”对话框中“插入：”处具体的插入位置可能有 等。 （   ） A．插入点 B．开始标签之后 C．结束标签之前 D．开始标签之前 25．使用CSS＋DIV布局网页的优点有 （   ） A．代码简洁 B．结构清晰 C．面向搜索引擎更加友好 D．能完成批量页面的修改 三、简答题（本大题共4小题，每题5分，共20分） 26．简述float定位 27．简述Flex 布局。 28．简述CSS中清除浮动的方法有哪些？ 29．如何使用CSS进行元素定位，并简要介绍两种定位方式？ 试卷第6页，共6页 试卷第5页，共6页 学科网（北京）股份有限公司 $ 编写说明：浙江省高校招生职业技能考试-计算机类《网页设计》考点双析卷专辑，依据省教育厅《浙江省高校招生职业技能考试大纲》编写。“考点双析卷”即围绕一个考点，一份是老师的讲解卷一份是学生的练习卷，助力师生构建“讲练结合”的学习闭环，特别适用于浙江省高校招生职业技能考试第一轮高考复习教学。 本专辑第39卷精准对标浙江省考纲，考试内容及范围【网页设计】： （六）理解盒子模型及 DIV+CSS 的网页布局方法。 浙江省高校招生职业技能考试 计算机类 《网页设计》考点双析卷 第39卷 DIV+CSS网页布局（2） 老师讲解卷 时间：45分钟 总分：100分 班级_______ 姓名_______ 学号_______ 成绩_______ 一、单项选择题（本大题共20小题，每题3分，共60分） 1．在DreamWeaverCS6的CSS规则 定义时，主要是用来控制页面上各元素的位置。（   ） A．区块 B．方框 C．过渡 D．定位 【答案】D 2．“CSS规则定义”对话框中， 主要用来设置背景色或背景图像等属性。（   ） A．背景 B．区块 C．列表 D．扩展 【答案】A 【详解】在“CSS规则定义”对话框中，“背景”选项卡专门用于设置元素的背景属性，如背景色（background-color）、背景图像（background-image）等 3．在Dreamweaver CS6中，常见的网页布局方式不包括（   ） A．表格布局网页 B．框架布局网页 C．CSS＋DIV布局网页 D．图片布局网页 【答案】D 【详解】表格布局（A）、框架布局（B）、CSS+DIV布局（C）均为Dreamweaver CS6的标准布局选项。 4．单击层边界，按住 可以同时选定多个层。（   ） A．【Shift】 B．【Ctrl】 C．【AIt】 D．【Alt+Shift】 【答案】B 【详解】单击层边界，按住【Ctrl】可以同时选定多个层 5．选定层，按键盘上的四个方向键，来移动层，每按一次，移动一个象素，如果同时按住【Shift】键,每次可移动 个象素的距离。（   ） A．1 B．8 C．10 D．4 【答案】D 【详解】选定层，按键盘上的四个方向键，来移动层，每按一次，移动一个象素，如果同时按住【Shift】键,每次可移动4个象素的距离 6．在进行网页布局时，如果要将多个元素（如图片和文字）组织在一起，可以使用什么方法（   ） A．表格 B．框架 C．层（Div） D．以上都可以 【答案】D 【详解】虽然现代网页设计更倾向于使用CSS布局（如Flexbox或Grid）和Div元素，但表格、框架（尽管现在较少使用）在某些情况下仍可用于组织网页内容。 7．以下属于CSS+DIV布局的典型应用场景是（   ） A．需要大量嵌套表格的页面 B．需要频繁修改样式的企业官网 C．仅支持老旧浏览器的系统 D．无需响应式设计的静态页面 【答案】B 【详解】CSS+DIV适合需要统一管理样式的场景（如企业官网），便于批量调整。 8．当进行页面布局的时候能够使用的方法有（   ） A．页面布局法 B．实时布局法 C．软件布局法 D．抽象布局法 【答案】A 【详解】当进行页面布局的时候能够使用的方法有页面布局法 9．CSS+DIV布局的主要优势是（   ） A．依赖表格嵌套 B．代码冗余复杂 C．便于批量修改样式 D．不利于SEO优化 【答案】C 【详解】CSS+DIV通过集中管理样式表，可快速修改多个页面的样式，降低维护成本。 10．在Dreamweaver8中，通过 实现对网页内容的精确定位。（   ） A．表单 B．层 C．表格 D．文本域 【答案】B 【详解】在Dreamweaver8中，通过层实现对网页内容的精确定位 11．以下单位表示相对于视口宽度的百分比的是（   ） A．vw B．vh C．% D．rem 【答案】A 12．以下伪元素用于在元素内容前插入内容的是（   ） A．::before B．::after C．::first-line D．::selection 【答案】A 13．在盒模型中，padding属性的作用是（   ） A．设置元素内容与边框的距离 B．设置元素边框的宽度 C．设置元素之间的外边距 D．设置元素的背景颜色 【答案】A 14．若要将元素定位到父容器右下角，应使用（   ） A．margin: auto B．position: relative; left: 100% C．float: right D．position: absolute; right: 0; bottom: 0 【答案】D 15．在CSS中，z-index属性用于控制（   ） A．元素的宽度 B．元素的透明度 C．元素的层叠顺序 D．元素的背景颜色 【答案】C 16．以下属性用于清除浮动的是（   ） A．float: left B．display: inline C．position: relative D．clear: both 【答案】D 17．以下是CSS盒模型的正确组成部分的是（   ） A．内容、填充、边框、边距 B．内容、边距、颜色、字体 C．宽度、高度、背景、阴影 D．块、行内、浮动、定位 【答案】A 18．在Flex布局中，设置主轴方向的属性是（   ） A．flex-direction B．justify-content C．align-items D．flex-wrap 【答案】A 19．现代的网页布局更倾向于使用什么技术？（   ） A．表格 B．Flash C．Div+CSS D．JavaScript 【答案】C 【详解】现代的网页布局更倾向于使用Div+CSS技术，通过Div的margin、padding、border等属性来控制版块的间距。 20．在“CSS 规则定义”对话框中，选择器中a:visited选项指的是（   ） A．定义链接目前未被访问时的样式 B．定义链接被访问过后的样式 C．定义鼠标指针移动到超链接上的状态 D．定义鼠标按下不放时的显示状态 【答案】B 【详解】在CSS中，a:visited选择器用于定义链接被访问过后的样式。 二、多项选择题（本大题共5小题，每题4分，共20分） 21．目前常用的网页布局方式有（   ） A．表单布局 B．框架布局 C．DIV+CSS布局 D．表格布局 【答案】BCD 22．关于网页的三种布局方式：表格布局、框架布局、CSS＋DIV布局，下列说法错误的是（   ） A．三种布局方式中，框架不能精确定位元素 B．框架集属性面板中的源文件可以用来设置所引用的网页文件 C．表格嵌套使用时是逐层加载的，使得加载速度加快，省时 D．CSS对DIV块进行设置时，可以采用外部CSS文件，这样既节省存储空间，又可以同时修改多个页面样式 【答案】BC 23．目前常用的网页布局方式有（   ） A．利用表格布局网页 B．利用框架布局网页 C．利用DIV＋CSS布局网页 D．利用JavaScript布局网页 【答案】ABC 24．插入DIV块操作中，在“插入DIV标签”对话框中“插入：”处具体的插入位置可能有 等。 （   ） A．插入点 B．开始标签之后 C．结束标签之前 D．开始标签之前 【答案】ABC 25．使用CSS＋DIV布局网页的优点有 （   ） A．代码简洁 B．结构清晰 C．面向搜索引擎更加友好 D．能完成批量页面的修改 【答案】ABCD 三、简答题（本大题共4小题，每题5分，共20分） 26．简述float定位 【答案】float 定位是CSS 排版中非常重要的手段。属性 float 的值很简单，可以设置为left、right或默认值 none。当设置了元素向左或向右浮动时，元素会向其父元素的左侧或右侧靠紧。 27．简述Flex 布局。 【答案】布局的传统解决方案基于盒子模型，依赖 display 属性+position  属性+float  属性，但它对特殊布局非常不友好，比如，垂直居中就不容易出现。2009年， W3C 提出了一种新的方案——Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前， Flex 布局已经得到了所有浏览器的支持，将成为布局的首选方案。 28．简述CSS中清除浮动的方法有哪些？ 【答案】在CSS中，清除浮动的方法有多种，常用的包括： （1）使用br标签自带的clear属性。可以在浮动元素后添加一个<br>标签，并设置其clear属性为left、right或both，以清除浮动。 （2）使用元素的overflow属性。可以对包含浮动元素的父元素设置overflow属性为hidden、auto或scroll，从而触发BFC（块级格式化上下文），使父元素包含浮动的子元素。 （3）使用空标签来设置clear:both。可以在浮动元素后添加一个空的<div>标签，并设置其clear属性为both，以清除浮动。这种方法比较传统，但在某些情况下仍然有效。 29．如何使用CSS进行元素定位，并简要介绍两种定位方式？ 【答案】在CSS中，可以使用position属性进行元素定位。position属性有四个常用值：相对定位（relative）、绝对定位（absolute）、静态定位（static）和固定定位（fixed）。 相对定位是依据元素在文档流中的原始位置进行偏移，可以使用left、right、top、bottom等属性来指定偏移量。元素仍占据文档流中的原始空间。 绝对定位是将元素从文档流中拖出，使用left、right、top、bottom等属性相对于其最接近的一个已设置定位属性的父级对象进行定位。如果父级对象没有设置定位属性，则依据body对象的左上角作为参考进行定位。 试卷第6页，共6页 试卷第5页，共6页 学科网（北京）股份有限公司 $