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

网页设计与开发第4章试卷一、 选择题1.无序列表的HTML代码是( )A.。 B COlli。. Dli。./li答案: B2。有序列表的HTML代码是（ c ）Aulli。.。/ul Bul.。./li Colli.。/ol Dol。.。li3.定义列表的HTML代码是（ ）Adtdl Bdddldddl/dt Ddl/dl答案: D4。下列说法错误的是( ）Adisc是定制表中type的标记 Bleft是定制表中type的标记Ccircle是定制表中type的标记 Dsquare是定制表中type的标记答案: B5。定制表中type标记中的circle表示（ ）A圆点 B圆环 C字母 D方块答案: A6。定制表中type标记中的square表示( )A圆点 B圆环 C字母 D方块答案： D7.定制有序列表表中的序号的起始值的表示法为（)Aol begint=# Bol star=# Col still=# D标记进行样式定义，下面写法正确的是哪个（ ）Aliststyletype:discBtype=discCliststyle：discDstyle-listtype:disc答案： A13。如果列表项前面的符号要换用特定的图片显示，使用CSS如何设置（）Aulliststyletype：images/a.gifBulliststyle-image：images/a.gifC。 ullist-style-type：url(images/a。gif）D ulliststyle-image：url(images/a.gif)答案: D14.定义一个列表样式为项目符号采用默认圆点、列表行高33px、字体大小22px，如何表达（ ）Aullist-style-type：disc;line-height:33px；font-size：22pxBulliststyletype：disc; height:33px；fontsize:22pxCulliststyle-type:disc； height:33px； size：22pxDullist-style：disc; height：33px； size：22px答案： A15.使用CSS样式清除列表项前的圆点，使用的语法是( )Aliststyle:noneBliststyle：no discClist-style：none disc Dlist-style：0答案： A16.对li标记添加什么样式定义实现了将一个垂直排列的导航改为水平导航。Afloat：leftBlist-style:leftCmarginleft：10px Dtextalign：left答案： A17.如何产生带有数字列表符号的列表？Aul Bdl C D 答案: C18。如何产生带有圆点列表符号的列表？A B和B.UL和liC。和pD.答案：B21。要在网页中显示下面的列表.苹果。芒果。橘子下列语句正确的是（）A.ulli苹果li芒果B.ol芒果li橘子C。ul苹果芒果ui橘子D.li苹果li芒果橘子答案：A22.下列HTML标记中，属于成对标记的是（ ). A C. P D。 hr答案：B23.有序列表的项目编号要从大写英文字母开始，type属性值设置为（)Aa B1CADI答案: C24。有序列表的项目编号要从小写罗马数字开始，type属性值设置为（）Aa B1CADi答案: d25.改变有序列表的项目编号起始值的属性是（)AvalueBstartCtypeDbegin答案： B26.li标记里的type属性设置的影响范围是（）A只影响当前列表项B影响了后续列表项C影响了全部列表项D不能影响任何列表项答案： A27。对li标记里的type属性设置的指定，能使用在（）A无序列表中B有序列表中C无序列表和有序列表中D不能进行li标记的type属性设置答案: C28。改变有序列表的单个项目编号值的大小的属性是(）AvalueBstartCtypeDbegin答案： A29.改变有序列表的单个项目编号值的value属性能应用与（)A无序列表中B有序列表中C无序列表和有序列表中D不能应用与有序列表和有序列表中答案： B30。下列说法不正确的是（ ）A嵌套列表可以是无序列表的嵌套B嵌套列表可以是有序列表的嵌套C嵌套列表可以是无序列表和有序列表的混合嵌套D列表不能进行嵌套答案： D二、 填空题1） 无序列表中可用的项目符号包括_、_和_。答案： disc circle square2） 用于取消列表项前默认项目符号的样式定义是_。答案: list-style：none3）使得列表项从默认的垂直排列到水平排列的样式定义是_。答案： float：left4）有序列表标记的type属性可以指定出现在列表项前的项目编号的样式，其取值可以是： 、 、 、 和 五种。答案： 1 a A i I5）使用有序列表标记的 属性后，用户则可改变编号的起始值。该属性值是一个 ，表示从哪一个数字或字母开始编号。答案: start 整数6）商业网站开发中的新闻信息常常采用 来开发。答案: 无序列表7。 设置CSS属性float的值为 _时可取消元素的浮动.答案: none8。为一个列表项设置边框4px，实心边框，列表项字体颜色为#ff9900,列表项背景颜色为fc3，可通过利用CSS设置三、 简答题1. 写出ul、ol、dl三种列表的html结构。答案:Ul列表的结构如下ul li /ul OL列表的结构如下ol /ol DL列表的结构如下dl dt /li /lidl /dd2。简述有序列表标记的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. 制作一个用列表显示的新闻显示板块，要求利用列表方法,适当运用字体、字号间距等的修饰完成新闻列表的定义。答案： 源代码：head.containerwidth: 350px;margin:0 auto;textalign：left；background-color:#EFEFDA;padding: 20px；。first_linefontfamily：黑体；font-size:22px;padding-left:20px； ulliststyle-type: disc；fontsize:22px；line-height:33px；/stylebody 暴雪:商业 艺术与技术的平衡之道/p ul li点选名将 抢礼包千军破首服开启 li快来玩德州扑克 与人斗其乐无穷 li十年一剑真武侠一区开启 抢礼包 li可买卖游戏代码 传魔兽大灾变过审批/li li儿时游戏50年变迁 00后迷动画爱网游/li liipad成为最赚钱的移动游戏平台/li /ul /html2 .导航是一个网站的重要组成元素。利用列表显示导航内容，并适当运用CSS3的字体、字号间距及浮动等修饰属性能够完成垂直导航条及水平导航条的制作。答案：源代码文件meta httpequiv=ContentType content=”text/html; charset=gb2312” /style type=”text/cssbody font-family： Verdana; fontsize： 12px;font-weight：bold； lineheight： 1.5px; a color： #FFF； textdecoration： none; a:hover color: #F00； #menu border： 1px solid #CCC； height:26px； background: 0000ff；#menu ul liststyle: none； margin: 0px; menu ul li float:left; padding： 0px 40px； line-height： 26px； /stylediv id=”menu”ullia href=”公司简介lia href=”产品中心/lilia href=服务中心/lilia href=”关于我们/a/body/html知识点：列表的综合运用参考页: P48学习目标: 5。掌握使用列表制作导航条的方法难度: 3提示一：该题考察知识点:4.5列表的综合运用提示二：采用无序列表实现，主要的操作有去除项目样式符号、调整行间距等。先制作垂直导航，然后使用浮动将垂直导航变化为水平导航。提示三：步骤1：创建文件水平导航。html，定义页面结构，完成内容的基本布局style type=text/css .containerwidth:650px；margin：0 auto；textalign:center；backgroundcolor:FFFFFF；padding：20px;body div class=”container 步骤2:建立内容项的无序列表显示下面的代码在步骤一的基础上，在DIV块内加入了列表定义。 div class=”container”li产品中心/lili服务中心/li /div此时已经能够看出导航的原型了，但是还相对简陋，需要进行美化。可以从以下几个方面考虑调整它的显示样式：第一：无序列表前的默认圆点需清除;第二：各列表项之间的间隔需加大；第三:效果图中的背景色。步骤3：进行格式美化l 清除列表项前的圆点，可以通过设置li的“liststyle：none”即可；l 内容项之间的间隔可以通过增大的行间距，如“lineheight:33px；”l 导航项采用深蓝色背景色根据上面的样式分析，下面的页面代码在样式定义部分定义了不同的样式，并在正文中的对应部分添加了引用。！DOCTYPE html PUBLIC /W3C/DTD XHTML 1。0 Transitional/EN” http:/www.w3.org/TR/xhtml1/DTD/xhtml1transitional。dtdhtmlheadstyle type=text/css” 。containerwidth:200px;margin:0 auto;textalign：center;background-color:FFFFFF;padding： 20px； #navliststyle:none; font-size:22px;lineheight：40px; nav limargin-top:5px; bordertop：4px solid 7BC110； background:be6；/headbody li公司简介产品中心li服务中心/li/ul /div/body页面运行的效果如图4-11所示.在程序42中：l 正文中无序列表“ul id=nav”中的“id=”nav”表示此标记的样式来自style中定义的“#nav”，这种样式引用的方式是通过在样式定义中寻找和标记的id属性值一样的样式名称。l 样式定义中的“#nav limargin-top：5px；”则表示对id为“nav”的标记中包含的li标记使用此样式定义，其作用是在每个导航项的上方留出5px的空白.接下来,将该导航可以更改为水平导航,这只涉及到修改样式的工作。下面是修改后的样式(具体参加4-3。html)。#navliststyle：none; fontsize:22px；line-height:40px; #nav limargin-right：5px；float:left；width:100px;上述样式和页面42中相比，变化在以下几个地方：l 在#nav li中添加float：left属性，使其列表内容全部向左浮动显示，这样就实现了列表的横向显示，这是无序列表水平导航效果实现的关键，同时可以调整每个列表项width宽度值为100px;l 在4-2。html中通过定义“#nav li的“margintop：5px；”实现了每个列表项上方空出5px的空白，这里修改为“margin-right：5px；表示每个列表项的右方空出5px的空白。具体效果见下图所示。图 水平导航实现效果