[學習筆記] CSS 自訂標號圖示、段落縮排效果 | html li樣式
[學習筆記]CSS自訂標號圖示、段落縮排效果-HackMD######tags:`HTML&CSS`#[學習筆記]CSS自訂標號圖示、段落縮排效果+[CSSlist-style列表屬性](https://www.wibibi.com/info.php?tid=CSS_list-style_%E5%88%97%E8%A1%A8%E5%B1%AC%E6%80%A7)+更多項目標籤寫法參考:[CSSlist-style-type](https://www.wibibi.com/info.php?tid=359)##CSS中的標號圖示在HTML&CSS中,想要建立段落標號樣式,可透過下列幾種方法:+第一種:``行內標籤+可插入icon,但用在排序會較不符合語意化```htmlmixed=
###### tags: `HTML & CSS` # [學習筆記] CSS 自訂標號圖示、段落縮排效果 + [CSS list-style 列表屬性 ](https://www.wibibi.com/info.php?tid=CSS_list-style_%E5%88%97%E8%A1%A8%E5%B1%AC%E6%80%A7) + 更多項目標籤寫法參考:[CSS list-style-type](https://www.wibibi.com/info.php?tid=359) ## CSS 中的標號圖示 在 HTML & CSS 中,想要建立段落標號樣式,可透過下列幾種方法: + 第一種:`<span>` 行內標籤 + 可插入 icon,但用在排序會較不符合語意化 ```htmlmixed= <li><span>(1)</span>這是第一項</li> <li><mat-icon class="cat"></mat-icon>這是一隻貓</li> ``` + 第二種:使用 ul(無序)、ol(有序)項目標籤 + 透過 li::before 自訂標號圖示,同樣可插入 icon ### ul li 或 ol, li 項目標籤 在 HTML 中,可根據是否需呈現排序項目,使用 ol li 標籤;若不需排序,就直接使用 ul li 標籤。 可參考以下範例: ```htmlmixed= <!-- 無序列 --> <ul> <li>星期一</li> <li>星期二</li> </ul> <!-- 有序列 --> <ol> <li>星期一</li> <li>星期二</li> </ol> ``` 輸出效果如下: + 星期一 + 星期二 1. 星期一 2. 星期二 ## CSS list-style 列表屬性 CSS 列...