本篇內(nèi)容介紹了“css中怎么玩轉(zhuǎn)有序/無(wú)序列表項(xiàng)list樣式”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),黃岡企業(yè)網(wǎng)站建設(shè),黃岡品牌網(wǎng)站建設(shè),網(wǎng)站定制,黃岡網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,黃岡網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力??沙浞譂M(mǎn)足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專(zhuān)業(yè)、時(shí)尚、前沿,時(shí)刻以成就客戶(hù)成長(zhǎng)自我,堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
在無(wú)序列表ul>li中,無(wú)線(xiàn)列表的標(biāo)志是出現(xiàn)在各列表前面的圓點(diǎn)。在有序列表ol>li中,前面默認(rèn)帶有數(shù)字,如何修改列表前面的項(xiàng)目符號(hào),只需要通過(guò)list-style調(diào)整就好,常見(jiàn)的符號(hào)有(/內(nèi)容注釋部分/)list-style-type:circle;/空心圓/list-style:none;/去除標(biāo)志/list-style:square;/方塊/list-style:upper-roman;/羅馬數(shù)字/list-style:lower-alpha;/list-style-type:upper-alpha;大寫(xiě)字母/list-style-type: decimal;/序號(hào)數(shù)字展示/等!
1
2
3
4
5
6
7
8 ul.box1{
9 list-style-type:circle;/*空心圓*/
10 }
11 .box1 li{
12 list-style:none;/*去除標(biāo)志*/
13 background-image: url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png");/*圖文結(jié)合,列表前面添加圖片*/
14 height: 50px;
15 background-repeat: no-repeat;
16 background-size: 20px;
17 /*設(shè)置背景圖片大小。圖片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同時(shí)縮放到元素的可用空間的尺寸。*/
18 padding: 0px 25px 10px;/*調(diào)整內(nèi)邊距 上 左右 下*/
19 }
20 ul.box2{
21 list-style:square;/*方塊*/
22 }
23 ul.box3{
24 list-style:upper-roman;/*羅馬數(shù)字*/
25 }
26 ul.box4{
27 list-style:lower-alpha;/*list-style-type:upper-alpha;大寫(xiě)字母*/
28 }
29 ol.box5{
30 list-style: none;
31 list-style:upper-alpha;
32 color: indianred;
33 }
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
“css中怎么玩轉(zhuǎn)有序/無(wú)序列表項(xiàng)list樣式”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!