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

《网页设计与开发第4章试卷及答案.pdf》由会员分享，可在线阅读，更多相关《网页设计与开发第4章试卷及答案.pdf（15页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、 网页设计与开发第4章试卷 一、选择题 1.无序列表的 HTML 代码是（）Ali ui.。/li B.Ol D li ol./li 答案:B 2.有序列表的 HTML 代码是（c ）A ul li.B liul。./li C ol。.ol。.3.定义列表的 HTML 代码是（）Adl/dl B dddt/dl 答案:D 4.下列说法错误的是(）Adisc 是定制表中 type 的标记 Bleft 是定制表中 type 的标记 Ccircle 是定制表中 type 的标记 Dsquare 是定制表中 type 的标记 答案：B 5。定制表中 type 标记中的 circle 表示(）A圆点 B

2、圆环 C字母 D方块 答案:A 6.定制表中 type 标记中的 square 表示（）A圆点 B圆环 C字母 D方块 答案:D 7.定制有序列表表中的序号的起始值的表示法为()A B ol star=Col still=#D ol start=答案：D 8。以下有关列表的说法中,错误的是（)A有序列表和无序列表可以互相嵌套。B指定嵌套列表时，也可以具体指定项目符号或编号样式.C无序列表应使用 UL 和 LI 标记符进行创建。D在创建列表时，LI 标记符的结束标记符不可省略。答案：D 9.在 HTML 网页中,用来定义有序列表的元素包括（）Aol Bul Cli Ddl 答案：A 10.有序列

3、表的项目编号要从小写字母 a 开始，type 属性值设置为（）Aa B1 CA DI 答案：A 11。有序列表的项目编号要从大写罗马数字开始，type 属性值设置为（）Aa B1 CA DI 答案：A 12。在 CSS 中,对ul标记进行样式定义，下面写法正确的是哪个（)Alist-styletype:disc Btype=disc Cliststyle:disc Dstyle-listtype：disc 答案:A 13.如果列表项前面的符号要换用特定的图片显示，使用 CSS 如何设置（）Aullist-styletype：images/a。gif Bulliststyleimage:imag

4、es/a.gif C。ullist-style-type：url（images/a。gif)D ulliststyleimage:url(images/a.gif)答案：D 14。定义一个列表样式为项目符号采用默认圆点、列表行高 33px、字体大小 22px，如何表达（）Aulliststyle-type：disc;lineheight：33px;fontsize：22px Bulliststyletype:disc;height：33px；font-size：22px Culliststyletype：disc；height：33px;size：22px Dullist-style：disc

5、；height：33px；size：22px 答案：A 15。使用 CSS 样式清除列表项前的圆点，使用的语法是（）Alist-style：none Bliststyle：no disc Cliststyle:none disc Dliststyle:0 答案：A 16。对 li 标记添加什么样式定义实现了将一个垂直排列的导航改为水平导航。Afloat：left Blist-style：left Cmargin-left：10px Dtext-align：left 答案：A 17。如何产生带有数字列表符号的列表？A C ol D list 答案:C 18。如何产生带有圆点列表符号的列表？A d

6、l Blist C ol D ul 答案：B 19.如何产生带有正方形的项目的列表？A.list-type：square B.liststyletype:square C.type:square D。type:2 答案：B 20.我们想要将页面中的文本采用项目符号的形式予以显示，采用哪些标记组合可以达到我们的要求?A。和hr B.UL和li C.BR和p D.LI和 答案：B 21。要在网页中显示下面的列表。苹果.芒果.橘子 下列语句正确的是（）A.ul苹果li芒果橘子/ul B。olli苹果芒果li橘子 C.芒果ui橘子/ul D.li苹果橘子/ol 答案：A 22。下列 HTML 标记中,

