1、網頁設計與開發第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 的標記B left是定制表中type 的標記C circle是定制表中type 的標記D squar

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

4、。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-typ

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

7、個垂直排列的導航改為水平導航。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: squar

8、eC.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>蘋

9、果 <li> 芒果 <li> 橘子 </ol>C.<ul><ui> 蘋果 <ui> 芒果 <ui> 橘子 </ul>D.<ol type=A><li><li>蘋果 <li> 芒果 <li> 橘子 </ol>答案： A22. 下列 HTML標記中，屬于成對標記的是（）。A <br>B. <ul>C. <P>D. <hr>答案： B23. 有序列表的項目編號要從大寫英文字母開始，typ

10、e 屬性值設置為（）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. 改變有序列表的單個

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

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

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

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

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

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

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

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

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

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

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