网页设计与开发第4章试卷及答案

1、网页设计与开发第4章试卷一、 选择题1. 无序列表的HTML代码是（）A <li><ui>.</li>B <ul><li>.</ul>C <Ol><li>.<Ol>D <li><ol>.</li>答案:B2. 有序列表的HTML代码是（c）A <ul><li>.</ul>B <li><ul>.</li>C <ol><li>.</ol>D <

2、li><ol>.<li>3. 定义列表的HTML代码是（）A <dt><dl><dd></dl>B <dd><dt><dl></dd>C <dt><dd><dl></dt>D <dl><dt><dd></dl>答案: D4. 下列说法错误的是（）A disc是定制表中type 的标记B left是定制表中type 的标记C circle是定制表中type 的标记D squar

3、e 是定制表中type 的标记答案:B5. 定制表中type 标记中的circle表示（）A圆点B圆环C字母D方块答案:A6. 定制表中type 标记中的square 表示（）A圆点B圆环C字母D方块答案: D7. 定制有序列表表中的序号的起始值的表示法为（）A <ol begint=#>B <ol star=#>C <ol still=#>D <ol start=#>答案: D8. 以下有关列表的说法中，错误的是（）A有序列表和无序列表可以互相嵌套。B指定嵌套列表时，也可以具体指定项目符号或编号样式。C无序列表应使用UL 和 LI标记符进行创建

4、。D在创建列表时，LI标记符的结束标记符不可省略。答案: D9. 在 HTML网页中，用来定义有序列表的元素包括（）A olB ulC liD dl答案: A10. 有序列表的项目编号要从小写字母a 开始， type 属性值设置为（）A aB 1C AD I答案: A11. 有序列表的项目编号要从大写罗马数字开始，type 属性值设置为（）A aB 1C AD I答案: A12. 在 CSS中，对 <ul> 标记进行样式定义，下面写法正确的是哪个（）A list-style-type:discB type=discC list-style： discD style-list-typ

5、e： disc答案: A13. 如果列表项前面的符号要换用特定的图片显示，使用CSS如何设置（）A ullist-style-type： images/a.gifB ullist-style-image： images/a.gifC. ullist-style-type： url(images/a.gif)Dullist-style-image：url(images/a.gif)答案:D14. 定义一个列表样式为项目符号采用默认圆点、列表行高33px、字体大小22px，如何表达（）A ullist-style-type： disc ； line-height：33px；font-size： 2

6、2pxB ullist-style-type： disc ； height： 33px； font-size ： 22pxC ullist-style-type： disc ； height： 33px； size ： 22pxD ullist-style：disc ； height ： 33px； size ： 22px答案:A15. 使用 CSS样式清除列表项前的圆点，使用的语法是（）A list-style： noneB list-style： no discC list-style： none discD list-style:0答案:A16. 对 li 标记添加什么样式定义实现了将一

7、个垂直排列的导航改为水平导航。A float：leftB list-style： leftC margin-left： 10pxD text-align： left答案:A17. 如何产生带有数字列表符号的列表？A <ul>B <dl>C <ol>D <list>答案: C18. 如何产生带有圆点列表符号的列表？A <dl>B <list>C <ol>D <ul>答案: B19. 如何产生带有正方形的项目的列表？A. list-type: squareB.list-style-type: squar

8、eC.type: squareD.type: 2答案 :B20. 我们想要将页面中的文本采用项目符号的形式予以显示，采用哪些标记组合可以达到我们的要求？A.<P>和 <hr>B.<UL>和 <li>C.<BR>和 <p>D.<LI> 和 <A>答案： B21. 要在网页中显示下面的列表. 苹果. 芒果. 橘子下列语句正确的是（）A.<ul><li>苹果 <li> 芒果 <li> 橘子 </ul>B.<ol><li>苹