7、属于成对标记的是（)。A br B.C.D。hr 答案：B 23。有序列表的项目编号要从大写英文字母开始，type 属性值设置为（）Aa B1 CA DI 答案：C 24.有序列表的项目编号要从小写罗马数字开始，type 属性值设置为(）Aa B1 CA Di 答案:d 25.改变有序列表的项目编号起始值的属性是(）Avalue Bstart Ctype Dbegin 答案:B 26。li 标记里的 type 属性设置的影响范围是（）A只影响当前列表项 B影响了后续列表项 C影响了全部列表项 D不能影响任何列表项 答案:A 27。对 li 标记里的 type 属性设置的指定，能使用在（）A无序

8、列表中 B有序列表中 C无序列表和有序列表中 D不能进行 li 标记的 type 属性设置 答案:C 28.改变有序列表的单个项目编号值的大小的属性是（)Avalue Bstart Ctype Dbegin 答案:A 29。改变有序列表的单个项目编号值的 value 属性能应用与(）A无序列表中 B有序列表中 C无序列表和有序列表中 D不能应用与有序列表和有序列表中 答案:B 30.下列说法不正确的是（）A嵌套列表可以是无序列表的嵌套 B嵌套列表可以是有序列表的嵌套 C嵌套列表可以是无序列表和有序列表的混合嵌套 D列表不能进行嵌套 答案:D 二、填空题 1）无序列表中可用的项目符号包括_、_和

9、_。答案：disc circle square 2）用于取消列表项前默认项目符号的样式定义是_.答案：list-style：none 3)使得列表项从默认的垂直排列到水平排列的样式定义是_.答案:float：left 4）有序列表标记ol的 type 属性可以指定出现在列表项前的项目编号的样式，其取值可以是：、和 五种。答案:1 a A i I 5)使用有序列表标记的 属性后，用户则可改变编号的起始值.该属性值是一个 ，表示从哪一个数字或字母开始编号。答案：start 整数 6）商业网站开发中的新闻信息常常采用 来开发。答案:无序列表 7。设置 CSS 属性 float 的值为 _时可取消元素

10、的浮动。答案：none 8.为一个列表项设置边框 4px,实心边框，列表项字体颜色为#ff9900，列表项背景颜色为#fc3，可通过利用 CSS 设置 三、简答题 1。写出 ul、ol、dl 三种列表的 html 结构。答案：Ul 列表的结构如下 ul /ul OL 列表的结构如下 /ol DL 列表的结构如下 dt dd /dd 2.简述有序列表标记的 type 属性.答案：使用有序列表标记的 type 属性，用户可以指定出现在列表项前的项目编号的样式，其取值以及相对应的编号样式如下：1.“1”：指定项目编号为阿拉伯数字(IE 浏览器的默认值是 disc）；2.“a”：指定项目编号为小写英文

11、字母；3.“A”：指定项目编号为大写英文字母；4.“i”：指定项目编号为小写罗马数字;5.“I”：指定项目编号为大写罗马数字.知识点：有序列表 3.举例说明如何改变有序列表标记的 type 属性的编号起始值。答案：通常，在指定列表的编号样式后，浏览器会从“1、“a”、“A、“i”或“I开始自动编号。而在使用有序列表标记的 start 属性后，用户则可改变编号的起始值。start 属性值是一个整数,表示从哪一个数字或字母开始编号。例如，设置 start=”3，则有序列表的列表项编号将从“3”、“c、“C”、“”或“”开始编号。4.列表是否能嵌套使用？有什么作用。答案：列表还可以嵌套使用，也就是一

12、个列表中还可以包含有多层子列表。在网页文件中，对于内容层次较多的情况，使用嵌套列表不仅使网页的内容布局更加合理美观，而且使其内容看起来更加清晰、明了。嵌套的列表可以是无序列表的嵌套,也可以是有序列表的嵌套，还可以是无序列表和有序列表的混合嵌套.知识点:嵌套列表 四、实验题 1.制作一个用列表显示的新闻显示板块，要求利用列表方法，适当运用字体、字号间距等的修饰完成新闻列表的定义。答案：源代码：!DOCTYPE html PUBLIC/W3C/DTD XHTML 1.0 Transitional/EN http：/www。w3。org/TR/xhtml1/DTD/xhtml1-transition

13、al.dtd”head style type=text/css .containerwidth:350px;margin:0 auto；text-align:left;backgroundcolor:#EFEFDA;padding:20px;.first_linefontfamily：黑体;fontsize:22px；padding-left：20px;ulliststyletype:disc;font-size：22px;line-height:33px；div class=container”p class=”first_line暴雪:商业 艺术与技术的平衡之道 ul li点选名将 抢礼包

