網(wǎng)頁設(shè)計與制作基礎(chǔ)（HTML5+CSS3）課件 第5章 列表應(yīng)用_第1頁
網(wǎng)頁設(shè)計與制作基礎(chǔ)（HTML5+CSS3）課件 第5章 列表應(yīng)用_第2頁
網(wǎng)頁設(shè)計與制作基礎(chǔ)（HTML5+CSS3）課件 第5章 列表應(yīng)用_第3頁
網(wǎng)頁設(shè)計與制作基礎(chǔ)（HTML5+CSS3）課件 第5章 列表應(yīng)用_第4頁
網(wǎng)頁設(shè)計與制作基礎(chǔ)（HTML5+CSS3）課件 第5章 列表應(yīng)用_第5頁
已閱讀5頁，還剩15頁未讀， 繼續(xù)免費閱讀

付費下載

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認(rèn)領(lǐng)

文檔簡介

第5章

列表應(yīng)用目錄無序列表定義和使用01有序列表定義和使用02自定義列表的定義和使用03列表綜合案例04無序列表是網(wǎng)頁中使用最多的列表形式。使用<ul></ul>標(biāo)記，其中的每個列表項目使用<li></li>標(biāo)記。無序列表也稱為項目列表，各個項目<li>之間屬于并列關(guān)系，沒有先后順序之分，它們之間使用項目符號來顯示。例如下面的例子使用列表來呈現(xiàn)筆記本的品牌：<ul><li>聯(lián)想筆記本</li><li>惠普筆記本</li><li>戴爾筆記本</li><li>蘋果筆記本</li></ul>5.1無序列表小圓點為默認(rèn)的項目符號，可以設(shè)置ul的樣式，利用liststyle來更改顯示的項目符號，例如設(shè)置為空心圓：ul{list-style:circle;}，設(shè)置效果如圖所示：5.1無序列表常見的項目符號有：disc實心圓（默認(rèn)值）circle空心圓square實心方塊none無列表除了使用項目符號，還可以自定義項目符號，只需設(shè)置ul樣式，將樣式設(shè)置為圖片：ul{list-style-image:url(images/ico1.png);

}一個列表如果同時設(shè)置了項目符號和自定義項目圖片，自定義項目圖片將覆蓋默認(rèn)的項目符號。

5.1無序列表下面的例子使用HTML5的nav和無序列表，實現(xiàn)了導(dǎo)航欄菜單制作。效果如圖所示。<body><h3>web前端開發(fā)</h3><nav><ul><li><ahref="#">HTML5</a></li><li><ahref="#">CSS3</a></li><li><ahref="#">JavaScript</a></li></ul></nav><h3>web后端開發(fā)</h3><nav><ul><li><ahref="#">Servlet</a></li><li><ahref="#">JSP</a></li><li><ahref="#">MySql</a></li></ul></nav></body>5.1無序列表列表可以嵌套使用，即一個列表中還可以包含多個層次的列表。<ul><li>聯(lián)想筆記本<ul><li>ThinkPadX1</li><li>ThinkPadT14</li><li>ideapad14S</li></ul></li><li>惠普筆記本<ul><li>星14Pro</li><li>星15青春</li><li>ENVY13X360度輕薄翻轉(zhuǎn)</li></ul>

</li><li>戴爾筆記本</li><li>蘋果筆記本</li></ul>5.1無序列表有序列表使用<ol></ol>標(biāo)記，其中的每個列表項目是有先后順序的。<h1>最受歡迎的五大花茶：</h1><ol><li>桂花茶</li><li>菊花茶</li><li>百合花茶</li><li>玫瑰花茶</li><li>金銀花茶</li></ol>5.2有序列表5.2有序列表可以使用ol的liststyle來設(shè)置編號的樣式，例如設(shè)置編號樣式為小寫字母：ol{list-style:lower-alpha;}。常見的有序列表編號有：decimal:數(shù)字，默認(rèn)值lower-alpha:小寫英文字母upper-alpha:大寫英文字母lower-roman:小寫羅馬數(shù)字upper-roman:大寫羅馬數(shù)字none:無編號有序列表的編號一般從1,a,A，或者i開始編號，如果要更改起始的編號，可以使用start屬性修改。例如：<olstart="3"><li>桂花茶</li><li>菊花茶</li><li>百合花茶</li>

</ol>如果設(shè)置了ol{list-style:lower-alpha;}那么從小寫字母的第3個，開始編號。5.2有序列表<dl></dl>標(biāo)記來生成自定義列表<dl>標(biāo)簽里面包含<dt>和<dd>標(biāo)簽，<dt>是自定義列表標(biāo)題，<dd>是自定義列表的內(nèi)容。<h1>成語詞條天天記</h1>

<dl>

<dt>白云蒼狗</dt>

<dd>比喻世事變幻無常。</dd>

<dt>分庭抗禮</dt>

<dd>原指賓客和主人分別站在庭院兩邊,以平等的禮節(jié)相見。后用以比喻互

相對立,地位相當(dāng)。</dd><dt>守株待兔</dt>

<dd>比喻死守經(jīng)驗，不知變通。亦用以諷刺妄想不勞而獲的僥幸心理。

</dd>

</dl>5.3自定義列表5.4.1使用列表設(shè)計垂直導(dǎo)航菜單1.首先使用ul建立列表菜單，并為li的每一項插入超鏈接，做成目錄。<ulid="menu"><li><ahref="#">花茶種類</a></li><li><ahref="#">花茶功效</a></li><li><ahref="#">花茶泡法</a></li><li><ahref="#">花茶采購</a></li><li><ahref="#"></a></li></ul>2.設(shè)置列表樣式：設(shè)置列表不顯示項目符號，并設(shè)置列表總體寬度為160px。#menu{list-style-type:none;

/*不顯示項目符號*/margin:0;padding:0;width:160px;}5.4列表綜合應(yīng)用5.4列表綜合應(yīng)用5.4.1使用列表設(shè)計垂直導(dǎo)航菜單3.設(shè)置正常超鏈接樣式：#menulia{display:block;

/*設(shè)置為塊級元素*/padding:2px4px;text-decoration:none;

/*不顯示下劃線*/background-color:#3A6A24;border:2pxsolidbeige;color:aliceblue;}4.設(shè)置鼠標(biāo)經(jīng)過a:hover時，背景顏色設(shè)置為亮綠色，并且邊框為立體邊框效果，以達到菜單切換效果。#menulia:hover{color:black;background-color:#94D046;border-style:outset;

}下面的例子實現(xiàn)了教務(wù)管理系統(tǒng)的菜單設(shè)計，菜單使用層疊縮放效果。鼠標(biāo)放在一級標(biāo)題上面，下面會顯示下拉子菜單，如圖所示：5.4.2使用列表實現(xiàn)下拉菜單功能建立列表基本內(nèi)容5.4.2使用列表實現(xiàn)下拉菜單功能設(shè)置整個div層的樣式（.menu），一級菜單“教務(wù)中心”“家?；印薄皵?shù)據(jù)中心”“與我聯(lián)系”的樣式。5.4.2使用列表實現(xiàn)下拉菜單功能設(shè)置設(shè)置二級菜單ul的整體樣式，以及每個項目的樣式：5.4.2使用列表實現(xiàn)下拉菜單功能設(shè)置二級菜單的超鏈接樣式5.4.2使用列表實現(xiàn)下拉菜單功能設(shè)置當(dāng)鼠標(biāo)指針經(jīng)過一級菜

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論