9、果 <li> 芒果 <li> 橘子 </ol>C.<ul><ui> 苹果 <ui> 芒果 <ui> 橘子 </ul>D.<ol type=A><li><li>苹果 <li> 芒果 <li> 橘子 </ol>答案： A22. 下列 HTML标记中，属于成对标记的是（）。A <br>B. <ul>C. <P>D. <hr>答案： B23. 有序列表的项目编号要从大写英文字母开始，typ

10、e 属性值设置为（）A aB 1C AD I答案: C24. 有序列表的项目编号要从小写罗马数字开始，type 属性值设置为（）A aB 1C AD i答案 : d25. 改变有序列表的项目编号起始值的属性是（）A valueB startC typeD begin答案: B26.li标记里的type 属性设置的影响范围是（）A只影响当前列表项B影响了后续列表项C影响了全部列表项D不能影响任何列表项答案: A27. 对 li 标记里的 type 属性设置的指定，能使用在（）A无序列表中B有序列表中C无序列表和有序列表中D不能进行li标记的 type 属性设置答案: C28. 改变有序列表的单个

11、项目编号值的大小的属性是（）A valueB startC typeD begin答案:A29. 改变有序列表的单个项目编号值的value 属性能应用与（）A无序列表中B有序列表中C无序列表和有序列表中D不能应用与有序列表和有序列表中答案:B30. 下列说法不正确的是（）A嵌套列表可以是无序列表的嵌套B嵌套列表可以是有序列表的嵌套C嵌套列表可以是无序列表和有序列表的混合嵌套D列表不能进行嵌套答案:D二、 填空题1） 无序列表中可用的项目符号包括_ 、_和 _。答案 :disc circle square2） 用于取消列表项前默认项目符号的样式定义是_ 。答案 : list-style： non

12、e3）使得列表项从默认的垂直排列到水平排列的样式定义是_ 。答案 : float：left4）有序列表标记 <ol> 的 type 属性可以指定出现在列表项前的项目编号的样式，其取值可以是：、和五种。答案 : 1 a A i I5）使用有序列表标记的属性后，用户则可改变编号的起始值。该属性值是一个，表示从哪一个数字或字母开始编号。答案 : start整数6) 商业网站开发中的新闻信息常常采用来开发。答案 :无序列表7.设置 CSS属性 float的值为 _ 时可取消元素的浮动。答案 :none8. 为一个列表项设置边框4px，实心边框，列表项字体颜色为#fc3 ，可通过利用CSS设

13、置 <li> 的 _即可。#ff9900,列表项背景颜色为答案 : liborder:4px solid #ff9900;background:#fc39. 定制表中type 标记中的circle表示 _。答案 :空心圆点10 . 定制有序列表中序号启始值表示法为_。答案 : <ol start=#>三、 简答题1. 写出 ul 、 ol 、 dl 三种列表的 html 结构。答案： Ul 列表的结构如下<ul><li></li></ul>OL列表的结构如下<ol><li> </li>&

14、lt;/ol>DL 列表的结构如下<dl><dt></dt><dd></dd></dl>2. 简述有序列表标记的 type 属性。答案：使用有序列表标记的type 属性，用户可以指定出现在列表项前的项目编号的样式，其取值以及相对应的编号样式如下：1.“1”：指定项目编号为阿拉伯数字（IE 浏览器的默认值是disc ）；2. “a”：指定项目编号为小写英文字母；3. “A”：指定项目编号为大写英文字母；4. “i ”：指定项目编号为小写罗马数字；5. “I ”：指定项目编号为大写罗马数字。知识点：有序列表3. 举例说明

15、如何改变有序列表标记的type 属性的编号起始值。答案：通常，在指定列表的编号样式后，浏览器会从“1”、“ a”、“ A”、“ i ”或“ I ”开始自动编号。而在使用有序列表标记的start属性后，用户则可改变编号的起始值。start属性值是一个整数，表示从哪一个数字或字母开始编号。例如，设置start="3"，则有序列表的列表项编号将从“3”、“c”、“ C”、“”或“”开始编号。4. 列表是否能嵌套使用？有什么作用。答案：列表还可以嵌套使用，也就是一个列表中还可以包含有多层子列表。在网页文件中，对于内容层次较多的情况， 使用嵌套列表不仅使网页的内容布局更加合理美观，

