1、网页设计与开发第4章试卷一、 选择题1.无序列表的 HTML 代码是（ ）A. B. C. D.答案: B2.有序列表的 HTML 代码是（ c ）A. B. C. D.3.定义列表的 HTML 代码是（ ）A B C D 答案: D4.下列说法错误的是（ ）Adisc 是定制表中 type 的标记 Bleft 是定制表中 type 的标记Ccircle 是定制表中 type 的标记 Dsquare 是定制表中 type 的标记答案: B5.定制表中 type 标记中的 circle 表示（ ）A圆点 B圆环 C字母 D方块答案: A6.定制表中 type 标记中的 square 表示（ ）A
2、圆点 B圆环 C字母 D方块答案: D7.定制有序列表表中的序号的起始值的表示法为（）A B C D答案: D8.以下有关列表的说法中，错误的是（ ）A有序列表和无序列表可以互相嵌套。B指定嵌套列表时，也可以具体指定项目符号或编号样式。C无序列表应使用 UL 和 LI 标记符进行创建。D在创建列表时，LI 标记符的结束标记符不可省略。答案: D9.在 HTML 网页中，用来定义有序列表的元素包括（ ）Aol Bul Cli Ddl答案: A10.有序列表的项目编号要从小写字母 a 开始，type 属性值设置为（）Aa B1CADI答案: A11.有序列表的项目编号要从大写罗马数字开始，type
3、 属性值设置为（）Aa B1CADI答案: A12.在 CSS 中，对标记进行样式定义，下面写法正确的是哪个（ ）Alist-style-type:discBtype=discClist-style：discDstyle-list-type：disc答案: A13.如果列表项前面的符号要换用特定的图片显示，使用 CSS 如何设置（）Aullist-style-type：images/a.gifBullist-style-image：images/a.gifC. ullist-style-type：url(images/a.gif)D ullist-style-image：url(images/
4、a.gif)答案: D14.定义一个列表样式为项目符号采用默认圆点、列表行高 33px、字体大小 22px，如何表达（ ）Aullist-style-type：disc；line-height：33px；font-size： 22pxBullist-style-type：disc； height：33px；font-size：22pxCullist-style-type：disc； height：33px； size：22pxDullist-style：disc； height：33px； size：22px答案: A15.使用 CSS 样式清除列表项前的圆点，使用的语法是（ ）Alist-s
5、tyle：noneBlist-style：no discClist-style：none disc Dlist-style:0答案: A16.对 li 标记添加什么样式定义实现了将一个垂直排列的导航改为水平导航。Afloat ：leftBlist-style：leftCmargin-left：10px Dtext-align：left答案: A17.如何产生带有数字列表符号的列表？A B C D 答案: C18.如何产生带有圆点列表符号的列表？A B C D 答案: B19.如何产生带有正方形的项目的列表？A. list-type: square B.list-style-type: squa
6、re C.type: square D.type: 2 答案:B20.我们想要将页面中的文本采用项目符号的形式予以显示，采用哪些标记组合可以达到我们的要求？A.和B.和C.和D.和答案：B21.要在网页中显示下面的列表.苹果.芒果.橘子下列语句正确的是（）A.苹果 芒果橘子B.苹果芒果 橘子C.苹果 芒果 橘子D.苹果芒果橘子答案：A22.下列 HTML 标记中，属于成对标记的是（ ） 。 A B. C. D. 答案：B23.有序列表的项目编号要从大写英文字母开始，type 属性值设置为（）Aa B1CADI答案: C24.有序列表的项目编号要从小写罗马数字开始，type 属性值设置为（）Aa
7、 B1CADi答案: d25.改变有序列表的项目编号起始值的属性是（）AvalueBstartCtypeDbegin答案: B26.li 标记里的 type 属性设置的影响范围是（）A只影响当前列表项B影响了后续列表项C影响了全部列表项D不能影响任何列表项答案: A27.对 li 标记里的 type 属性设置的指定，能使用在（）A无序列表中B有序列表中C无序列表和有序列表中D不能进行 li 标记的 type 属性设置答案: C28.改变有序列表的单个项目编号值的大小的属性是（）AvalueBstartCtypeDbegin答案: A29.改变有序列表的单个项目编号值的 value 属性能应用与
8、（）A无序列表中B有序列表中C无序列表和有序列表中D不能应用与有序列表和有序列表中答案: B30.下列说法不正确的是（ ）A嵌套列表可以是无序列表的嵌套B嵌套列表可以是有序列表的嵌套C嵌套列表可以是无序列表和有序列表的混合嵌套D列表不能进行嵌套答案: D二、 填空题1） 无序列表中可用的项目符号包括_、_和_。答案: disc circle square2） 用于取消列表项前默认项目符号的样式定义是_。答案: list-style：none3）使得列表项从默认的垂直排列到水平排列的样式定义是_。答案: float：left4）有序列表标记的 type 属性可以指定出现在列表项前的项目编号的样式
9、，其取值可以是： 、 、 、 和 五种。答案: 1 a A i I5）使用有序列表标记的 属性后，用户则可改变编号的起始值。该属性值是一个 ，表示从哪一个数字或字母开始编号。答案: start 整数6)商业网站开发中的新闻信息常常采用 来开发。答案: 无序列表7. 设置 CSS 属性 float 的值为 _时可取消元素的浮动。答案: none8.为一个列表项设置边框 4px，实心边框，列表项字体颜色为#ff9900,列表项背景颜色为#fc3，可通过利用 CSS 设置的_即可。答案: liborder:4px solid #ff9900;background:#fc39.定制表中 type 标记
10、中的 circle 表示_。答案: 空心圆点10 .定制有序列表中序号启始值表示法为_。答案: 三、 简答题1. 写出 ul、ol、dl 三种列表的 html 结构。答案：Ul 列表的结构如下OL 列表的结构如下DL 列表的结构如下2.简述有序列表标记的 type 属性。答案：使用有序列表标记的 type 属性，用户可以指定出现在列表项前的项目编号的样式，其取值以及相对应的编号样式如下：1. “1”：指定项目编号为阿拉伯数字（IE 浏览器的默认值是 disc） ；2. “a”：指定项目编号为小写英文字母；3. “A”：指定项目编号为大写英文字母；4. “i”：指定项目编号为小写罗马数字；5.
11、“I”：指定项目编号为大写罗马数字。知识点：有序列表3.举例说明如何改变有序列表标记的 type 属性的编号起始值。答案：通常，在指定列表的编号样式后，浏览器会从“1” 、 “a”、 “A”、 “i”或“I”开始自动编号。而在使用有序列表标记的 start 属性后，用户则可改变编号的起始值。start 属性值是一个整数，表示从哪一个数字或字母开始编号。例如，设置 start=“3“，则有序列表的列表项编号将从“3” 、 “c”、 “C”、 “”或“”开始编号。4.列表是否能嵌套使用？有什么作用。答案：列表还可以嵌套使用，也就是一个列表中还可以包含有多层子列表。在网页文件中，对于内容层次较多的情
12、况，使用嵌套列表不仅使网页的内容布局更加合理美观，而且使其内容看起来更加清晰、明了。嵌套的列表可以是无序列表的嵌套，也可以是有序列表的嵌套，还可以是无序列表和有序列表的混合嵌套。知识点：嵌套列表四、 实验题1. 制作一个用列表显示的新闻显示板块，要求利用列表方法，适当运用字体、字号间距等的修饰完成新闻列表的定义。答案: 源代码：.containerwidth: 350px;margin:0 auto;text-align:left;background-color:#EFEFDA;padding: 20px;.first_linefont-family:黑体;font-size:22px;pa
13、dding-left:20px; ullist-style-type: disc;font-size:22px;line-height:33px;暴雪：商业 艺术与技术的平衡之道点选名将 抢礼包千军破首服开启战国新游 王者天下开启 抢礼包快来玩 德州扑克 与人斗其乐无穷 十年一剑真武侠一区开启 抢礼包可买卖游戏代码 传魔兽大灾变过审批儿时游戏 50 年变迁 00 后迷动画爱网游监狱强迫犯人打网游 徐州禁少年进网吧ipad 成为最赚钱的移动游戏平台 2 .导航是一个网站的重要组成元素。利用列表显示导航内容，并适当运用 CSS3 的字体、字号间距及浮动等修饰属性能够完成垂直导航条及水平导航条的制作
14、。答案：源代码文件body font-family: Verdana; font-size: 12px;font-weight:bold; line-height: 1.5px; a color: #FFF; text-decoration: none; a:hover color: #F00; #menu border: 1px solid #CCC; height:26px; background: #0000ff;#menu ul list-style: none; margin: 0px; #menu ul li float:left; padding: 0px 40px; line-
15、height: 26px; 公司简介产品中心服务中心在线订单关于我们知识点：列表的综合运用参考页: P48学习目标: 5.掌握使用列表制作导航条的方法难度: 3提示一：该题考察知识点：4.5 列表的综合运用提示二：采用无序列表实现，主要的操作有去除项目样式符号、调整行间距等。先制作垂直导航，然后使用浮动将垂直导航变化为水平导航。提示三：步骤 1：创建文件水平导航.html，定义页面结构，完成内容的基本布局.containerwidth:650px;margin:0 auto;text-align:center;background-color:#FFFFFF;padding:20px;步骤 2
16、：建立内容项的无序列表显示下面的代码在步骤一的基础上，在 DIV 块内加入了列表定义。公司简介产品中心服务中心此时已经能够看出导航的原型了，但是还相对简陋，需要进行美化。可以从以下几个方面考虑调整它的显示样式：第一：无序列表前的默认圆点需清除；第二：各列表项之间的间隔需加大；第三：效果图中的背景色。步骤 3：进行格式美化 清除列表项前的圆点，可以通过设置的“list-style:none”即可； 内容项之间的间隔可以通过增大的行间距，如“ line-height:33px;” 导航项采用深蓝色背景色根据上面的样式分析，下面的页面代码在样式定义部分定义了不同的样式，并在正文中的对应部分添加了引用
17、。.containerwidth:200px;margin:0 auto;text-align:center;background-color:#FFFFFF;padding: 20px;#navlist-style:none; font-size:22px;line-height:40px; #nav limargin-top:5px; border-top:4px solid #7BC110; background:#be6;公司简介产品中心服务中心页面运行的效果如图 4-11 所示。在程序 4-2 中： 正文中无序列表“”中的“id=“nav“”表示此标记的样式来自 style中定义的“
18、#nav” ，这种样式引用的方式是通过在样式定义中寻找和标记的 id 属性值一样的样式名称。 样式定义中的“#nav limargin-top:5px;”则表示对 id 为“nav ”的标记中包含的标记使用此样式定义，其作用是在每个导航项的上方留出 5px 的空白。接下来，将该导航可以更改为水平导航，这只涉及到修改样式的工作。下面是修改后的样式（具体参加 4-3.html） 。#navlist-style:none; font-size:22px;line-height:40px; #nav limargin-right:5px;float:left;width:100px;上述样式和页面 4-2 中相比，变化在以下几个地方： 在#nav li 中添加 float:left 属性，使其列表内容全部向左浮动显示，这样就实现了列表的横向显示，这是无序列表水平导航效果实现的关键，同时可以调整每个列表项 width 宽度值为 100px； 在 4-2.html 中通过定义“#nav li”的“margin-top:5px;”实现了每个列表项上方空出 5px 的空白，这里修改为“margin-right:5px; ”表示每个列表项的右方空出 5px的空白。具体效果见下图所示。图 水平导航实现效果
