本篇將主要介紹列表的CSS樣式編寫,在學(xué)習(xí)之前,我們回憶一下HTML中的有序列表和無序列表。
舉例:
<span>無序列表-我的愛好:</span> <ul> <li>咖啡</li> <li>牛奶</li> <li>果汁</li> </ul> <span>有序列表-成績排行:</span> <ol> <li>張三</li> <li>李四</li> <li>趙五</li> </ol>
運行結(jié)果如下:
css列表屬性作用:
(1)設(shè)置不同的列表項標(biāo)記為有序列表
(2)設(shè)置不同的列表項標(biāo)記為無序列表
(3)設(shè)置列表項標(biāo)記為圖像
在html中,有兩種類型的html列表:
(1)無序列表:列表項的標(biāo)記使用特殊圖形(如小黑點、小方框等)
(2)有序列表:列表項的標(biāo)記使用數(shù)字或字母
(3)使用css,可以列出進一步的樣式,并可用圖像作列表項標(biāo)記
列表-簡寫屬性
在單個屬性中可以指定所有的列表屬性,這就是所謂的簡寫屬性,使用縮寫屬性值的順序是:
1. list-style-type
2. list-style-position
3. list-style-image
在簡寫屬性時,如果上述值丟失一個,其余仍在指定的順序,就沒影響。
1. list-style-type無序列表樣式
值 | 描述 |
none | 無標(biāo)記 |
disc | 默認(rèn)值,標(biāo)記為實心圓 |
circle | 將標(biāo)記設(shè)置為空心圓 |
square | 將標(biāo)記設(shè)置為實心方塊 |
decimal | 將標(biāo)記設(shè)置為數(shù)字 |
decimal-leading-zero | 將標(biāo)記設(shè)置為以 0 開頭的數(shù)字標(biāo)記,例如 01、02、03 |
lower-roman | 將標(biāo)記設(shè)置為小寫羅馬數(shù)字,例如 i、ii、iii、iv、v |
upper-roman | 將標(biāo)記設(shè)置為大寫羅馬數(shù)字,例如 I、II、III、IV、V |
lower-alpha | 將標(biāo)記設(shè)置為小寫英文字母,例如 a、b、c、d、e |
upper-alpha | 將標(biāo)記設(shè)置為大寫英文字母,例如 A、B、C、D、E |
lower-greek | 將標(biāo)記設(shè)置為小寫希臘字母,例如 α、β、γ、δ、ε |
lower-latin | 將標(biāo)記設(shè)置為小寫拉丁字母,例如 a、b、c、d、e |
upper-latin | 將標(biāo)記設(shè)置為大寫拉丁字母,例如 A、B、C、D、E |
hebrew | 將標(biāo)記設(shè)置為傳統(tǒng)的希伯來編號 |
armenian | 將標(biāo)記設(shè)置為傳統(tǒng)的亞美尼亞編號 |
georgian | 將標(biāo)記設(shè)置為傳統(tǒng)的喬治亞編號 |
cjk-ideographic | 將標(biāo)記設(shè)置為中文數(shù)字,例如 一、二、三、四、五 |
hiragana | 將標(biāo)記設(shè)置為日文平假名字符,例如 あ、い、う、え、お |
katakana | 將標(biāo)記設(shè)置為日文片假名字符,例如 ア、イ、ウ、エ、オ |
hiragana-iroha | 將標(biāo)記設(shè)置為日文平假名序號 |
katakana-iroha | 將標(biāo)記設(shè)置為日文片假名序號 |
舉例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .ul-none { list-style-type: none; } .ul-circle { list-style-type: circle; } .ul-square { list-style-type: square; } </style> </head> <body> <ul> <li>籃球</li> <li>足球</li> <li>乒乓球</li> </ul> <ul class="ul-none"> <li>籃球</li> <li>足球</li> <li>乒乓球</li> </ul> <ul class="ul-circle"> <li>籃球</li> <li>足球</li> <li>乒乓球</li> </ul> <ul class="ul-square"> <li>籃球</li> <li>足球</li> <li>乒乓球</li> </ul> </body> </html>
運行結(jié)果:
舉例:
<!DOCTYPE html> <html> <head> <style> ul { list-style-type: circle; } ol { float: left; } .ol_one { list-style-type: lower-roman; } .ol_two { list-style-type: lower-greek; } .ol_three { list-style-type: georgian; } </style> </head> <body> <ul> <li>姓名</li> <li>性別</li> <li>籍貫</li> </ul> <ol class="ol_one"> <li>姓名</li> <li>性別</li> <li>籍貫</li> </ol> <ol class="ol_two"> <li>姓名</li> <li>性別</li> <li>籍貫</li> </ol> <ol class="ol_three"> <li>姓名</li> <li>性別</li> <li>籍貫</li> </ol> </body> </html>
運行結(jié)果:
2. list-style-position有序列表樣式
值 | 描述 |
inside | 列表項前的標(biāo)記放置在之后的文本以內(nèi),列表項中的文本會根據(jù)標(biāo)記對齊 |
outside | 默認(rèn)值,保持標(biāo)記位于文本的左側(cè),列表項前的標(biāo)記放置在文本以外,并且列表項中的文本不會根據(jù)標(biāo)記對齊 |
inherit | 從父元素繼承 list-style-position 屬性的值 |
舉例:
<!DOCTYPE html> <html> <head> <style> ol { list-style-type: lower-roman; } li { background: #ccc; margin-bottom: 2px; } .ol_one { list-style-position: inside; } .ol_two { list-style-position: outside; } </style> </head> <body> <ol class="ol_one"> <li>姓名</li> <li>性別</li> <li>電話</li> </ol> <ol class="ol_two"> <li>地址</li> <li>郵編</li> <li>郵件</li> </ol> </body> </html>
運行結(jié)果:
3. list-style-image修改列表標(biāo)記圖像
值 | 描述 |
URL | 圖像的路徑 |
none | 默認(rèn)值,不顯示任何圖像 |
inherit | 從父元素繼承 list-style-image 屬性的值 |
4. list-style
ist-style 屬性是上述三個屬性(list-style-type、list-style-position、list-style-image)的簡寫,使用 list-style 可以同時設(shè)置上面的三個屬性,其語法格式如下:
list-style: list-style-type || list-style-position || list-style-image;
C語言網(wǎng)提供由在職研發(fā)工程師或ACM藍橋杯競賽優(yōu)秀選手錄制的視頻教程,并配有習(xí)題和答疑,點擊了解:
一點編程也不會寫的:零基礎(chǔ)C語言學(xué)練課程
解決困擾你多年的C語言疑難雜癥特性的C語言進階課程
從零到寫出一個爬蟲的Python編程課程
只會語法寫不出代碼?手把手帶你寫100個編程真題的編程百練課程
信息學(xué)奧賽或C++選手的 必學(xué)C++課程
藍橋杯ACM、信息學(xué)奧賽的必學(xué)課程:算法競賽課入門課程
手把手講解近五年真題的藍橋杯輔導(dǎo)課程