網(wǎng)頁設(shè)計與制作項目式教程（HTML+CSS）課件07.制作“古詩”“詩文釋義”模塊

網(wǎng)頁設(shè)計與制作項目式教程（HTML+CSS）功能模塊類網(wǎng)站開發(fā)項目——“古詩詞”網(wǎng)站頁面模塊的實現(xiàn)項目實施任務(wù)分析“詩詞推薦”模塊效果及框架結(jié)構(gòu)任務(wù)3.3制作“古詩推薦”模塊知識儲備知識導(dǎo)圖“古詩推薦”模塊，可以按照作者、朝代、類型等維度對古詩進(jìn)行推薦，幫助用戶快速找到心儀的詩詞。完成本任務(wù)還需要學(xué)習(xí)的主要知識點有列表及其CSS樣式設(shè)置，知識導(dǎo)圖如圖所示。任務(wù)3.3制作“古詩推薦”模塊知識儲備新知學(xué)習(xí)1：有序列表和無序列表1．網(wǎng)頁中的列表列表是網(wǎng)頁中一種常用的數(shù)據(jù)排列方式，我們在網(wǎng)頁中到處可以看到列表的身影，如圖3-21所?示。任務(wù)3.3制作“古詩推薦”模塊知識儲備2．HTML列表簡介在HTML中，列表共有3種：有序列表、無序列表和定義列?表。任務(wù)3.3制作“古詩推薦”模塊新知學(xué)習(xí)1：有序列表和無序列表知識儲備（1）有序列表<ol>。有序列表的各個列表項都是有順序的。一般采用數(shù)字或字母作為排序依據(jù)，默認(rèn)采用數(shù)字順序。有序列表從<ol>開始，到</ol>結(jié)束，中間的列表項是<li>標(biāo)簽內(nèi)?容。語法：<ol><li>列表項內(nèi)容</li>…<li>列表項內(nèi)容</li></ol>任務(wù)3.3制作“古詩推薦”模塊新知學(xué)習(xí)1：有序列表和無序列表知識儲備（2）有序列表的list-style-type屬性。語法：<style>ol{list-style-type:屬性值；}</stylel>任務(wù)3.3制作“古詩推薦”模塊新知學(xué)習(xí)1：有序列表和無序列表屬性值列表項的序號類型decimal數(shù)字1、2、3……lower-alpha小寫英文字母a、b、c……upper-alpha大寫英文字母A、B、C……lower-roman小寫羅馬字母ⅰ、ⅱ、?！璾pper-roman大寫羅馬字母Ⅰ、Ⅱ、Ⅲ……知識儲備（2）無序列表<ul>。無序列表是沒有順序的，默認(rèn)情況下，無序列表的項目符號是●，不過可以通過無序列表的list-style-type屬性來改變無序列表的列表項符?號。語法：<ul><li>列表項內(nèi)容</li>…<li>列表項內(nèi)容</li></ul>任務(wù)3.3制作“古詩推薦”模塊新知學(xué)習(xí)1：有序列表和無序列表知識儲備無序列表的list-style-type屬性任務(wù)3.3制作“古詩推薦”模塊新知學(xué)習(xí)1：有序列表和無序列表屬性值描述disc默認(rèn)值，實心圓●circle空心圓?square實心正方形■none去除列表項符號知識儲備定義列表在實際開發(fā)中用得不多，其主要由兩部分組成：定義條件和定義描?述。語法：<dl><dt>定義條件</dt><dd>定義描述</dd>…</dl>任務(wù)3.3制作“古詩推薦”模塊新知學(xué)習(xí)2定義列表小結(jié)延伸任務(wù)小結(jié)本任務(wù)圍繞“古詩推薦”模塊的制作，分析了頁面的結(jié)構(gòu)要素，介紹了有序列表、無序列表和定義列表，綜合應(yīng)用完成了該功能模塊的制作。任務(wù)3.3制作“古詩推薦”模塊小結(jié)延伸1.根據(jù)所學(xué)列表知識，設(shè)計并制作