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

《网页设计与开发第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．<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．square是定制表中type的标记答案：B5。定制表中type标记中的circle表示（）感谢阅读A．圆点B．圆环C．字母D．方块答案：A6。定制表中type标记中的square表示（）感谢阅读A．圆点B．圆环C．字母D．方块答案: D7。定制有序列表表中的序号的起始值的表示法为（）A．〈olbegint=#>B．〈olstar=＃〉C．<olstill=＃〉D．<olstart=#>答案： D8.以下有关列表的说法中，错误的是（）A．有序列表和无序列表可以互相嵌套。B．指定嵌套列表时,也可以具体指定项目符号或编号样式。感谢阅读C．无序列表应使用UL和LI标记符进行创建。感谢阅读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-type：disc答案: A13.如果列表项前面的符号要换用特定的图片显示，使用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)}精品文档放心下载答案：D14。定义一个列表样式为项目符号采用默认圆点、列表行高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}谢谢阅读答案：A15.使用CSS样式清除列表项前的圆点，使用的语法是（）精品文档放心下载A．list—style：noneB．list-style：nodiscC．list—style：nonediscD．list-style：0答案：A16。对li标记添加什么样式定义实现了将一个垂直排列的导航改为水平导航。谢谢阅读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:squareC.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>苹果<li>芒果〈li>橘子</ol〉精品文档放心下载C.〈ul>〈ui〉苹果<ui〉芒果〈ui>橘子〈/ul>精品文档放心下载D.〈oltype=A〉〈li〉〈li>苹果<li〉芒果<li>橘子〈/ol>谢谢阅读答案:A22。下列HTML标记中，属于成对标记的是（）。感谢阅读A．<br><ul><P〉D。〈hr>答案:B23。有序列表的项目编号要从大写英文字母开始，type属性值设置为（)感谢阅读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.改变有序列表的单个项目编号值的大小的属性是（)谢谢阅读A．valueB．startC．typeD．begin答案：A29.改变有序列表的单个项目编号值的value属性能应用与（）感谢阅读A．无序列表中B．有序列表中C．无序列表和有序列表中D．不能应用与有序列表和有序列表中答案:B30.下列说法不正确的是（)A．嵌套列表可以是无序列表的嵌套B．嵌套列表可以是有序列表的嵌套C．嵌套列表可以是无序列表和有序列表的混合嵌套D．列表不能进行嵌套答案:D二、填空题1）无序列表中可用的项目符号包括______________、______________和______________。谢谢阅读答案：disc circle square2）用于取消列表项前默认项目符号的样式定义是_________________________________.感谢阅读答案: list-style：none3）使得列表项从默认的垂直排列到水平排列的样式定义是_____________________。感谢阅读答案： float：left4)有序列表标记〈ol>的type属性可以指定出现在列表项前的项目编号的样式,其取值可以是:、、、和五种。感谢阅读答案:1aAiI5）使用有序列表标记的属性后，用户则可改变编号的起始值。该属性值是一个，表示从哪一个数字或字母开始编号。感谢阅读答案： start整数6）商业网站开发中的新闻信息常常采用来开发。答案： 无序列表7。设置CSS属性float的值为_______时可取消元素的浮动。感谢阅读答案:none8.为一个列表项设置边框4px，实心边框，列表项字体颜色为#ff9900,列表项背景颜色为#fc3,可通过利用CSS设置〈li>的_______即可。感谢阅读答案:li{border：4pxsolid#ff9900；background：＃fc3｝感谢阅读9。定制表中type标记中的circle表示_______.精品文档放心下载答案： 空心圆点。定制有序列表中序号启始值表示法为_______。答案：<olstart=#〉三、简答题写出ul、ol、dl三种列表的html结构。谢谢阅读答案：Ul列表的结构如下<ul>〈li〉 〈/li〉</ul>OL列表的结构如下〈ol><li> </li>〈/ol>DL列表的结构如下<dl><dt〉 </dt〉<dd〉 </dd〉</dl〉2。简述有序列表标记的type属性.答案：使用有序列表标记的type属性，用户可以指定出现在列表项前的项目编号的样式,其取值以及相对应的编号样式如下：精品文档放心下载“1”：指定项目编号为阿拉伯数字(IE浏览器的默认值是disc);精品文档放心下载“a”：指定项目编号为小写英文字母；“A"：指定项目编号为大写英文字母；“i"：指定项目编号为小写罗马数字;“I”:指定项目编号为大写罗马数字。知识点：有序列表3。举例说明如何改变有序列表标记的type属性的编号起始值。精品文档放心下载答案:通常，在指定列表的编号样式后，浏览器会从“1”、“a"、“A"、“i”或“I”开始自动编号.而在使用有序列表标记的start属性后，用户则可改变编号的起始值。start属性值是一个整数,表示从哪一个数字或字母开始编号。例如，设置start=”3”,则有序列表的列表项编号将从“3”、“c”、“C”、“ⅲ"或“Ⅲ”开始编号.精品文档放心下载4.列表是否能嵌套使用？有什么作用.答案：列表还可以嵌套使用，也就是一个列表中还可以包含有多层子列表.在网页文件中,对于内容层次较多的情况，使用嵌套列表不仅使网页的内容布局更加合理美观，而且使其内容看起来更加清晰、明了。嵌套的列表可以是无序列表的嵌套，也可以是有序列表的嵌套，还可以是无序列表和有序列表的混合嵌套。谢谢阅读知识点:嵌套列表四、实验题制作一个用列表显示的新闻显示板块，要求利用列表方法，适当运用字体、字号间距等的修饰完成新闻列表的定义。感谢阅读答案:源代码：〈!DOCTYPEhtmlPUBLIC"—//W3C//DTDXHTML1。0Transitional//EN"感谢阅读"/TR/xhtml1/DTD/xhtml1—transitional。dtd”〉感谢阅读<html>〈head><styletype="text/css”>。container{width：350px；margin:0auto;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〉〈divclass="container"><pclass="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〉。导航是一个网站的重要组成元素。利用列表显示导航内容,并适当运用CSS3的字体、字号间距及浮动等修饰属性能够完成垂直导航条及水平导航条的制作。谢谢阅读答案：源代码文件〈htmlxmlns="http：///1999/xhtml”〉精品文档放心下载〈head〉〈metahttp—equiv=”Content-Type"content=”text/html；charset=gb2312”/>谢谢阅读<styletype=”text/css”〉body｛font—family：Verdana;font-size：12px；font—weight：bold;line-height：1。5px;｝谢谢阅读｛color:#FFF；text-decoration：none；}a:hover{color：#F00;}感谢阅读＃menu{border：1pxsolid＃CCC；height:26px；background：＃0000ff;}精品文档放心下载#menuul{list-style:none;margin：0px；｝感谢阅读#menuulli{float:left;padding:0px40px; line-height：26px;｝谢谢阅读〈/style>〈/head〉〈body〉〈divid=”menu"><ul〉〈li〉〈ahref=""〉公司简介</a〉</li〉精品文档放心下载〈li>〈ahref=""〉产品中心</a〉</li〉感谢阅读〈li><ahref=”"〉服务中心〈/a></li〉谢谢阅读〈li>〈ahref=""〉在线订单</a>〈/li〉精品文档放心下载<li><ahref="”〉关于我们</a>〈/li〉谢谢阅读</ul>〈/div〉〈/body>〈/html〉知识点：列表的综合运用参考页：P48学习目标：5.掌握使用列表制作导航条的方法难度:3提示一：该题考察知识点：4.5列表的综合运用提示二：采用无序列表实现，主要的操作有去除项目样式符号、调整行间距等。先制作垂直导航，然后使用浮动将垂直导航变化为水平导航。谢谢阅读提示三：步骤1:创建文件水平导航。html，定义页面结构，完成内容的基本布局谢谢阅读<！DOCTYPEhtmlPUBLIC"—//W3C//DTDXHTML1.0Transitional//EN"感谢阅读”/TR/xhtml1/DTD/xhtml1-transitional。dtd”〉精品文档放心下载<html〉〈head>〈styletype="text/css"〉。container｛width:650px;margin:0auto；text-align:center；谢谢阅读background—color:#FFFFFF；padding:20px；}精品文档放心下载</style>〈/head>〈body>〈divclass="container”><!——在此内部添加内容——></div〉〈/body></html>步骤2：建立内容项的无序列表显示下面的代码在步骤一的基础上，在DIV块内加入了列表定义。精品文档放心下载<divclass="container”〉〈ul><li〉公司简介</li>〈li>产品中心</li〉<li>服务中心〈/li〉〈/ul></div〉此时已经能够看出导航的原型了，但是还相对简陋,需要进行美化。可以从以下几个方面考虑调整它的显示样式：谢谢阅读第一:无序列表前的默认圆点需清除；第二：各列表项之间的间隔需加大；第三：效果图中的背景色。步骤3：进行格式美化清除列表项前的圆点，可以通过设置〈li〉的“list-style:none”即可；精品文档放心下载内容项之间的间隔可以通过增大〈li>的行间距，如“line-height:33px；”感谢阅读导航项采用深蓝色背景色根据上面的样式分析，下面的页面代码在样式定义部分定义了不同的样式,并在正文中的对应部分添加了引用.精品文档放心下载<！DOCTYPEhtmlPUBLIC”-//W3C//DTDXHTML1.0Transitional//EN"精品文档放心下载"http：///TR/xhtml1/DTD/xhtml1-transitional。dtd”〉谢谢阅读<html>〈head><styletype=”text/css”〉.container｛width：200px；margin：0auto；text—align：center;谢谢阅读background-color:＃FFFFFF；padding：20px;｝谢谢阅读#nav｛list-style:none;font-size：22px；line—height：40px；}感谢阅读＃navli｛margin-top:5px;border—top：4pxsolid#7BC110；background：谢谢阅读＃be6；｝</style></head><body