14、千军破首服开启 li战国新游王者天下开启 抢礼包/li li快来玩德州扑克 与人斗其乐无穷 li 十年一剑真武侠一区开启 抢礼包/li li 可买卖游戏代码 传魔兽大灾变过审批/li li儿时游戏 50 年变迁 00 后迷动画爱网游/li li监狱强迫犯人打网游 徐州禁少年进网吧 liipad成为最赚钱的移动游戏平台 /html 2 。导航是一个网站的重要组成元素。利用列表显示导航内容，并适当运用 CSS3 的字体、字号间距及浮动等修饰属性能够完成垂直导航条及水平导航条的制作。答案：源代码文件 html xmlns=http：/www.w3。org/1999/xhtml”head div id

15、=menu”ul 公司简介/a/li a href=”产品中心/li lia href=”服务中心/a li在线订单 a href=”关于我们/li /ul 知识点：列表的综合运用 参考页:P48 学习目标：5.掌握使用列表制作导航条的方法 难度：3 提示一：该题考察知识点:4.5 列表的综合运用 提示二：采用无序列表实现,主要的操作有去除项目样式符号、调整行间距等。先制作垂直导航,然后使用浮动将垂直导航变化为水平导航。提示三：步骤 1：创建文件水平导航。html，定义页面结构，完成内容的基本布局 。containerwidth：650px;margin：0 auto;text-align：c

16、enter;background-color:FFFFFF；padding：20px；/style/head body div class=container”!在此内部添加内容-/div/body /html 步骤 2:建立内容项的无序列表显示 下面的代码在步骤一的基础上，在 DIV 块内加入了列表定义。li公司简介/li li产品中心/li li服务中心/li /ul /div 此时已经能够看出导航的原型了，但是还相对简陋，需要进行美化.可以从以下几个方面考虑调整它的显示样式：第一：无序列表前的默认圆点需清除；第二：各列表项之间的间隔需加大；第三：效果图中的背景色。步骤 3：进行格式美化

17、清除列表项前的圆点，可以通过设置的“list-style:none”即可;内容项之间的间隔可以通过增大li的行间距，如“lineheight:33px；导航项采用深蓝色背景色 根据上面的样式分析，下面的页面代码在样式定义部分定义了不同的样式,并在正文中的对应部分添加了引用.!DOCTYPE html PUBLIC-/W3C/DTD XHTML 1.0 Transitional/EN”http：/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional。dtd 。containerwidth：200px;margin：0 auto；textalign:center

18、;background-color：#FFFFFF;padding:20px；nav list style：none;fontsize：22px;line-height：40px;nav limargin-top：5px;bordertop:4px solid#7BC110；background:#be6；/style/head div class=container ul id=nav”li 公司简介 li 产品中心 服务中心 /ul /div/body/html 页面运行的效果如图 411 所示.在程序 42 中：正文中无序列表“ul id=nav”中的“id=nav”表示此标记的样式来自

19、 style 中定义的“nav，这种样式引用的方式是通过在样式定义中寻找和标记的 id 属性值一样的样式名称。样式定义中的“nav limargintop:5px；”则表示对 id 为“nav”的标记中包含的li标记使用此样式定义，其作用是在每个导航项的上方留出 5px 的空白。接下来，将该导航可以更改为水平导航,这只涉及到修改样式的工作。下面是修改后的样式（具体参加 43。html）.navliststyle：none；fontsize：22px；line-height:40px；#nav limargin-right:5px;float:left;width:100px;上述样式和页面 4-2 中相比，变化在以下几个地方：在#nav li 中添加 float:left 属性，使其列表内容全部向左浮动显示，这样就实现了列表的横向显示，这是无序列表水平导航效果实现的关键，同时可以调整每个列表项width 宽度值为 100px;在 42。html 中通过定义“#nav li”的“margintop:5px；实现了每个列表项上方空出 5px 的空白，这里修改为“marginright：5px；”表示每个列表项的右方空出 5px 的空白。具体效果见下图所示。图 水平导航实现效果