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

下載本文檔

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

文檔簡介

第5章

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

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

5.1無序列表下面的例子使用HTML5的nav和無序列表，實(shí)現(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無序列表列表可以嵌套使用，即一個(gè)列表中還可以包含多個(gè)層次的列表。<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)記，其中的每個(gè)列表項(xiàng)目是有先后順序的。<h1>最受歡迎的五大花茶：</h1><ol><li>桂花茶</li><li>菊花茶</li><li>百合花茶</li><li>玫瑰花茶</li><li>金銀花茶</li></ol>5.2有序列表5.2有序列表可以使用ol的liststyle來設(shè)置編號(hào)的樣式，例如設(shè)置編號(hào)樣式為小寫字母：ol{list-style:lower-alpha;}。常見的有序列表編號(hào)有：decimal:數(shù)字，默認(rèn)值lower-alpha:小寫英文字母upper-alpha:大寫英文字母lower-roman:小寫羅馬數(shù)字upper-roman:大寫羅馬數(shù)字none:無編號(hào)有序列表的編號(hào)一般從1,a,A，或者i開始編號(hào)，如果要更改起始的編號(hào)，可以使用start屬性修改。例如：<olstart="3"><li>桂花茶</li><li>菊花茶</li><li>百合花茶</li>

</ol>如果設(shè)置了ol{list-style:lower-alpha;}那么從小寫字母的第3個(gè)，開始編號(hào)。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é)相見。后用以比喻互

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

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

</dd>

</dl>5.3自定義列表5.4.1使用列表設(shè)計(jì)垂直導(dǎo)航菜單1.首先使用ul建立列表菜單，并為li的每一項(xiàng)插入超鏈接，做成目錄。<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è)置列表不顯示項(xiàng)目符號(hào)，并設(shè)置列表總體寬度為160px。#menu{list-style-type:none;

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

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

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

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

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論