無序列表圓點距離 HTML CSS 基礎知識 列表

2021-10-14 17:27:33 字數 2464 閱讀 4661

列表方式呈現一系列平行的內容,在 html 頁面中同樣提供了列表元素來完成類似的功能,可以劃分為如下 3 列表:

​有序列表(有數字順序序號)

無序列表(全是 · 沒有序號)

定義列表

html 元素表示有序列表,預設情況下使用數字作為列表編號。

而 元素則表示列表項,定義在有序列表中。​例:

​iphone手機

小公尺手機

華為手機

元素預設使用數字作為編號,可以通過 type 屬性進行修改,該屬性的值具有 5 種型別,如下所示:

​「a」:表示小寫字母編號

「a」:表示大寫字母編號

「i」:表示小寫羅馬數字編號

「i」:表示大寫羅馬數字編號

「1」:預設值,表示數字編號

type 屬性的值預設情況下會作用到整個有序列表。

​說明:type 屬性在 html4 版本中被棄用,但在 html5 版本中被重新引入。如果不是為了元素的語義化的話,該屬性可以使用 css 中的 list-style-type 屬性進行替代。

​除了 type 屬性之外,在 html5 版本中新增了 2 個屬性,如下所示:

​1、reversed:布林值,設定列表採用倒序的方式。

​注意:該屬性只需要定義屬性名即可,而不需要設定屬性值。

​如下示例**展示了 reversed 屬性的用法:

​iphone手機

小公尺手機

華為手機

​效果便是倒序輸出

​2、start:整數值,設定列表序號開始的值。

​說明:該屬性在 html4 版本中被棄用,在 html5 版本中被重新引入。

html 元素也同樣具有如下 2 個屬性:

​value:整數值,設定當前列表項在有序列表的序號。(如果和start一起使用,會執行value的作用)

​說明:該屬性在 html4 版本中被棄用,在 html5 版本中被重新引入。

​type:設定有序列表的數字型別。

​說明:該屬性值會覆蓋 元素的 type 屬性值。

​由於 元素的 2 個屬性,會導致兩種比較特殊的情況出現:

​元素通過 value 屬性設定了該元素在有序列表的序號,但與預設的序號是不同的。

如下示例**展示了這種情況:

​iphone手機

小公尺手機

華為手機

​結果是 3 5 6 , 因為第二個li開始設定了value值,也導致了第三個預設公升序

html 

小公尺手機

華為手機

無序列表巢狀無序列表:父級無序列表預設使用 disc 作為序號,子級無序列表預設使用 circle 作為序號。

​如下示例**所示:​

小公尺手機

華為手機

無序列表巢狀有序列表:父級無序列表預設使用 disc 作為序號,子級有序列表預設使用數字作為序號。

​如下示例**所示:

html 元素在 html4 版本中稱為定義列表,在 html5 版本中稱為描述列表。該元素是乙個包含術語定義及描述的列表,其中術語定義使用的是 元素,描述使用的是 元素。該元素通常應用於例如詞彙表、鍵值對列表等。

​如下示例**展示了定義列表的基本用法:​愛好

抽菸喝酒

燙頭職業

程式設計師講師

說書人​

說明:不要將定義列表用來實現縮排效果,因為這樣做法導致語義化不清晰。

說明:h5版本以摒棄以往的type屬性,只能用list-style代替

列表樣式主要是針對 html 頁面中的列表元 css 所提供的樣式。具體來講,主要就是 css 中的 list-style 屬性以及相關屬性內容。

​由於 list-style 屬性是簡寫形式,具體劃分為如下 3 普通屬性:

​list-style-type 屬性

list-style-image 屬性

list-style-position 屬性

css list-style-type 屬性用來設定列表元素的專案符號(編號/序號)。該屬性可以被應用在 元素、  ​

說明:以上簡寫形式

css list-style 屬性是乙個簡寫屬性,list-style-type 屬性、list-style-image 屬性和 list-style-position 屬性的值可以同時定義在 list-style 屬性中。

​如下示例**展示了 list-style 屬性的用法:

​ul

無序列表排版

用無序列表排版的一些問題 1.在div套ul時如果div的樣式沒有設寬度,那ul中margin設定就無法生效。div的樣式要設有寬度,內的ul樣式margin才生效 2.在建表項 li 時,預設為垂直排列,但有時會繼承上人樣式,而使其為水平排列。11 為使以垂直排列,應在il樣式中新增顯示為塊 di...

有序列表 無序列表 巢狀列表

無序列表 有序列表 coffee teamilk coffee teamilk 不同型別的有序列表 編號列表 bananas lemons oranges 大寫字母列表 bananas lemons oranges 小寫字母列表 bananas lemons oranges 羅馬數字列表 banan...

前端 13 無序列表

什麼是有序列表?有序列表的作用 給一堆資料新增列表語義,並且這一堆資料中所有的資料都有先後之分 有序列 式 其它用法和ul都差不多,也就是應用場景 注意點都和ul差不多 1.定義列表的作用 1.1給一堆資料新增列表語義 1.2先通過dt標籤定義列表中的所有標題,然後再通過dd標籤給每個標題新增描述資...