商城網(wǎng)站做推廣有什么好處seo名詞解釋
前端list列表自定義圖標(biāo)并設(shè)置大小
一、前端list列表基礎(chǔ)知識回顧
前端公有兩種列表，一種是有序列表（ol），一種是無序列表（ul），它們的子元素都是（li）。
1.1 有序列表（ol）
有序列表的子元素（li）的樣式：
ol：有序列表（默認(rèn)使用數(shù)字作為序號）type='A'：字母排序type='I'：羅馬排序start=“3” 序列從幾開始（如果不寫默認(rèn)從1開始）
代碼示例：
<!-- 默認(rèn)有序形式為 阿拉伯?dāng)?shù)字 --><h2>有序列表ol</h2><ol><li>python</li><li>Java</li><li>Linux</li></ol><!-- 大寫英文字母排序 --><ol type="A"><li>python</li><li>Java</li><li>Linux</li></ol><!-- 羅馬數(shù)字排序 --><ol type="I"><li>python</li><li>Java</li><li>Linux</li></ol>
1.2 無序列表（ul）
無序列表的子元素（li）的樣式：
ul：無序列表type="disc"：默認(rèn)，實心圓type="square"：方塊type="circle"：空心圓
代碼示例：
<h2>無序列表ul</h2><!-- 默認(rèn)形式 實心圓 --><ul><li>python</li><li>Java</li><li>Linux</li></ul><!-- 方形square --><ul type="square"><li>python</li><li>Java</li><li>Linux</li></ul><!-- 空心圓circle --><ul type="circle"><li>python</li><li>Java</li><li>Linux</li></ul>
二、前端list列表自定義圖標(biāo)并設(shè)置大小
2.1 第一種方式
首先，CSS3 樣式為我們提供了對應(yīng)的屬性，可以直接設(shè)置自定義圖標(biāo)樣式，但是缺點在于圖標(biāo)大小不可以更改，所以在編程之前就需要準(zhǔn)備好合適的圖標(biāo)，進行使用。
list-style-type：使用CSS，可以列出進一步的樣式，并可用圖像作列表項標(biāo)記。- none：無標(biāo)記。（去除標(biāo)記）- disc：默認(rèn)。標(biāo)記是實心圓。- circle：標(biāo)記是空心圓。- square：標(biāo)記是實心方塊。- decimal：標(biāo)記是數(shù)字。- decimal-leading-zero：0開頭的數(shù)字標(biāo)記。(01, 02, 03, 等。)- lower-roman：小寫羅馬數(shù)字(i, ii, iii, iv, v, 等。)- upper-roman：大寫羅馬數(shù)字(I, II, III, IV, V, 等。)- lower-alpha：小寫英文字母The marker is lower-alpha (a, b, c, d, e,等。)- upper-alpha：大寫英文字母The marker is upper-alpha (A, B, C, D, E,等。)list-style-image：url(圖片地址) 自己指定圖標(biāo)，這種不能控制圖標(biāo)的大小，如果圖標(biāo)過大，無法控制
示例代碼
<style>.ul-list{list-style-type: disc;}.ol-list{list-style-type: decimal;}.ol-list-2{list-style-image: url(../img/list-img-1.gif);}.ul-list-2{list-style-image: url(../img/list-img-2.gif);}
</style>
<body><ul class="ul-list"><li>Python</li><li>Java</li><li>Linux</li></ul><ol class="ol-list"><li>Python</li><li>Java</li><li>Linux</li></ol><ol class="ol-list-2"><li>Python</li><li>Java</li><li>Linux</li></ol><ul class="ul-list-2"><li>Python</li><li>Java</li><li>Linux</li></ul>
</body>
2.2 第二種方式
這種方式，我們可以使用任何圖片，可以通過 CSS3 控制自定義圖片的大小，進而進行合理的展示
background-image：使用背景圖片作為圖標(biāo)
background-size：進行背景圖片大小控制
background-repeat：背景圖片只出現(xiàn)一次
示例代碼：html部分
<div><h3>5.列表樣式</h3><div><h5>今天需要完成的任務(wù)</h5><ol class="list1"><li>去公司上班</li><li>完成工作任務(wù)</li><li>遞呈紙質(zhì)材料</li></ol></div><div><h5>音樂列表</h5><ul class="list2"><li><a href="_blank">年少的你.mp3</a></li><li><a href="_blank">世界這么大還是遇見你.mp3</a></li><li><a href="_blank">我的夢.mp3</a></li></ul></div>
</div>
示例代碼：CSS部分
/*** 列表樣式*/
.list1{list-style: none;
}
.list1 li::before{background-image: url(../icon/Spell.ico);background-size: 100% 100%;background-repeat: no-repeat;display: inline-block;content: '';width: 15px;height: 15px;margin: 5px;vertical-align: middle;
}
.list2{list-style: none;
}
.list2 li::before{background-image: url(../icon/ForwardNext.ico);background-size: 100% 100%;background-repeat: no-repeat;display: inline-block;content: '';width: 15px;height: 15px;margin: 5px;vertical-align: middle;
}
三、總結(jié)
以上就是前端list列表自定義圖標(biāo)并設(shè)置大小本篇文章的相關(guān)內(nèi)容，希望對大家有用，謝謝大家。