《Web前端開發(fā)項目教程》網(wǎng)頁中列表的應(yīng)用-認識列表_第1頁
《Web前端開發(fā)項目教程》網(wǎng)頁中列表的應(yīng)用-認識列表_第2頁
《Web前端開發(fā)項目教程》網(wǎng)頁中列表的應(yīng)用-認識列表_第3頁
《Web前端開發(fā)項目教程》網(wǎng)頁中列表的應(yīng)用-認識列表_第4頁
《Web前端開發(fā)項目教程》網(wǎng)頁中列表的應(yīng)用-認識列表_第5頁
已閱讀5頁，還剩20頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

項目06

網(wǎng)頁中列表的應(yīng)用任務(wù)6-1認識列表任務(wù)引入京東網(wǎng)上商城以列表的形式分類呈現(xiàn)導(dǎo)航菜單百度新聞列表任務(wù)6-1認識列表

知識點掌握無序列表、有序列表、定義列表的用法掌握列表樣式的設(shè)置技能點能夠使用列表展示數(shù)據(jù)能夠使用列表進行圖文混排能夠使用列表制作導(dǎo)航菜單一、列表的分類無序列表有序列表定義列表一、列表的分類——無序列表（ul）無序列表是網(wǎng)頁中最常用的列表，之所以稱為“無序列表”，是因為其各個列表項之間沒有順序級別之分，通常是并列的。定義無序列表的基本語法格式如下：<ul><li>列表項1</li><li>列表項2</li><li>列表項3</li>......</ul><ul></ul>標(biāo)記用于定義無序列表，<li></li>標(biāo)記嵌套在<ul></ul>標(biāo)記中，用于描述具體的列表項，每對<ul></ul>中至少應(yīng)包含一對<li></li>。一、列表的分類——無序列表（ul）<ul>和<li>都擁有type屬性，用于指定列表項目符號。在無序列表中type屬性的常用值有三個，它們呈現(xiàn)的效果如下：（1）disc（默認樣式）：顯示“●”（2）circle：顯示“○”（3）square：顯示“■”<h2>五岳</h2><ultype='circle'> <li>中岳嵩山</li>

<li>東岳泰山</li>

<litype="square">西岳華山</li> <li>南岳衡山</li>

<li>北岳恒山</li></ul><h2>中國文化遺產(chǎn)</h2><ul> <li>北京故宮</li>

<li>山東泰山</li>

<li>......</li></ul>實際應(yīng)用中通常不使用無序列表的type屬性，一般通過CSS樣式屬性替代。一、列表的分類——有序列表（ol）有序列表即為有排列順序的列表，其各個列表項按照一定的順序排列。定義有序列表的基本語法格式如下：<ol><li>列表項1</li><li>列表項2</li><li>列表項3</li>......</ol>在上面的語法中，<ol></ol>標(biāo)記用于定義有序列表，<li></li>為具體的列表項，和無序列表類似，每對<ol></ol>中也至少應(yīng)包含一對<li></li>。一、列表的分類——有序列表（ol）有序列表<ol>和<li>的type屬性取值如下：（1）1（默認屬性值）：項目符號顯示為數(shù)字123…（2）a或A：項目符號顯示為英文字母abcd…或ABC…（3）i或I：項目符號顯示為羅馬數(shù)字iiiiii…或IIIIII…<h2>圖書銷量排行榜</h2><ol><litype="1"value="1">城南舊事</li><!--阿拉伯?dāng)?shù)字排序--><litype="a">百年孤獨</li> <!--英文字母排序--><litype="I">呼蘭河傳</li> <!--羅馬數(shù)字排序--></ol>一、列表的分類——定義列表（dl）定義列表常用于對術(shù)語或名詞進行解釋和描述，與無序和有序列表不同，定義列表的列表項前沒有任何項目符號。基本語法格式如下：<dl><dt>名詞1</dt><dd>名詞1解釋1</dd><dd>名詞1解釋2</dd>...<dt>名詞2</dt><dd>名詞2解釋1</dd><dd>名詞2解釋2</dd>...</dl><dl></dl>標(biāo)記用于指定定義列表<dt></dt>和<dd></dd>并列嵌套于<dl></dl>中，其中<dt></dt>標(biāo)記用于指定術(shù)語名詞<dd></dd>標(biāo)記用于對名詞進行解釋和描述一、列表的分類——定義列表（dl）一對<dt></dt>可以對應(yīng)多對<dd></dd>，即可以對一個名詞進行多項解釋。相對于<dt></dt>標(biāo)記中的術(shù)語或名詞，<dd></dd>標(biāo)記中解釋和描述性的內(nèi)容會產(chǎn)生一定的縮進效果。<dl>

<dt>華為技術(shù)有限公司</dt><!--定義術(shù)語名詞--> <dd>全球領(lǐng)先的信息與通信技術(shù)（ICT）解決方案供應(yīng)商 </dd><!--解釋和描述名詞-->

<dd>2020胡潤中國10強消費電子企業(yè)</dd>

