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

《网页设计与开发第4章》试卷
一、 选择题
1.无序列表的HTML代码是( )
A．<li><ui>..。</li>
B．<ul〉〈li〉。。.〈/ul>
C．〈Ol〉〈li>。..<Ol>
D．〈li〉<ol>。。.〈/li〉
答案: B
2。有序列表的HTML代码是（ c ）
A．<ul〉<li〉。.。</ul〉
B．<li>〈ul>.。.〈/li>
C．<ol〉〈li〉.。。〈/ol〉
D．<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〉
答案: D
4。下列说法错误的是( ）
A．disc是定制表中type的标记
B．left是定制表中type的标记
C．circle是定制表中type的标记
D．square是定制表中type的标记
答案: B
5。定制表中type标记中的circle表示（ ）
A．圆点
B．圆环
C．字母
D．方块
答案: A
6。定制表中type标记中的square表示( )
A．圆点
B．圆环
C．字母
D．方块
答案： D
7.定制有序列表表中的序号的起始值的表示法为（)
A．〈ol begint=#〉
B．〈ol star=#〉
C．〈ol still=#>
D．<ol start=＃〉
答案： D
8。以下有关列表的说法中，错误的是（ ）
A．有序列表和无序列表可以互相嵌套.
B．指定嵌套列表时，也可以具体指定项目符号或编号样式。
C．无序列表应使用 UL 和 LI 标记符进行创建。
D．在创建列表时，LI 标记符的结束标记符不可省略。
答案: D
9.在HTML网页中,用来定义有序列表的元素包括（ )
A．ol
B．ul
C．li
D．dl
答案: A
10。有序列表的项目编号要从小写字母a开始，type属性值设置为（)
A．a
B．1
C．A
D．I
答案: A
11.有序列表的项目编号要从大写罗马数字开始，type属性值设置为（）
A．a
B．1
C．A
D．I
答案： A
12。在CSS中，对〈ul>标记进行样式定义，下面写法正确的是哪个（ ）
A．list—style—type:disc
B．type=disc
C．list—style：disc
D．style-list—type:disc
答案： A
13。如果列表项前面的符号要换用特定的图片显示，使用CSS如何设置（）
A．ul{list—style—type：images/a.gif｝
B．ul｛list—style-image：images/a.gif｝
C。 ul｛list-style-type：url(images/a。gif）}
D． ul{list—style-image：url(images/a.gif)｝
答案: D
14.定义一个列表样式为项目符号采用默认圆点、列表行高33px、字体大小22px，如何表达（ ）
A．ul{list-style-type：disc;line-height:33px；font-size：22px｝
B．ul{list—style—type：disc; height:33px；font—size:22px}
C．ul{list—style-type:disc； height:33px； size：22px}
D．ul｛list-style：disc; height：33px； size：22px｝
答案： A
15.使用CSS样式清除列表项前的圆点，使用的语法是( )
A．list—style:none
B．list—style：no disc
C．list-style：none disc
D．list-style：0
答案： A
16.对li标记添加什么样式定义实现了将一个垂直排列的导航改为水平导航。
A．float：left
B．list-style:left
C．margin—left：10px
D．text—align：left
答案： A
17.如何产生带有数字列表符号的列表？
A．<ul〉
B．<dl〉
C．<ol>
D．<list>
答案: C
18。如何产生带有圆点列表符号的列表？
A．<dl>
B．<list〉
C．〈ol〉
D．〈ul〉
答案: B
19.如何产生带有正方形的项目的列表？
A. list-type： square
B.list-style—type： square
C。type: square
D.type： 2
答案：B
20.我们想要将页面中的文本采用项目符号的形式予以显示，采用哪些标记组合可以达到我们的要求？
A。〈P>和<hr>
B.〈UL>和〈li〉
C。<BR>和〈p>
D.<LI〉和〈A>
答案：B
21。要在网页中显示下面的列表
.苹果
。芒果
。橘子
下列语句正确的是（）
A.〈ul>〈li>苹果〈li〉芒果<li〉橘子〈/ul>
B.〈ol><li〉苹果〈li>芒果<li〉橘子</ol>
C。<ul〉<ui>苹果<ui>芒果〈ui>橘子</ul>
D.<ol type=A><li>〈li〉苹果<li〉芒果<li>橘子</ol>
答案：A
22.下列HTML标记中，属于成对标记的是（ ).
A．<br〉
B。 〈ul>
C. 〈P〉
D。 <hr〉
答案：B
23.有序列表的项目编号要从大写英文字母开始，type属性值设置为（)
A．a
B．1
C．A
D．I
答案: C
24。有序列表的项目编号要从小写罗马数字开始，type属性值设置为（）
A．a
B．1
C．A
D．i
答案: d
25.改变有序列表的项目编号起始值的属性是（)
A．value
B．start
C．type
D．begin
答案： B
26.li标记里的type属性设置的影响范围是（）
A．只影响当前列表项
B．影响了后续列表项
C．影响了全部列表项
D．不能影响任何列表项
答案： A
27。对li标记里的type属性设置的指定，能使用在（）
A．无序列表中
B．有序列表中
C．无序列表和有序列表中
D．不能进行li标记的type属性设置
答案: C
28。改变有序列表的单个项目编号值的大小的属性是(）
A．value
B．start
C．type
D．begin
答案： A
29.改变有序列表的单个项目编号值的value属性能应用与（)
A．无序列表中
B．有序列表中
C．无序列表和有序列表中
D．不能应用与有序列表和有序列表中
答案： B
30。下列说法不正确的是（ ）
A．嵌套列表可以是无序列表的嵌套
B．嵌套列表可以是有序列表的嵌套
C．嵌套列表可以是无序列表和有序列表的混合嵌套
D．列表不能进行嵌套
答案： D
二、 填空题
1） 无序列表中可用的项目符号包括______________、______________和______________。
答案： disc circle square
2） 用于取消列表项前默认项目符号的样式定义是_________________________________。
答案: list-style：none
3）使得列表项从默认的垂直排列到水平排列的样式定义是_____________________。
答案： float：left
4）有序列表标记<ol>的type属性可以指定出现在列表项前的项目编号的样式，其取值可以是： 、 、 、 和 五种。
答案： 1 a A i I
5）使用有序列表标记的 属性后，用户则可改变编号的起始值。该属性值是一个 ，表示从哪一个数字或字母开始编号。
答案: start 整数
6）商业网站开发中的新闻信息常常采用 来开发。
答案: 无序列表
7。 设置CSS属性float的值为 _______时可取消元素的浮动.
答案: none
8。为一个列表项设置边框4px，实心边框，列表项字体颜色为#ff9900,列表项背景颜色为＃fc3，可通过利用CSS设置<li〉的_______即可。
答案: li{border:4px solid #ff9900;background:＃fc3}
9。定制表中type标记中的circle表示_______.
答案: 空心圆点
10 。定制有序列表中序号启始值表示法为_______。
答案: 〈ol start=＃>
三、 简答题
1. 写出ul、ol、dl三种列表的html结构。
答案:Ul列表的结构如下
〈ul〉
〈li〉 </li>
</ul〉
OL列表的结构如下
<ol〉
<li〉 〈/li>
</ol〉
DL列表的结构如下
<dl〉
〈dt〉 </dt〉
〈dd〉 〈/dd〉
〈/dl〉
〈ul〉
〈li></li〉
</ul>
<ol>
<li>〈/li>
</ol>
〈dl〉
<dt〉〈/dt>
<dd>〈/dd〉
</dl>
2。简述有序列表标记的type属性。
答案：使用有序列表标记的type属性，用户可以指定出现在列表项前的项目编号的样式，其取值以及相对应的编号样式如下:
1. “1"：指定项目编号为阿拉伯数字（IE浏览器的默认值是disc）；
2. “a”：指定项目编号为小写英文字母；
3. “A"：指定项目编号为大写英文字母；
4. “i”：指定项目编号为小写罗马数字；
5. “I”:指定项目编号为大写罗马数字。
知识点：有序列表
3。举例说明如何改变有序列表标记的type属性的编号起始值。
答案:通常,在指定列表的编号样式后,浏览器会从“1"、“a"、“A"、“i"或“I"开始自动编号。而在使用有序列表标记的start属性后,用户则可改变编号的起始值。start属性值是一个整数，表示从哪一个数字或字母开始编号.例如，设置start=”3”，则有序列表的列表项编号将从“3"、“c”、“C”、“ⅲ”或“Ⅲ”开始编号。
4。列表是否能嵌套使用?有什么作用。
答案：列表还可以嵌套使用，也就是一个列表中还可以包含有多层子列表。在网页文件中，对于内容层次较多的情况，使用嵌套列表不仅使网页的内容布局更加合理美观，而且使其内容看起来更加清晰、明了。嵌套的列表可以是无序列表的嵌套，也可以是有序列表的嵌套，还可以是无序列表和有序列表的混合嵌套.
知识点：嵌套列表
四、 实验题
1. 制作一个用列表显示的新闻显示板块，要求利用列表方法,适当运用字体、字号间距等的修饰完成新闻列表的定义。
答案： 源代码：
<！DOCTYPE html PUBLIC "—//W3C//DTD XHTML 1.0 Transitional//EN"
”http://www。w3。org/TR/xhtml1/DTD/xhtml1-transitional。dtd"〉
〈html>
〈head〉
<style type="text/css”>
.container｛width: 350px;margin:0 auto;text—align：left；
background-color:#EFEFDA;padding: 20px；｝
。first_line｛font—family：黑体；font-size:22px;padding-left:20px；}
ul{list—style-type: disc；font—size:22px；line-height:33px；}
〈/style>
</head>
<body〉
<div class=”container”>
<p class=”first_line">暴雪:商业 艺术与技术的平衡之道〈/p〉
〈ul〉
〈li>点选名将 抢礼包《千军破》首服开启</li〉
〈li〉战国新游《王者天下》开启 抢礼包〈/li>
<li〉快来玩《德州扑克》 与人斗其乐无穷</li>
〈li〉《十年一剑》真武侠一区开启 抢礼包</li>
〈li〉可买卖游戏代码 传魔兽大灾变过审批〈/li〉
〈li〉儿时游戏50年变迁 00后迷动画爱网游〈/li〉
<li〉监狱强迫犯人打网游 徐州禁少年进网吧〈/li>
<li〉ipad成为最赚钱的移动游戏平台</li〉
</ul〉
</div>
</body>
〈/html>
2 .导航是一个网站的重要组成元素。利用列表显示导航内容，并适当运用CSS3的字体、字号间距及浮动等修饰属性能够完成垂直导航条及水平导航条的制作。
答案：源代码文件
<html xmlns="http：//www。w3。org/1999/xhtml”>
<head>
〈meta http—equiv="Content—Type" content=”text/html; charset=gb2312” /〉
〈style type=”text/css">
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-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 href=""〉在线订单〈/a></li>
<li>〈a href="”>关于我们</a〉</li>
</ul>
</div>
</body〉
〈/html〉
知识点：列表的综合运用
参考页: P48
学习目标: 5。掌握使用列表制作导航条的方法
难度: 3
提示一：该题考察知识点:4.5列表的综合运用
提示二：采用无序列表实现，主要的操作有去除项目样式符号、调整行间距等。先制作垂直导航，然后使用浮动将垂直导航变化为水平导航。
提示三：步骤1：创建文件水平导航。html，定义页面结构，完成内容的基本布局
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
”http：//www.w3。org/TR/xhtml1/DTD/xhtml1—transitional。dtd">
<html〉
〈head>
<style type="text/css"〉
.container｛width:650px；margin：0 auto；text—align:center；
background—color:＃FFFFFF；padding：20px;｝
</style〉
〈/head>
〈body〉
〈div class=”container">
<！——在此内部添加内容 -—>
</div>
</body〉
〈/html>
步骤2:建立内容项的无序列表显示
下面的代码在步骤一的基础上，在DIV块内加入了列表定义。
<div class=”container”〉
<ul〉
〈li〉公司简介〈/li>
〈li〉产品中心</li〉
〈li〉服务中心〈/li〉
</ul>
</div〉
此时已经能够看出导航的原型了，但是还相对简陋，需要进行美化。可以从以下几个方面考虑调整它的显示样式：
第一：无序列表前的默认圆点需清除;
第二：各列表项之间的间隔需加大；
第三:效果图中的背景色。
步骤3：进行格式美化
l 清除列表项前的圆点，可以通过设置〈li〉的“list—style：none”即可；
l 内容项之间的间隔可以通过增大<li>的行间距，如“line—height:33px；”
l 导航项采用深蓝色背景色
根据上面的样式分析，下面的页面代码在样式定义部分定义了不同的样式，并在正文中的对应部分添加了引用。
〈！DOCTYPE html PUBLIC "—//W3C//DTD XHTML 1。0 Transitional//EN”
"http://www.w3.org/TR/xhtml1/DTD/xhtml1—transitional。dtd">
〈html〉
〈head〉
〈style type="text/css”>
。container｛width:200px;margin:0 auto;text—align：center;
background-color:＃FFFFFF;padding： 20px；｝
#nav{list—style:none; font-size:22px;line—height：40px; ｝
＃nav li｛margin-top:5px; border—top：4px solid ＃7BC110； background:＃be6；}
</style>
〈/head〉
<body〉
<div class=”container">
<ul id="nav”>
〈li>公司简介</li〉
〈li>产品中心</li>
〈li>服务中心〈/li>
〈/ul>
</div〉
</body〉
</html>
页面运行的效果如图4-11所示.在程序4—2中：
l 正文中无序列表“〈ul id="nav"〉”中的“id=”nav””表示此标记的样式来自style中定义的“#nav”，这种样式引用的方式是通过在样式定义中寻找和标记的id属性值一样的样式名称。
l 样式定义中的“#nav li｛margin-top：5px；｝”则表示对id为“nav”的标记中包含的<li〉标记使用此样式定义，其作用是在每个导航项的上方留出5px的空白.
接下来,将该导航可以更改为水平导航,这只涉及到修改样式的工作。下面是修改后的样式(具体参加4-3。html)。
#nav｛list—style：none; font—size:22px；line-height:40px; }
#nav li{margin-right：5px；float:left；width:100px;｝
上述样式和页面4—2中相比，变化在以下几个地方：
l 在#nav li中添加float：left属性，使其列表内容全部向左浮动显示，这样就实现了列表的横向显示，这是无序列表水平导航效果实现的关键，同时可以调整每个列表项width宽度值为100px;
l 在4-2。html中通过定义“#nav li"的“margin—top：5px；”实现了每个列表项上方空出5px的空白，这里修改为“margin-right：5px；"表示每个列表项的右方空出5px的空白。
具体效果见下图所示。

图 水平导航实现效果