16、而且使其内容看起来更加清晰、 明了。嵌套的列表可以是无序列表的嵌套， 也可以是有序列表的嵌套，还可以是无序列表和有序列表的混合嵌套。知识点：嵌套列表四、 实验题1. 制作一个用列表显示的新闻显示板块， 要求利用列表方法， 适当运用字体、 字号间距等的修饰完成新闻列表的定义。答案 :源代码：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN"<html><head><style type="text/css">.containerwidth:350p

17、x;margin:0 auto;text-align:left;background-color:#EFEFDA;padding: 20px;.first_linefont-family:黑体 ;font-size:22px;padding-left:20px;ullist-style-type: disc;font-size:22px;line-height:33px;</style></head><body><div class=”container ”><p class="first_line">暴雪：商业艺

18、术与技术的平衡之道 </p><ul><li>点选名将 抢礼包千军破首服开启 </li><li>战国新游王者天下开启抢礼包 </li><li>快来玩德州扑克与人斗其乐无穷 </li><li>十年一剑真武侠一区开启抢礼包 </li><li>可买卖游戏代码传魔兽大灾变过审批 </li><li>儿时游戏 50 年变迁 00 后迷动画爱网游 </li><li>监狱强迫犯人打网游徐州禁少年进网吧 </li><l

19、i>ipad成为最赚钱的移动游戏平台 </li></ul></div></body></html>2 .导航是一个网站的重要组成元素。利用列表显示导航内容，并适当运用CSS3的字体、字号间距及浮动等修饰属性能够完成垂直导航条及水平导航条的制作。答案：源代码文件<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css

20、">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

21、-height: 26px; </style></head><body><div id="menu"><ul><li><a href="">公司简介</a></li><li><a href="">产品中心</a></li><li><a href="">服务中心</a></li><li><a hre

22、f="">在线订单</a></li><li><a href="">关于我们</a></li></ul></div></body></html>知识点：列表的综合运用参考页 : P48学习目标 :5.掌握使用列表制作导航条的方法难度:3提示一： 该题考察知识点：4.5 列表的综合运用提示二： 采用无序列表实现，主要的操作有去除项目样式符号、调整行间距等。先制作垂直导航，然后使用浮动将垂直导航变化为水平导航。提示三： 步骤 1：创建文

23、件水平导航.html ，定义页面结构，完成内容的基本布局<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN"<html><head><style type="text/css">.containerwidth:650px;margin:0 auto;text-align:center;background-color:#FFFFFF;padding:20px;</style></head><body><di

24、v class="container"><!-在此内部添加内容-></div></body></html>步骤 2：建立内容项的无序列表显示下面的代码在步骤一的基础上，在DIV 块内加入了列表定义。<div class="container"><ul><li>公司简介 </li><li>产品中心 </li><li>服务中心 </li></ul></div>此时已经能够看出导航的原型了

25、，但是还相对简陋，需要进行美化。 可以从以下几个方面考虑调整它的显示样式：第一：无序列表前的默认圆点需清除；第二：各列表项之间的间隔需加大；第三：效果图中的背景色。步骤 3：进行格式美化清除列表项前的圆点，可以通过设置<li> 的“ list-style:none”即可；内容项之间的间隔可以通过增大<li> 的行间距，如“line-height:33px;”导航项采用深蓝色背景色根据上面的样式分析， 下面的页面代码在样式定义部分定义了不同的样式， 并在正文中的对应部分添加了引用。<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML

26、 1.0 Transitional/EN"<html><head><style type="text/css">.containerwidth:200px;margin:0 auto;text-align:center;background-color:#FFFFFF;padding: 20px;#navlist-style:none; font-size:22px;line-height:40px; #navlimargin-top:5px;border-top:4pxsolid#7BC110;background:#be6;</style></head><