Web前端開發(fā)技術(shù)項(xiàng)目教程(HTML5 CSS3 JavaScript)(微課版) 課件 6.1.2知識點(diǎn)1:創(chuàng)建列表_第1頁
Web前端開發(fā)技術(shù)項(xiàng)目教程(HTML5 CSS3 JavaScript)(微課版) 課件 6.1.2知識點(diǎn)1:創(chuàng)建列表_第2頁
Web前端開發(fā)技術(shù)項(xiàng)目教程(HTML5 CSS3 JavaScript)(微課版) 課件 6.1.2知識點(diǎn)1:創(chuàng)建列表_第3頁
Web前端開發(fā)技術(shù)項(xiàng)目教程(HTML5 CSS3 JavaScript)(微課版) 課件 6.1.2知識點(diǎn)1:創(chuàng)建列表_第4頁
Web前端開發(fā)技術(shù)項(xiàng)目教程(HTML5 CSS3 JavaScript)(微課版) 課件 6.1.2知識點(diǎn)1:創(chuàng)建列表_第5頁
已閱讀5頁,還剩14頁未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

創(chuàng)建列表信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開發(fā)》前端技術(shù)開發(fā)知識儲備列表應(yīng)用1創(chuàng)建無序列表2創(chuàng)建有序列表3列表樣式屬性401列表的常見應(yīng)用01列表常見應(yīng)用第1處.無序列表第2處.有序列表第3處.無序列表列表的特點(diǎn)呈多項(xiàng)并列關(guān)系的元素信息整齊直觀,便于用戶理解。案例:智慧職教網(wǎng)站頁面列表常見應(yīng)用水平導(dǎo)航欄

側(cè)邊欄

輪播插件的小圖標(biāo)02創(chuàng)建無序列表02列表類型HTML列表類型:列表名稱描述相關(guān)標(biāo)記無序列表無序列表是一個項(xiàng)目的列表,此列項(xiàng)目使用粗體圓點(diǎn)(典型的小黑圓圈)進(jìn)行標(biāo)記。<ul>創(chuàng)建列表,<li>列表項(xiàng)有序列表有序列表是一列項(xiàng)目,列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記。<ol>創(chuàng)建列表,<li>列表項(xiàng)定義列表自定義列表不僅僅是一列項(xiàng)目,而是項(xiàng)目及其注釋的組合。<dl>創(chuàng)建定義列表,<dt>列表項(xiàng),<dd>定義定列表項(xiàng)的描述注意和提示:列表項(xiàng)內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等02創(chuàng)建無序列表創(chuàng)建無序列表HTML代碼:<ul>

<li>第一個列表項(xiàng)內(nèi)容</li> <li>第二個列表項(xiàng)內(nèi)容</li>

<li>第三個列表項(xiàng)內(nèi)容</li>…</ul>說明:

無序列表以<ul>開始,</ul>結(jié)束。

<li></li>標(biāo)記生成一個列表項(xiàng)

數(shù)量根據(jù)需要而定

無序列表的默認(rèn)項(xiàng)目符號為實(shí)心圓點(diǎn)

可使用CSS修改樣式。02創(chuàng)建無序列表網(wǎng)頁源代碼網(wǎng)頁效果默認(rèn)實(shí)心圓03創(chuàng)建有序列表說明:

無序列表以<ol>開始,</ol>結(jié)束。

<li></li>標(biāo)記生成一個列表項(xiàng)

數(shù)量根據(jù)需要而定

有序列表的默認(rèn)項(xiàng)目符號為數(shù)字

可使用CSS修改樣式。03創(chuàng)建有序列表創(chuàng)建有序列表HTML代碼:<ol>

<li>第一個列表項(xiàng)內(nèi)容</li> <li>第二個列表項(xiàng)內(nèi)容</li>

<li>第三個列表項(xiàng)內(nèi)容</li>

…</ol>03創(chuàng)建有序列表HTML源代碼網(wǎng)頁效果默認(rèn)數(shù)字03嵌套列表列表項(xiàng)內(nèi)容可以是文本,圖片,超鏈接,甚至可以是列表等其他網(wǎng)頁元素。列表項(xiàng)內(nèi)容是列表,形成嵌套列表。嵌套列表HTML源代碼網(wǎng)頁效果04列表樣式屬性列表屬性樣式設(shè)置前端技術(shù)開發(fā)04設(shè)置列表項(xiàng)類型的CSS屬性——list-style-type屬性list-style-type屬性值常用值列表屬性樣式設(shè)置前端技術(shù)開發(fā)04設(shè)置列表項(xiàng)類型的CSS屬性——list-style-type屬性ul{list-style-type:square;}ol{list-style-type:upper-alpha;}無序列表符號為方塊有序列表符號為大寫字母屬性樣式設(shè)置前端技術(shù)開發(fā)02設(shè)置列表項(xiàng)圖片的CSS屬性list-style-image:none|URL(圖片路徑)說明:none是默認(rèn)值。表示不設(shè)置圖片。URL指定圖片源。一般使用相對路徑來指定本地圖片。圖片常用格式有GIF、PNG、JPEG(JPG)等。屬性樣式設(shè)置前端技術(shù)開發(fā)02設(shè)置列表項(xiàng)圖片的實(shí)例HTML源代碼網(wǎ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)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論