網(wǎng)頁設(shè)計與開發(fā)第4章試卷及答案

1、網(wǎng)頁設(shè)計與開發(fā)第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 的標(biāo)記B left是定制表中type 的標(biāo)記C circle是定制表中type 的標(biāo)記D squar

3、e 是定制表中type 的標(biāo)記答案:B5. 定制表中type 標(biāo)記中的circle表示（）A圓點B圓環(huán)C字母D方塊答案:A6. 定制表中type 標(biāo)記中的square 表示（）A圓點B圓環(huán)C字母D方塊答案: D7. 定制有序列表表中的序號的起始值的表示法為（）A <ol begint=#>B <ol star=#>C <ol still=#>D <ol start=#>答案: D8. 以下有關(guān)列表的說法中，錯誤的是（）A有序列表和無序列表可以互相嵌套。B指定嵌套列表時，也可以具體指定項目符號或編號樣式。C無序列表應(yīng)使用UL 和 LI標(biāo)記符進(jìn)行創(chuàng)建

4、。D在創(chuàng)建列表時，LI標(biāo)記符的結(jié)束標(biāo)記符不可省略。答案: D9. 在 HTML網(wǎng)頁中，用來定義有序列表的元素包括（）A olB ulC liD dl答案: A10. 有序列表的項目編號要從小寫字母a 開始， type 屬性值設(shè)置為（）A aB 1C AD I答案: A11. 有序列表的項目編號要從大寫羅馬數(shù)字開始，type 屬性值設(shè)置為（）A aB 1C AD I答案: A12. 在 CSS中，對 <ul> 標(biāo)記進(jìn)行樣式定義，下面寫法正確的是哪個（）A list-style-type:discB type=discC list-style： discD style-list-typ

5、e： disc答案: A13. 如果列表項前面的符號要換用特定的圖片顯示，使用CSS如何設(shè)置（）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. 定義一個列表樣式為項目符號采用默認(rèn)圓點、列表行高33px、字體大小22px，如何表達(dá)（）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 標(biāo)記添加什么樣式定義實現(xiàn)了將一

7、個垂直排列的導(dǎo)航改為水平導(dǎo)航。A float：leftB list-style： leftC margin-left： 10pxD text-align： left答案:A17. 如何產(chǎn)生帶有數(shù)字列表符號的列表？A <ul>B <dl>C <ol>D <list>答案: C18. 如何產(chǎn)生帶有圓點列表符號的列表？A <dl>B <list>C <ol>D <ul>答案: B19. 如何產(chǎn)生帶有正方形的項目的列表？A. list-type: squareB.list-style-type: squar

8、eC.type: squareD.type: 2答案 :B20. 我們想要將頁面中的文本采用項目符號的形式予以顯示，采用哪些標(biāo)記組合可以達(dá)到我們的要求？A.<P>和 <hr>B.<UL>和 <li>C.<BR>和 <p>D.<LI> 和 <A>答案： B21. 要在網(wǎng)頁中顯示下面的列表. 蘋果. 芒果. 橘子下列語句正確的是（）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標(biāo)記中，屬于成對標(biāo)記的是（）。A <br>B. <ul>C. <P>D. <hr>答案： B23. 有序列表的項目編號要從大寫英文字母開始，typ

10、e 屬性值設(shè)置為（）A aB 1C AD I答案: C24. 有序列表的項目編號要從小寫羅馬數(shù)字開始，type 屬性值設(shè)置為（）A aB 1C AD i答案 : d25. 改變有序列表的項目編號起始值的屬性是（）A valueB startC typeD begin答案: B26.li標(biāo)記里的type 屬性設(shè)置的影響范圍是（）A只影響當(dāng)前列表項B影響了后續(xù)列表項C影響了全部列表項D不能影響任何列表項答案: A27. 對 li 標(biāo)記里的 type 屬性設(shè)置的指定，能使用在（）A無序列表中B有序列表中C無序列表和有序列表中D不能進(jìn)行l(wèi)i標(biāo)記的 type 屬性設(shè)置答案: C28. 改變有序列表的單個

11、項目編號值的大小的屬性是（）A valueB startC typeD begin答案:A29. 改變有序列表的單個項目編號值的value 屬性能應(yīng)用與（）A無序列表中B有序列表中C無序列表和有序列表中D不能應(yīng)用與有序列表和有序列表中答案:B30. 下列說法不正確的是（）A嵌套列表可以是無序列表的嵌套B嵌套列表可以是有序列表的嵌套C嵌套列表可以是無序列表和有序列表的混合嵌套D列表不能進(jìn)行嵌套答案:D二、 填空題1） 無序列表中可用的項目符號包括_ 、_和 _。答案 :disc circle square2） 用于取消列表項前默認(rèn)項目符號的樣式定義是_ 。答案 : list-style： non

12、e3）使得列表項從默認(rèn)的垂直排列到水平排列的樣式定義是_ 。答案 : float：left4）有序列表標(biāo)記 <ol> 的 type 屬性可以指定出現(xiàn)在列表項前的項目編號的樣式，其取值可以是：、和五種。答案 : 1 a A i I5）使用有序列表標(biāo)記的屬性后，用戶則可改變編號的起始值。該屬性值是一個，表示從哪一個數(shù)字或字母開始編號。答案 : start整數(shù)6) 商業(yè)網(wǎng)站開發(fā)中的新聞信息常常采用來開發(fā)。答案 :無序列表7.設(shè)置 CSS屬性 float的值為 _ 時可取消元素的浮動。答案 :none8. 為一個列表項設(shè)置邊框4px，實心邊框，列表項字體顏色為#fc3 ，可通過利用CSS設(shè)

