CSS之列表標籤

2022-03-18 00:27:59 字數 3994 閱讀 9060

無序列表,用來表示乙個列表的語義,並且每個專案和每個專案之間,是不分先後的。

ul就是英語unorderedlist,「無序列表」的意思。

li 就是英語listitem , 「列表項」的意思。

1               

也就是說,所以的li不能單獨存在,必須包裹在ul裡面;反過來說,ul的「兒子」不能是別的東西,只能有li

下面的是錯誤的,因為必須用ul包裹:

7                北京

8                         上海

9                         廣州

10                       鐵嶺

下面的也是錯誤的,因為ul裡面只能有li標籤,而不能有別的:

1               

瀏覽器會預設的給無序列表小圓點的「先導符號」

但是,再次強調,ul的作用,並不是給文字增加小圓點的,而是增加無序列表的「語義」的

ul標籤實際應用場景:

ul的兒子,只能是li。但是li是乙個容器級標籤,li裡面什麼都能放,比如:

1

甚至於可以再放乙個ul:

1       

27

28

4                        

5                        

6                                 用的

7                                

11                      

12                      

13                               喝的

14                              

18                      

19             

orderedlist  有序列表,用ol表示

1               

2                         小蘋果

3                         月亮之上

4                         最炫民族風

5               

瀏覽器會自動增加阿拉伯序號:

也就是說,ol和ul就是語義不一樣,怎麼使用都是一樣的。

ol裡面只能有li,li必須被ol包裹。li是容器級。

1       

定義列表也是乙個組標籤,不過比較複雜,出現了三個標籤:

dl表示definition list            定義列表

dt表示definition title              定義標題

dd表示definition description       定義表述詞兒

dt、dd只能在dl裡面;dl裡面只能有dt、dd

1               

2北京

3國家首都,政治文化中心

4上海

5魔都,有外灘、東方明珠塔、黃浦江

6廣州

7中國南大門,有珠江、小蠻腰

8               

表達的語義是兩層:

1) 是乙個列表,列出了北京、上海、廣州三個專案

2)每乙個詞兒都有自己的描述項。

dd是描述dt的。

定義列表用法非常靈活,可以乙個dt配很多dd:

1               

2                         北京

3                         國家首都,政治文化中心

4                         汙染很嚴重,pm2.0天天報表

5                         上海

6                         魔都,有外灘、東方明珠塔、黃浦江

7                         廣州

8                         中國南大門,有珠江、小蠻腰

9               

北京這個專案,用了兩個dd來描述。

還可以拆開,讓每乙個dl裡面只有乙個dt和dd,這樣子感覺清晰一些。

1               

2                         北京

3                         國家首都,政治文化中心

4                         汙染很嚴重,pm2.0天天報表

5               

6         

7               

8                         上海

9                         魔都,有外灘、東方明珠塔、黃浦江

10             

11       

12             

13                       廣州

14                       中國南大門,有珠江、小蠻腰

15             

真實案例:

結構:1       

2                購物指南

3               

4                         購物流程

5                         會員介紹

6                         生活旅行/**

7                         常見問題

8                         大家電

9                         聯絡客服

10             

11     

12     

13              配送方式

14             

15                       上門自提

16                       211限時達

17                       配送服務查詢

18                       配送費收取標準

19                       海外配送

20             

21     

CSS學習之 列表

1 列表型別 語法 li 屬性值列表值描述 none 無標記。disc 預設。標記是實心圓。circle 標記是空心圓。square 標記是實心方塊。decimal 標記是數字。decimal leading zero 0開頭的數字標記。01,02,03,等。lower roman 小寫羅馬數字 i...

python之列表操作

列表操作功能彙總 print 列表操作功能彙總 list demo first second thrid fourth 複製list demo列表取名list list list demo print 原列表為 list print print 輸出列表第乙個元素 list 0 print 輸出列表...

HTML資料之列表

無序列表 格式 type 無序列表前的標記 square 小方塊 disc 實心小圓圈,預設 circle 空心小圓圈 注 一般設定列表樣式,不直接在type屬性中設定,都是通過css來設定。示例 type square 紙上得來終覺淺li 絕知此事要躬行li ul 效果圖 有序列表 格式 列表項 ...