css如何玩轉有序無序列表項list樣式

2022-07-28 14:54:32 字數 2288 閱讀 3858

在無序列表ul>li中,無線列表的標誌是出現在各列表前面的圓點。在有序列表ol>li中,前面預設帶有數字,如何修改列表前面的專案符號,只需要通過list-style調整就好,常見的符號有(/*內容注釋部分*/)list-style-type:circle;/*空心圓*/list-style:none;/*去除標誌*/list-style:square;/*方塊*/list-style:upper-roman;/*羅馬數字*/list-style:lower-alpha;/*list-style-type:upper-alpha;大寫字母*/list-style-type: decimal;/*序號數字展示*/等!

1

doctype html

>

2<

html

lang

="en"

>

3<

head

>

4<

meta

charset

="utf-8"

>

5<

meta

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

6<

title

>css如何玩轉有序無序列表項list樣式

title

>

7<

style

type

="text/css"

>

8ul.box1

11.box1 li

20ul.box2

23ul.box3

26ul.box4

29ol.box5

34style

>

35head

>

36<

body

>

3738

<

ul class

="box1"

>

39<

li>abc

li>

40<

li>abc

li>

41<

li>abc

li>

42<

li>abc

li>

43<

li>abc

li>

44ul

>

45<

ul class

="box2"

>

46<

li>abc

li>

47<

li>abc

li>

48<

li>abc

li>

49<

li>abc

li>

50<

li>abc

li>

51ul

>

52<

ul class

="box3"

>

53<

li>abc

li>

54<

li>abc

li>

55<

li>abc

li>

56<

li>abc

li>

57<

li>abc

li>

58ul

>

59<

ul class

="box4"

>

60<

li>abc

li>

61<

li>abc

li>

62<

li>abc

li>

63<

li>abc

li>

64<

li>abc

li>

65ul

>

6667

<

ol class

="box5"

>

68<

li>abc

li>

69<

li>abc

li>

70<

li>abc

li>

71<

li>abc

li>

72<

li>abc

li>

73ol

>

74body

>

75html

>

無序列表排版

用無序列表排版的一些問題 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標籤給每個標題新增描述資...