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

《網(wǎng)頁設(shè)計(jì)與開發(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．<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.下列說法錯(cuò)誤的是（)A．disc是定制表中type的標(biāo)記B．left是定制表中type的標(biāo)記C．circle是定制表中type的標(biāo)記D．square是定制表中type的標(biāo)記答案：B5。定制表中type標(biāo)記中的circle表示（）感謝閱讀A．圓點(diǎn)B．圓環(huán)C．字母D．方塊答案：A6。定制表中type標(biāo)記中的square表示（）感謝閱讀A．圓點(diǎn)B．圓環(huán)C．字母D．方塊答案: D7。定制有序列表表中的序號(hào)的起始值的表示法為（）A．〈olbegint=#>B．〈olstar=＃〉C．<olstill=?！礑．<olstart=#>答案： D8.以下有關(guān)列表的說法中，錯(cuò)誤的是（）A．有序列表和無序列表可以互相嵌套。B．指定嵌套列表時(shí),也可以具體指定項(xiàng)目符號(hào)或編號(hào)樣式。感謝閱讀C．無序列表應(yīng)使用UL和LI標(biāo)記符進(jìn)行創(chuàng)建。感謝閱讀D．在創(chuàng)建列表時(shí)，LI標(biāo)記符的結(jié)束標(biāo)記符不可省略.感謝閱讀答案: D9.在HTML網(wǎng)頁中,用來定義有序列表的元素包括（）謝謝閱讀A．olB．ulC．liD．dl答案: A10.有序列表的項(xiàng)目編號(hào)要從小寫字母a開始，type屬性值設(shè)置為(）謝謝閱讀A．a(chǎn)B．1C．AD．I答案: A11。有序列表的項(xiàng)目編號(hào)要從大寫羅馬數(shù)字開始，type屬性值設(shè)置為(）謝謝閱讀A．a(chǎn)B．1C．AD．I答案: A12.在CSS中，對(duì)<ul>標(biāo)記進(jìn)行樣式定義，下面寫法正確的是哪個(gè)(）感謝閱讀A．list-style—type:discB．type=discC．list—style:discD．style-list-type：disc答案: A13.如果列表項(xiàng)前面的符號(hào)要換用特定的圖片顯示，使用CSS如何設(shè)置（）精品文檔放心下載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。定義一個(gè)列表樣式為項(xiàng)目符號(hào)采用默認(rèn)圓點(diǎn)、列表行高33px、字體大小22px，如何表達(dá)（)謝謝閱讀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樣式清除列表項(xiàng)前的圓點(diǎn)，使用的語法是（）精品文檔放心下載A．list—style：noneB．list-style：nodiscC．list—style：nonediscD．list-style：0答案：A16。對(duì)li標(biāo)記添加什么樣式定義實(shí)現(xiàn)了將一個(gè)垂直排列的導(dǎo)航改為水平導(dǎo)航。謝謝閱讀A．float：leftB．list-style：leftC．margin-left:10pxD．text-align：left答案:A17。如何產(chǎn)生帶有數(shù)字列表符號(hào)的列表？A．〈ul>B．<dl〉C．<ol>D．〈list>答案: C18.如何產(chǎn)生帶有圓點(diǎn)列表符號(hào)的列表?A．<dl〉B．<list>C．<ol〉D．〈ul>答案: B19.如何產(chǎn)生帶有正方形的項(xiàng)目的列表？A。list—type：squareB.list—style—type:squareC.type:squareD。type:2答案：B20.我們想要將頁面中的文本采用項(xiàng)目符號(hào)的形式予以顯示，采用哪些標(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>蘋果<li>芒果〈li>橘子</ol〉精品文檔放心下載C.〈ul>〈ui〉蘋果<ui〉芒果〈ui>橘子〈/ul>精品文檔放心下載D.〈oltype=A〉〈li〉〈li>蘋果<li〉芒果<li>橘子〈/ol>謝謝閱讀答案:A22。下列HTML標(biāo)記中，屬于成對(duì)標(biāo)記的是（）。感謝閱讀A．<br><ul><P〉D?！磆r>答案:B23。有序列表的項(xiàng)目編號(hào)要從大寫英文字母開始，type屬性值設(shè)置為（)感謝閱讀A．a(chǎn)B．1C．AD．I答案： C24.有序列表的項(xiàng)目編號(hào)要從小寫羅馬數(shù)字開始，type屬性值設(shè)置為（）感謝閱讀A．a(chǎn)B．1C．AD．i答案: d25。改變有序列表的項(xiàng)目編號(hào)起始值的屬性是(）A．valueB．startC．typeD．begin答案: B26.li標(biāo)記里的type屬性設(shè)置的影響范圍是（)謝謝閱讀A．只影響當(dāng)前列表項(xiàng)B．影響了后續(xù)列表項(xiàng)C．影響了全部列表項(xiàng)D．不能影響任何列表項(xiàng)答案: A27.對(duì)li標(biāo)記里的type屬性設(shè)置的指定，能使用在（）謝謝閱讀A．無序列表中B．有序列表中C．無序列表和有序列表中D．不能進(jìn)行l(wèi)i標(biāo)記的type屬性設(shè)置答案： C28.改變有序列表的單個(gè)項(xiàng)目編號(hào)值的大小的屬性是（)謝謝閱讀A．valueB．startC．typeD．begin答案：A29.改變有序列表的單個(gè)項(xiàng)目編號(hào)值的value屬性能應(yīng)用與（）感謝閱讀A．無序列表中B．有序列表中C．無序列表和有序列表中D．不能應(yīng)用與有序列表和有序列表中答案:B30.下列說法不正確的是（)A．嵌套列表可以是無序列表的嵌套B．嵌套列表可以是有序列表的嵌套C．嵌套列表可以是無序列表和有序列表的混合嵌套D．列表不能進(jìn)行嵌套答案:D二、填空題1）無序列表中可用的項(xiàng)目符號(hào)包括______________、______________和______________。謝謝閱讀答案：disc circle square2）用于取消列表項(xiàng)前默認(rèn)項(xiàng)目符號(hào)的樣式定義是_________________________________.感謝閱讀答案: list-style：none3）使得列表項(xiàng)從默認(rèn)的垂直排列到水平排列的樣式定義是_____________________。感謝閱讀答案： float：left4)有序列表標(biāo)記〈ol>的type屬性可以指定出現(xiàn)在列表項(xiàng)前的項(xiàng)目編號(hào)的樣式,其取值可以是:、、、和五種。感謝閱讀答案:1aAiI5）使用有序列表標(biāo)記的屬性后，用戶則可改變編號(hào)的起始值。該屬性值是一個(gè)，表示從哪一個(gè)數(shù)字或字母開始編號(hào)。感謝閱讀答案： start整數(shù)6）商業(yè)網(wǎng)站開發(fā)中的新聞信息常常采用來開發(fā)。答案： 無序列表7。設(shè)置CSS屬性float的值為_______時(shí)可取消元素的浮動(dòng)。感謝閱讀答案:none8.為一個(gè)列表項(xiàng)設(shè)置邊框4px，實(shí)心邊框，列表項(xiàng)字體顏色為#ff9900,列表項(xiàng)背景顏色為#fc3,可通過利用CSS設(shè)置〈li>的_______即可。感謝閱讀答案:li{border：4pxsolid#ff9900；background：＃fc3｝感謝閱讀9。定制表中type標(biāo)記中的circle表示_______.精品文檔放心下載答案： 空心圓點(diǎn)。定制有序列表中序號(hào)啟始值表示法為_______。答案：<olstart=#〉三、簡答題寫出ul、ol、dl三種列表的html結(jié)構(gòu)。謝謝閱讀答案：Ul列表的結(jié)構(gòu)如下<ul>〈li〉 〈/li〉</ul>OL列表的結(jié)構(gòu)如下〈ol><li> </li>〈/ol>DL列表的結(jié)構(gòu)如下<dl><dt〉 </dt〉<dd〉 </dd〉</dl〉2。簡述有序列表標(biāo)記的type屬性.答案：使用有序列表標(biāo)記的type屬性，用戶可以指定出現(xiàn)在列表項(xiàng)前的項(xiàng)目編號(hào)的樣式,其取值以及相對(duì)應(yīng)的編號(hào)樣式如下：精品文檔放心下載“1”：指定項(xiàng)目編號(hào)為阿拉伯?dāng)?shù)字(IE瀏覽器的默認(rèn)值是disc);精品文檔放心下載“a”：指定項(xiàng)目編號(hào)為小寫英文字母；“A"：指定項(xiàng)目編號(hào)為大寫英文字母；“i"：指定項(xiàng)目編號(hào)為小寫羅馬數(shù)字;“I”:指定項(xiàng)目編號(hào)為大寫羅馬數(shù)字。知識(shí)點(diǎn)：有序列表3。舉例說明如何改變有序列表標(biāo)記的type屬性的編號(hào)起始值。精品文檔放心下載答案:通常，在指定列表的編號(hào)樣式后，瀏覽器會(huì)從“1”、“a"、“A"、“i”或“I”開始自動(dòng)編號(hào).而在使用有序列表標(biāo)記的start屬性后，用戶則可改變編號(hào)的起始值。start屬性值是一個(gè)整數(shù),表示從哪一個(gè)數(shù)字或字母開始編號(hào)。例如，設(shè)置start=”3”,則有序列表的列表項(xiàng)編號(hào)將從“3”、“c”、“C”、“ⅲ"或“Ⅲ”開始編號(hào).精品文檔放心下載4.列表是否能嵌套使用？有什么作用.答案：列表還可以嵌套使用，也就是一個(gè)列表中還可以包含有多層子列表.在網(wǎng)頁文件中,對(duì)于內(nèi)容層次較多的情況，使用嵌套列表不僅使網(wǎng)頁的內(nèi)容布局更加合理美觀，而且使其內(nèi)容看起來更加清晰、明了。嵌套的列表可以是無序列表的嵌套，也可以是有序列表的嵌套，還可以是無序列表和有序列表的混合嵌套。謝謝閱讀知識(shí)點(diǎn):嵌套列表四、實(shí)驗(yàn)題制作一個(gè)用列表顯示的新聞顯示板塊，要求利用列表方法，適當(dāng)運(yùn)用字體、字號(hào)間距等的修飾完成新聞列表的定義。感謝閱讀答案:源代碼：〈!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"〉暴雪：商業(yè)藝術(shù)與技術(shù)的平衡之道〈/p〉謝謝閱讀<ul〉〈li〉點(diǎn)選名將搶禮包《千軍破》首服開啟〈/li〉〈li>戰(zhàn)國新游《王者天下》開啟搶禮包</li〉〈li>快來玩《德州撲克》與人斗其樂無窮</li>〈li>《十年一劍》真武俠一區(qū)開啟搶禮包</li〉<li〉可買賣游戲代碼傳魔獸大災(zāi)變過審批〈/li><li〉兒時(shí)游戲50年變遷00后迷動(dòng)畫愛網(wǎng)游〈/li>精品文檔放心下載〈li>監(jiān)獄強(qiáng)迫犯人打網(wǎng)游徐州禁少年進(jìn)網(wǎng)吧</li>精品文檔放心下載〈li〉ipad成為最賺錢的移動(dòng)游戲平臺(tái)〈/li〉感謝閱讀〈/ul〉</div〉</body〉</html〉。導(dǎo)航是一個(gè)網(wǎng)站的重要組成元素。利用列表顯示導(dǎo)航內(nèi)容,并適當(dāng)運(yùn)用CSS3的字體、字號(hào)間距及浮動(dòng)等修飾屬性能夠完成垂直導(dǎo)航條及水平導(dǎo)航條的制作。謝謝閱讀答案：源代碼文件〈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=""〉產(chǎn)品中心</a〉</li〉感謝閱讀〈li><ahref=”"〉服務(wù)中心〈/a></li〉謝謝閱讀〈li>〈ahref=""〉在線訂單</a>〈/li〉精品文檔放心下載<li><ahref="”〉關(guān)于我們</a>〈/li〉謝謝閱讀</ul>〈/div〉〈/body>〈/html〉知識(shí)點(diǎn)：列表的綜合運(yùn)用參考頁：P48學(xué)習(xí)目標(biāo)：5.掌握使用列表制作導(dǎo)航條的方法難度:3提示一：該題考察知識(shí)點(diǎn)：4.5列表的綜合運(yùn)用提示二：采用無序列表實(shí)現(xiàn)，主要的操作有去除項(xiàng)目樣式符號(hào)、調(diào)整行間距等。先制作垂直導(dǎo)航，然后使用浮動(dòng)將垂直導(dǎo)航變化為水平導(dǎo)航。謝謝閱讀提示三：步驟1:創(chuàng)建文件水平導(dǎo)航。html，定義頁面結(jié)構(gòu)，完成內(nèi)容的基本布局謝謝閱讀<！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”><!——在此內(nèi)部添加內(nèi)容——></div〉〈/body></html>步驟2：建立內(nèi)容項(xiàng)的無序列表顯示下面的代碼在步驟一的基礎(chǔ)上，在DIV塊內(nèi)加入了列表定義。精品文檔放心下載<divclass="container”〉〈ul><li〉公司簡介</li>〈li>產(chǎn)品中心</li〉<li>服務(wù)中心〈/li〉〈/ul></div〉此時(shí)已經(jīng)能夠看出導(dǎo)航的原型了，但是還相對(duì)簡陋,需要進(jìn)行美化?？梢詮囊韵聨讉€(gè)方面考慮調(diào)整它的顯示樣式：謝謝閱讀第一:無序列表前的默認(rèn)圓點(diǎn)需清除；第二：各列表項(xiàng)之間的間隔需加大；第三：效果圖中的背景色。步驟3：進(jìn)行格式美化清除列表項(xiàng)前的圓點(diǎn)，可以通過設(shè)置〈li〉的“l(fā)ist-style:none”即可；精品文檔放心下載內(nèi)容項(xiàng)之間的間隔可以通過增大〈li>的行間距，如“l(fā)ine-height:33px；”感謝閱讀導(dǎo)航項(xiàng)采用深藍(lán)色背景色根據(jù)上面的樣式分析，下面的頁面代碼在樣式定義部分定義了不同的樣式,并在正文中的對(duì)應(yīng)部分添加了引用.精品文檔放心下載<！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