13、置 <li> 的 _即可。#ff9900,列表項背景顏色為答案 : liborder:4px solid #ff9900;background:#fc39. 定制表中type 標(biāo)記中的circle表示 _。答案 :空心圓點10 . 定制有序列表中序號啟始值表示法為_。答案 : <ol start=#>三、 簡答題1. 寫出 ul 、 ol 、 dl 三種列表的 html 結(jié)構(gòu)。答案： Ul 列表的結(jié)構(gòu)如下<ul><li></li></ul>OL列表的結(jié)構(gòu)如下<ol><li> </li>&

14、lt;/ol>DL 列表的結(jié)構(gòu)如下<dl><dt></dt><dd></dd></dl>2. 簡述有序列表標(biāo)記的 type 屬性。答案：使用有序列表標(biāo)記的type 屬性，用戶可以指定出現(xiàn)在列表項前的項目編號的樣式，其取值以及相對應(yīng)的編號樣式如下：1.“1”：指定項目編號為阿拉伯?dāng)?shù)字（IE 瀏覽器的默認(rèn)值是disc ）；2. “a”：指定項目編號為小寫英文字母；3. “A”：指定項目編號為大寫英文字母；4. “i ”：指定項目編號為小寫羅馬數(shù)字；5. “I ”：指定項目編號為大寫羅馬數(shù)字。知識點：有序列表3. 舉例說明

15、如何改變有序列表標(biāo)記的type 屬性的編號起始值。答案：通常，在指定列表的編號樣式后，瀏覽器會從“1”、“ a”、“ A”、“ i ”或“ I ”開始自動編號。而在使用有序列表標(biāo)記的start屬性后，用戶則可改變編號的起始值。start屬性值是一個整數(shù)，表示從哪一個數(shù)字或字母開始編號。例如，設(shè)置start="3"，則有序列表的列表項編號將從“3”、“c”、“ C”、“”或“”開始編號。4. 列表是否能嵌套使用？有什么作用。答案：列表還可以嵌套使用，也就是一個列表中還可以包含有多層子列表。在網(wǎng)頁文件中，對于內(nèi)容層次較多的情況， 使用嵌套列表不僅使網(wǎng)頁的內(nèi)容布局更加合理美觀，

16、而且使其內(nèi)容看起來更加清晰、 明了。嵌套的列表可以是無序列表的嵌套， 也可以是有序列表的嵌套，還可以是無序列表和有序列表的混合嵌套。知識點：嵌套列表四、 實驗題1. 制作一個用列表顯示的新聞顯示板塊， 要求利用列表方法， 適當(dāng)運用字體、 字號間距等的修飾完成新聞列表的定義。答案 :源代碼：<!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">暴雪：商業(yè)藝

18、術(shù)與技術(shù)的平衡之道 </p><ul><li>點選名將 搶禮包千軍破首服開啟 </li><li>戰(zhàn)國新游王者天下開啟搶禮包 </li><li>快來玩德州撲克與人斗其樂無窮 </li><li>十年一劍真武俠一區(qū)開啟搶禮包 </li><li>可買賣游戲代碼傳魔獸大災(zāi)變過審批 </li><li>兒時游戲 50 年變遷 00 后迷動畫愛網(wǎng)游 </li><li>監(jiān)獄強迫犯人打網(wǎng)游徐州禁少年進(jìn)網(wǎng)吧 </li><l

19、i>ipad成為最賺錢的移動游戲平臺 </li></ul></div></body></html>2 .導(dǎo)航是一個網(wǎng)站的重要組成元素。利用列表顯示導(dǎo)航內(nèi)容，并適當(dāng)運用CSS3的字體、字號間距及浮動等修飾屬性能夠完成垂直導(dǎo)航條及水平導(dǎo)航條的制作。答案：源代碼文件<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="">產(chǎn)品中心</a></li><li><a href="">服務(wù)中心</a></li><li><a hre

22、f="">在線訂單</a></li><li><a href="">關(guān)于我們</a></li></ul></div></body></html>知識點：列表的綜合運用參考頁 : P48學(xué)習(xí)目標(biāo) :5.掌握使用列表制作導(dǎo)航條的方法難度:3提示一： 該題考察知識點：4.5 列表的綜合運用提示二： 采用無序列表實現(xiàn)，主要的操作有去除項目樣式符號、調(diào)整行間距等。先制作垂直導(dǎo)航，然后使用浮動將垂直導(dǎo)航變化為水平導(dǎo)航。提示三： 步驟 1：創(chuàng)建文

23、件水平導(dǎo)航.html ，定義頁面結(jié)構(gòu)，完成內(nèi)容的基本布局<!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"><!-在此內(nèi)部添加內(nèi)容-></div></body></html>步驟 2：建立內(nèi)容項的無序列表顯示下面的代碼在步驟一的基礎(chǔ)上，在DIV 塊內(nèi)加入了列表定義。<div class="container"><ul><li>公司簡介 </li><li>產(chǎn)品中心 </li><li>服務(wù)中心 </li></ul></div>此時已經(jīng)能夠看出導(dǎo)航的原型了

25、，但是還相對簡陋，需要進(jìn)行美化。 可以從以下幾個方面考慮調(diào)整它的顯示樣式：第一：無序列表前的默認(rèn)圓點需清除；第二：各列表項之間的間隔需加大；第三：效果圖中的背景色。步驟 3：進(jìn)行格式美化清除列表項前的圓點，可以通過設(shè)置<li> 的“ list-style:none”即可；內(nèi)容項之間的間隔可以通過增大<li> 的行間距，如“l(fā)ine-height:33px;”導(dǎo)航項采用深藍(lán)色背景色根據(jù)上面的樣式分析， 下面的頁面代碼在樣式定義部分定義了不同的樣式， 并在正文中的對應(yīng)部分添加了引用。<!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><