<dd>構(gòu)建萬物互聯(lián)的智能世界</dd></dl>二、CSS控制列表樣式列表樣式屬性取值和描述list-style-type:符號類型;無序：disc圓點、circle圓圈、square方塊、none無標(biāo)記有序：decimal數(shù)字（默認）、none無標(biāo)記lower-alpha/upper-alpha英文字母lower-roman/upper-roman羅馬數(shù)字lower-greek希臘字母(alpha,beta…)lower-latin/upper-latin拉丁字母list-style-image:url(圖像URL);用圖像符號將替換列表項符號、none不使用圖像（默認）list-style-position:符號位置;outside符號位于文本左側(cè)外部inside符號位于文本內(nèi)部—縮進list-style:類型/url(圖像url)位置;順序任意二、CSS控制列表樣式——list-style-type樣式屬性在CSS中，list-style-type用于控制無序和有序列表的項目符號，其取值和顯示效果如下：（1）無序列表（ul）屬性值：disc：顯示“●”circle：顯示“○”square：顯示“■”（2）有序列表（ol）屬性值：decimal：阿拉伯?dāng)?shù)字1、2、3......upper-alpha：大寫英文字母A、B、C......lower-alpha：小寫英文字母a、b、c......upper-roman：大寫羅馬數(shù)字I、II、III......lower-roman：小寫羅馬數(shù)字i、ii、iii......二、CSS控制列表樣式——list-style-type樣式屬性【例6-1-1】list-style-type樣式屬性的應(yīng)用<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>百度熱榜</title> <styletype="text/css"> ol{list-style-type:upper-roman;} </style>

</head> <body> <h3>百度熱榜</h3> <ol> <li>第三屆數(shù)字中國建設(shè)峰會閉幕</li> <li>打造智慧城市</li> <li>在更高的起點上推進改革開放</li> </ol> </body></html>二、CSS控制列表樣式——list-style-type樣式屬性【例6-1-1】list-style-type樣式屬性的應(yīng)用<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>百度熱榜</title> <styletype="text/css"> ol{list-style:upper-roman;} </style>

</head> <body>

<h3>百度熱榜</h3>

<ol>

<li>第三屆數(shù)字中國建設(shè)峰會閉幕</li>

<listyle="list-style-type:square;">打造智慧城市</li> <li>在更高的起點上推進改革開放</li>

</ol> </body></html>list-style-type可以單獨應(yīng)用于某一個li標(biāo)簽，只改變當(dāng)前條目的編號格式。二、CSS控制列表樣式——list-style-type樣式屬性【例6-1-1】list-style-type樣式屬性的應(yīng)用<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>百度熱榜</title> <styletype="text/css"> ol{list-style:upper-roman;} </style>

</head> <body>

<h3>百度熱榜</h3>

<ol>

<li>第三屆數(shù)字中國建設(shè)峰會閉幕</li>

<listyle="list-style-type:square;color:red;">打造智慧城市</li>

<li>在更高的起點上推進改革開放</li>

</ol> </body></html>不能企圖通過改變li的color樣式屬性來單獨改變編號的顏色！二、CSS控制列表樣式——list-style-type樣式屬性【例6-1-1】list-style-type樣式屬性的應(yīng)用？二、CSS控制列表樣式——list-style-image屬性使用list-style-image屬性可以為各個列表項設(shè)置項目圖像，使列表的樣式更加美觀。<styletype="text/css">ul{list-style-image:url("/img/arrow.gif");}</style>用作項目圖像的文件尺寸不宜過大，最好能夠提前圖像處理軟件當(dāng)中設(shè)置好合適的尺寸。二、CSS控制列表樣式——list-style-position屬性在CSS中，list-style-position屬性用于控制列表項目符號的位置，其取值有inside和outside兩種，對它們的解釋如下：inside：列表項目符號位于列表文本以內(nèi)。outside：列表項目符號位于列表文本以外（默認值）。二、CSS控制列表樣式——list-style-position屬性默認情況下，list-style-position的取值為outside，列表項標(biāo)記放置在文本以外，不占用li的寬度，而list-style-position的取值為inside時，列表項標(biāo)記放置在文本以內(nèi)，占用li的寬度。在list-style-position的取值為outside時，可以改變li的padding-left取值調(diào)整列表項內(nèi)容和標(biāo)號之間的距離。三、列表的應(yīng)用——用列表展示數(shù)據(jù)網(wǎng)頁中的列表經(jīng)常用于以條目的形式有序或無序排列相關(guān)資料，也可用于展示用戶從數(shù)據(jù)庫中查詢得到的結(jié)果。例如新聞列表等。三、列表的應(yīng)用——定義列表用于圖文混排定義列表常用于圖文混排，在<dt></dt>標(biāo)記中插入圖片，<dd></dd>標(biāo)記中放入對圖片解釋說明的文字。三、列表的應(yīng)用——定義列表用于圖文混排<body>

<dlclass="box">

<dt><imgsrc="img/redmibook.jpg"></dt>

<dd>

<h2>小米10至尊紀(jì)念版</h2>

<p>「十年獻禮之作！最高享24期免息，低至221元起/期；加149元得199元55W立式風(fēng)冷無線充；加69元得皮革保護殼」120X超遠變焦/120W秒充科技/120Hz刷新率+240Hz采樣率/驍龍865旗艦處理器/雙模5G/10倍混合光學(xué)變焦/OIS光學(xué)防抖+EIS數(shù)字防抖/2000萬超清前置相機/雙串蝶式石墨烯基鋰離子電池/等效4500mAh大電量/120W有線秒充+50W無線秒充+10W無線反充/WiFi6/多功能NFC/紅外遙控</p>

</dd>

</dl></body><styletype="text/css">

.box{width:600px;border:1pxsolid;padding:20px;}

.boxdt{float:left; width:40%; }

.boxdtimg{width:100%;}

.boxddh2{font-family:'微軟雅黑';}

.boxddp{font-family:'宋體';text-indent:2em;}</style>三、列表的應(yīng)用——列表制作導(dǎo)

溫馨提示

  • 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)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論