专题十三 css与div布局《网页设计》 45分钟专题训练（山东省）

· 山东省春季高考《网页制作》45分钟专题训练专辑，共16份试卷。试卷命题与高考紧密相关，精选具有代表性和典型性的高考常考题。旨在帮助学生系统地复习和巩固计算机类理论知识，熟悉高考题型和命题规律，提高解题能力和应试技巧，为高考取得优异成绩打下坚实的基础，本训练卷适用于即将参加计算机类高考的学生。与本专辑配套的还有山东省春季高考《图形图像处理》《计算机组装与维护》《数字摄影摄像》《实用美术基础》45分钟专题训练专辑，欢迎同学和老师们下载使用。 《网页制作》 专题十三 css与div布局 时间：45分钟 总分：100分 班级___________ 姓名__________ 学号__________ 成绩________ 一、选择题（共25个题，每题2分，共50分） 1.在Dreamweaver CC中，Div标签的核心作用是（ ） A. 直接实现网页内容的动态交互效果 B. 作为容器对网页元素进行结构化分区，便于样式控制与布局 C. 替代图像标签插入网页图片 D. 专门用于定义网页的标题样式 【答案】B 【解析】 Div标签是网页布局的核心容器，用于对网页元素进行结构化分区，方便通过CSS控制样式与布局；动态交互需结合JavaScript，Div不能替代图像标签，也不专门定义标题样式。 2.下列关于Div布局的优点，描述错误的是（ ） A. 结构清晰，便于网页代码的维护与修改 B. 与CSS结合紧密，能实现复杂且灵活的布局效果 C. 加载速度比表格布局更快，有利于搜索引擎优化 D. 无需编写CSS代码，即可实现固定的布局结构 【答案】D 【解析】Div布局需与CSS结合实现样式与布局控制，无法脱离CSS形成固定结构；其优点包括结构清晰、维护方便、加载快等 3. 为AP Div设置“可见性”属性时，若希望页面加载时该AP Div默认隐藏，应选择的属性值是（ ） A. visible B. hidden C. inherit D. collapse 【答案】B 【解析】AP Div的“可见性”属性中，“visible”为默认显示，“hidden”为隐藏，“inherit”为继承父元素可见性，“collapse”多用于表格元素 4. 下列操作中，不能在Dreamweaver CC“AP元素”面板中完成的是（ ） A. 新建AP Div B. 修改AP Div的堆叠顺序 C. 为AP Div添加CSS动画 D. 隐藏/显示AP Div 【答案】C 【解析】“AP元素”面板可完成新建AP Div、修改堆叠顺序、隐藏/显示AP Div等操作；为AP Div添加CSS动画需在“CSS设计器”或代码中设置，无法在“AP元素”面板直接完成 5. 当多个AP Div发生重叠时，决定其显示层级的属性是（ ） A. z-index B. position C. top D. left 【答案】A 【解析】z-index属性用于控制重叠AP Div的显示层级，值越大层级越高；position用于定义定位方式，top和left用于设置定位坐标，均与堆叠顺序无关 6. 在Dreamweaver CC中，若要将普通Div转换为AP Div，应执行的操作是（ ） A. 选中Div，在“属性”面板中将“定位”设置为“绝对” B. 直接拖动Div到目标位置即可自动转换 C. 选中Div，按Ctrl+Shift+A组合键 D. 在“插入”面板中重新插入AP Div覆盖原Div 【答案】A 【解析】普通Div转换为AP Div的核心是修改定位方式，选中Div后在“属性”面板将“定位”设为“绝对”即可；拖动无法自动转换，Ctrl+Shift+A无对应功能，重新插入会覆盖内容 7. 下列关于AP Div定位的描述，正确的是（ ） A. AP Div的定位基准始终是网页的左上角 B. 若AP Div嵌套在另一个已定位的元素中，其定位基准为该父元素 C. AP Div的“left”属性用于设置其相对于父元素顶部的距离 D. AP Div无法设置相对定位 【答案】B 【解析】AP Div的定位基准并非固定为网页左上角，若嵌套在已定位的父元素中，基准为该父元素；left属性控制水平距离，AP Div可通过position: relative设置相对定位 8. 使用Div+CSS布局时，通常不建议使用的布局方式是（ ） A. 浮动布局 B. 绝对定位布局 C. 表格嵌套布局 D. 弹性布局 【答案】C 【解析】Div+CSS布局的核心是结构与样式分离，表格嵌套布局样式与结构耦合紧密，不利于维护和优化，是不建议使用的传统方式；浮动、绝对定位、弹性布局均为常用的Div布局方式 9. 在Dreamweaver CC中，为Div设置CSS样式时，若要定义Div的宽度和高度，应在“CSS规则定义”对话框的哪个分类中设置（ ） A. 类型 B. 背景 C. 方框 D. 定位 【答案】C 【解析】在“CSS规则定义”对话框中，“类型”用于设置文本样式，“背景”用于设置背景属性，“方框”用于设置宽高、边距等，“定位”用于设置定位相关属性 10. 下列关于AP Div“z-index”属性的说法，错误的是（ ） A. z-index属性的取值可以是正整数、负整数或0 B. z-index值越大，AP Div在堆叠顺序中越靠上 C. 未设置z-index的AP Div，其堆叠顺序由创建顺序决定，后创建的在上 D. 不同父元素下的AP Div，z-index值可以直接比较堆叠顺序 【答案】D 【解析】z-index取值可为正负整数或0，值越大层级越高，未设置时堆叠顺序由创建顺序决定（后创建在上）；但不同父元素下的AP Div，z-index值相对独立，无法直接比较，需通过父元素层级间接判断 11. 在Dreamweaver CC中，插入AP Div的正确操作是（ ） A. 点击“插入”面板→“布局”→“AP Div” B. 点击“插入”面板→“文本”→“AP Div” C. 右键单击文档窗口→“插入”→“AP Div” D. 直接在代码视图中输入“<apdiv></apdiv>”标签 【答案】A 【解析】Dreamweaver中插入AP Div的标准操作是“插入”面板→“布局”→“AP Div”；“文本”面板无AP Div选项，右键菜单无直接插入AP Div的命令，AP Div对应的HTML标签仍为<div>，而非<apdiv>， 12. AP Div的“position”属性取值不包括（ ） A. absolute B. relative C. fixed D. float 【答案】D 【解析】AP Div的position属性取值包括absolute（绝对定位）、relative（相对定位）、fixed（固定定位）；float是浮动属性，不属于position的取值 13. 下列关于Div嵌套的描述，正确的是（ ） A. Div不能嵌套其他Div元素，只能嵌套文本和图像 B. 嵌套的Div称为子Div，包含子Div的Div称为父Div，子Div会继承父Div的部分样式 C. 一个父Div最多只能嵌套一个子Div D. 嵌套的Div无法单独设置CSS样式，必须与父Div保持一致 【答案】B 【解析】 Div支持多层嵌套，一个父Div可嵌套多个子Div，子Div可单独设置CSS样式；嵌套的子Div会继承父Div的部分样式（如文本颜色） 14. 在Dreamweaver CC中，若要精确调整AP Div的位置和大小，可使用的工具是（ ） A. 文本工具 B. 选择工具 C. AP元素工具 D. 矩形工具 【答案】C 【解析】AP元素工具可用于精确调整AP Div的位置和大小，文本工具用于编辑文本，选择工具用于选中元素，矩形工具用于绘制图形，均无调整AP Div尺寸位置的功能 15. 下列关于Div布局与表格布局的对比，错误的是（ ） A. Div布局代码更简洁，表格布局代码冗余度高 B. Div布局修改样式更方便，表格布局样式与结构耦合紧密 C. 表格布局比Div布局更有利于搜索引擎抓取网页内容 D. Div布局兼容性更好，能适应不同屏幕尺寸的设备 【答案】C 【解析】Div布局代码简洁、样式易修改、兼容性好，比表格布局更利于搜索引擎抓取；表格布局样式与结构耦合，代码冗余 16. 当AP Div的“position”属性设置为“fixed”时，其定位基准是（ ） A. 网页文档的左上角 B. 浏览器窗口的可视区域 C. 最近的已定位父元素 D. 网页的body元素 【答案】B 【解析】position: fixed的定位基准是浏览器窗口的可视区域，滚动网页时元素位置固定；absolute基准为最近已定位父元素，relative基准为自身原位置，body元素并非fixed的定位基准 17. 在Dreamweaver CC中，若要使多个AP Div对齐，可使用的功能是（ ） A. “修改”→“对齐”→选择对应对齐方式 B. “编辑”→“格式”→“对齐” C. “窗口”→“对齐”→使用对齐面板 D. 按住Ctrl键拖动AP Div即可自动对齐 【答案】C 【解析】Dreamweaver中，精确对齐多个AP Div需通过“窗口”→“对齐”打开对齐面板，选择对应对齐方式；“修改”“编辑”菜单中的对齐功能多用于文本，按住Ctrl拖动无法自动对齐 18. 在CSS中，用于清除元素浮动带来的布局混乱问题的属性是（ ） A. clear B. float C. display D. overflow 【答案】A 【解析】clear属性用于清除浮动带来的布局混乱，取值包括left（清除左浮动）、right（清除右浮动）、both（清除两侧浮动）；float用于设置浮动，display用于定义元素显示模式，overflow用于处理内容溢出 19. CSS的“background-color”属性用于设置（ ） A. 元素的边框颜色 B. 元素的背景图片 C. 元素的背景颜色 D. 元素内文本的颜色 【答案】C 【解析】background-color用于设置元素的背景颜色；border-color设置边框颜色，background-image设置背景图片，color设置文本颜色 20. 在Dreamweaver CC中，创建外部CSS样式表的正确步骤是（ ） ①保存样式表文件（.css） ②点击“新建CSS规则” ③选择“外部样式表” ④设置CSS规则属性 A. ②③④① B. ③②④① C. ②①③④ D. ①②③④ 【答案】A 【解析】创建外部CSS样式表的步骤为：先点击“新建CSS规则”，选择“外部样式表”类型，设置规则属性，最后保存为.css文件，对应顺序为②③④① 21. 下列关于CSS“float”属性的取值，错误的是（ ） A. left B. right C. center D. none 【答案】C 【解析】CSS的float属性取值包括left（左浮动）、right（右浮动）、none（不浮动）；center并非float的有效取值，若需元素水平居中需通过其他方式实现 22. 在CSS中，用于设置元素边框粗细的属性是（ ） A. border-color B. border-width C. border-style D. border-radius 【答案】B 【解析】border-width用于设置元素边框粗细，border-color设置边框颜色，border-style设置边框样式（如实线、虚线），border-radius设置边框圆角 23. 下列CSS选择器中，优先级最高的是（ ） A. 标签选择器（如div） B. 类选择器（如.class） C. ID选择器（如#id） D. 通配符选择器（如*） 【答案】C 【解析】CSS选择器优先级从高到低为：ID选择器（#id）>类选择器（.class）>标签选择器（div）>通配符选择器（*） 24. 在CSS中，若要使Div元素在网页中水平居中，应设置的属性是（ ） A. text-align: center B. margin: 0 auto C. float: center D. position: center 【答案】B 【解析】Div水平居中需设置margin: 0 auto（上下边距0，左右自动居中）；text-align: center用于使Div内的文本或行内元素居中，float无center取值，position无center取值 25. 下列关于CSS“display”属性的描述，正确的是（ ） A. display: none; 会隐藏元素，且该元素不再占据页面空间 B. display: hidden; 是隐藏元素的标准写法 C. display: block; 会使元素变为行内元素，无法设置宽度和高度 D. display: inline; 会使元素变为块级元素，可自由设置宽高 【答案】A 【解析】display: none会隐藏元素且不占据页面空间，display无hidden取值（隐藏可用visibility: hidden）；display: block使元素变为块级元素（可设宽高），display: inline使元素变为行内元素（不可设宽高） 二、简答题（共4小题，每题5分，共20分） 1.如何利用CSS样式创建外部样式表? 【答案】见解析 【解析】 ①点击“CSS设计器”面板中的“新建CSS规则”按钮，在弹出的对话框中选择“选择器类型”为“类”（或ID、标签等，根据需求选择），再将“规则定义”设置为“新建样式表文件”； ②在弹出的“将样式表文件另存为”对话框中指定保存路径并命名（扩展名为.css）；随后在“CSS规则定义”对话框中设置所需的样式属性（如字体、颜色、背景等）；最后点击“确定”完成创建。 2. 选择AP Div的方法。 【答案】见解析 【解析】 ①单击AP Div的边框线。 ②在“AP元素”面板中单击AP Div的名称。 ③单击AP Div的内部，会在AP Div矩形的左上角产生一个控制柄图标，单击该图标，即可选中与它对应的AP Div。 ④按下【Shift】键，分别单击要选择的各个AP Div的内部或边框线，可以选中多个AP Div。 3. 如何调整AP Div的大小。 【答案】见解析 【解析】 ①在AP Div的“属性”面板中，输入“宽度”和“高度”值。 ②按住CTRL键的同时使用方向键，将以1个像素为单位精确调整大小。 ③按住Shift+Ctrl组合键，同时使用方向键，将以10个像素为单位调整大小。 ④拖动AP Div的控制柄。 4. Div属性面板上的“溢出”下拉列表中有几个选项？各有什么含义？ 【答案】见解析 【解析】“溢出”：用于设置当前AP Div中的内容超出其大小时的状态，可对其参数进行如下设置。 visible：AP Div高度自动增加，以容纳超出的内容。 hidden：AP Div大小不变，超出的内容隐藏。 scroll：在预览APDiv时，不管是否超出，都显示滚动条。 auto：自动识别是否显示滚动条，AP Div中内容超出时显示滚动条，否则不显示。 3、 案例分析题（共3小题，每题10分，共30分） 1.李华正在装饰个人网页，请帮忙完成下列要求。 （1）请为网页插入一个600×500的AP Div，并设置溢出属性为自适应。 【答案】见解析 【解析】 ①单击“插入”菜单，选择“布局对象”中的“AP Div”。在弹出的对话框中，设置宽度为600像素，高度为500像素，或直接在文档窗口中拖动绘制指定大小的AP Div。 ②选中该AP Div，在“属性”面板中找到“溢出”选项，将其设置为“auto”，实现自适应效果。 （2）将外部样式表xkw.css中的wy样式应用到网页正文中。 【答案】见解析 【解析】 ①打开网页文件，在“CSS设计器”面板中点击“源”选项右侧的“附加样式表”按钮。 ②在弹出的“链接外部样式表”对话框中，点击“浏览”按钮找到并选中外部样式表文件“xkw.css”，选择“链接”方式，然后点击“确定”。 ③在“CSS设计器”面板的“选择器”部分找到“wy”样式，将其拖动到网页正文对应的元素上，或者在该元素的“属性”面板的“类”选项中输入“wy”，即可将“wy”样式应用到网页正文中。 2. 请为AP Div设置默认属性，使其默认大小为300×200，背景色为黄色。 【答案】见解析 【解析】 ①打开Dreamweaver CC软件，选择“编辑→首选参数”命令，打开“首选参数”对话框，在“分类”列表中选择“AP元素”，在右边设置APDiv的默认属性值。 ②在“宽度”和“高度”输入框中分别输入“300”和“200”；在“背景颜色”选项中，选择黄色。设置完成后，点击“确定”按钮，保存设置。 3.请将网页中的“学生信息表”转化为Div,并设置div的背景颜色为灰色。 【答案】见解析 【解析】 ①选中“学生信息表”所在的表格选择“修改→转换→将表格转换为AP Div”命令，弹出“将表格转换为AP Div”对话框，进行设置后，单击“确定”按钮。 ②选中转换后的Div，在“属性”面板中找到“背景颜色”选项，将其设置为灰色即可。 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 $ · 山东省春季高考《网页制作》45分钟专题训练专辑，共16份试卷。试卷命题与高考紧密相关，精选具有代表性和典型性的高考常考题。旨在帮助学生系统地复习和巩固计算机类理论知识，熟悉高考题型和命题规律，提高解题能力和应试技巧，为高考取得优异成绩打下坚实的基础，本训练卷适用于即将参加计算机类高考的学生。与本专辑配套的还有山东省春季高考《图形图像处理》《计算机组装与维护》《数字摄影摄像》《实用美术基础》45分钟专题训练专辑，欢迎同学和老师们下载使用。 《网页制作》 专题十三 css与div布局 时间：45分钟 总分：100分 班级___________ 姓名__________ 学号__________ 成绩________ 一、选择题（共25个题，每题2分，共50分） 1.在Dreamweaver CC中，Div标签的核心作用是（ ） A.直接实现网页内容的动态交互效果 B.作为容器对网页元素进行结构化分区，便于样式控制与布局 C.替代图像标签插入网页图片 D.专门用于定义网页的标题样式 2.下列关于Div布局的优点，描述错误的是（ ） A.结构清晰，便于网页代码的维护与修改 B.与CSS结合紧密，能实现复杂且灵活的布局效果 C.加载速度比表格布局更快，有利于搜索引擎优化 D.无需编写CSS代码，即可实现固定的布局结构 3.为AP Div设置“可见性”属性时，若希望页面加载时该AP Div默认隐藏，应选择的属性值是（ ） A.visible B.hidden C.inherit D.collapse 4.下列操作中，不能在Dreamweaver CC“AP元素”面板中完成的是（ ） A.新建AP Div B.修改AP Div的堆叠顺序 C.为AP Div添加CSS动画 D.隐藏/显示AP Div 5.当多个AP Div发生重叠时，决定其显示层级的属性是（ ） A.z-index B.position C.top D.left 6.在Dreamweaver CC中，若要将普通Div转换为AP Div，应执行的操作是（ ） A.选中Div，在“属性”面板中将“定位”设置为“绝对” B.直接拖动Div到目标位置即可自动转换 C.选中Div，按Ctrl+Shift+A组合键 D.在“插入”面板中重新插入AP Div覆盖原Div 7.下列关于AP Div定位的描述，正确的是（ ） A.AP Div的定位基准始终是网页的左上角 B.若AP Div嵌套在另一个已定位的元素中，其定位基准为该父元素 C.AP Div的“left”属性用于设置其相对于父元素顶部的距离 D.AP Div无法设置相对定位 8.使用Div+CSS布局时，通常不建议使用的布局方式是（ ） A.浮动布局 B.绝对定位布局 C.表格嵌套布局 D.弹性布局 9.在Dreamweaver CC中，为Div设置CSS样式时，若要定义Div的宽度和高度，应在“CSS规则定义”对话框的哪个分类中设置（ ） A.类型 B.背景 C.方框 D.定位 10.下列关于AP Div“z-index”属性的说法，错误的是（ ） A.z-index属性的取值可以是正整数、负整数或0 B.z-index值越大，AP Div在堆叠顺序中越靠上 C.未设置z-index的AP Div，其堆叠顺序由创建顺序决定，后创建的在上 D.不同父元素下的AP Div，z-index值可以直接比较堆叠顺序 11.在Dreamweaver CC中，插入AP Div的正确操作是（ ） A.点击“插入”面板→“布局”→“AP Div” B.点击“插入”面板→“文本”→“AP Div” C.右键单击文档窗口→“插入”→“AP Div” D.直接在代码视图中输入“<apdiv></apdiv>”标签 12.AP Div的“position”属性取值不包括（ ） A.absolute B.relative C.fixed D.float 13.下列关于Div嵌套的描述，正确的是（ ） A.Div不能嵌套其他Div元素，只能嵌套文本和图像 B.嵌套的Div称为子Div，包含子Div的Div称为父Div，子Div会继承父Div的部分样式 C.一个父Div最多只能嵌套一个子Div D.嵌套的Div无法单独设置CSS样式，必须与父Div保持一致 14.在Dreamweaver CC中，若要精确调整AP Div的位置和大小，可使用的工具是（ ） A.文本工具 B.选择工具 C.AP元素工具 D.矩形工具 15.下列关于Div布局与表格布局的对比，错误的是（ ） A.Div布局代码更简洁，表格布局代码冗余度高 B.Div布局修改样式更方便，表格布局样式与结构耦合紧密 C.表格布局比Div布局更有利于搜索引擎抓取网页内容 D.Div布局兼容性更好，能适应不同屏幕尺寸的设备 16.当AP Div的“position”属性设置为“fixed”时，其定位基准是（ ） A.网页文档的左上角 B.浏览器窗口的可视区域 C.最近的已定位父元素 D.网页的body元素 17.在Dreamweaver CC中，若要使多个AP Div对齐，可使用的功能是（ ） A.“修改”→“对齐”→选择对应对齐方式 B.“编辑”→“格式”→“对齐” C.“窗口”→“对齐”→使用对齐面板 D.按住Ctrl键拖动AP Div即可自动对齐 18.在CSS中，用于清除元素浮动带来的布局混乱问题的属性是（ ） A.clear B.float C. display D.overflow 19.CSS的“background-color”属性用于设置（ ） A.元素的边框颜色 B.元素的背景图片 C.元素的背景颜色 D.元素内文本的颜色 20.在Dreamweaver CC中，创建外部CSS样式表的正确步骤是（ ） ①保存样式表文件（.css） ②点击“新建CSS规则” ③选择“外部样式表” ④设置CSS规则属性 A.②③④① B.③②④① C.②①③④ D.①②③④ 21.下列关于CSS“float”属性的取值，错误的是（ ） A.left B.right C.center D.none 22.在CSS中，用于设置元素边框粗细的属性是（ ） A.border-color B.border-width C.border-style D.border-radius 23.下列CSS选择器中，优先级最高的是（ ） A.标签选择器（如div） B.类选择器（如.class） C.ID选择器（如#id） D.通配符选择器（如*） 24.在CSS中，若要使Div元素在网页中水平居中，应设置的属性是（ ） A.text-align: center B.margin: 0 auto C.float: center D.position: center 25.下列关于CSS“display”属性的描述，正确的是（ ） A.display: none; 会隐藏元素，且该元素不再占据页面空间 B.display: hidden; 是隐藏元素的标准写法 C.display: block; 会使元素变为行内元素，无法设置宽度和高度 D.display: inline; 会使元素变为块级元素，可自由设置宽高 二、简答题（共4小题，每题5分，共20分） 1.如何利用CSS样式创建外部样式表? 2. 选择AP Div的方法。 3. 如何调整AP Div的大小。 4. Div属性面板上的“溢出”下拉列表中有几个选项？各有什么含义？ 3、 案例分析题（共3小题，每题10分，共30分） 1.李华正在装饰个人网页，请帮忙完成下列要求。 （1）请为网页插入一个600×500的AP Div，并设置溢出属性为自适应。 （2）将外部样式表xkw.css中的wy样式应用到网页正文中。 2. 请为AP Div设置默认属性，使其默认大小为300×200，背景色为黄色。 3.请将网页中的“学生信息表”转化为Div,并设置div的背景颜色为灰色。 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 $