更新時間:2022年08月09日17時14分 來源:傳智教育 瀏覽次數(shù):
定義無序或有序列表時,可以通過標(biāo)記的屬性控制列表的項目符號,但是這種方式實現(xiàn)的效果只是經(jīng)典效果,難以適應(yīng)風(fēng)格各異的頁面效果。為此,CSS提供了4個列表樣式的屬性,本節(jié)將對這些屬性進(jìn)行詳細(xì)講解。
1. list-style-type屬性
在CSS中,list-style-type屬性用于控制列表項顯示符號的類型,其取值有多種,它們的顯示效果不同,具體如表所示。
注意:各個瀏覽器對list-style-type屬性的解析不同。因此,在實際網(wǎng)頁制作過程中不推薦使用list-style-type屬性。
2. list-style-image屬性
一些常規(guī)的列表項顯示符號并不能滿足網(wǎng)頁制作的需求,為此CSS提供了list-style-image屬性,其取值為圖像的url(地址)。使用list-style-image屬性可以為各個列表項設(shè)置項目圖像,使列表的樣式更加美觀。
3. list-style-position屬性
設(shè)置列表項目符號時,有時需要控制列表項目符號的位置,即列表項目符號相對于列表項內(nèi)容的位置。在CSS中,list-style-position屬性用于控制列表項目符號的位置,其取值有inside和outside兩種,對它們的解釋如下。
•inside:列表項目符號位于列表文本以內(nèi)。
•outside:列表項目符號位于列表文本以外(默認(rèn)值)。
4. list-style屬性
在CSS中列表樣式也是一個復(fù)合屬性,可以將列表相關(guān)的樣式都綜合定義在一個復(fù)合屬性list-style中。使用list-style屬性綜合設(shè)置列表樣式的語法格式如下:
list-style:列表項目符號列表項目符號的位置列表項目圖像;使用復(fù)合屬性list-style時,通常按上面語法格式中的順序書寫,各個樣式之間以空格隔開,不需要的樣式可以省略。
什么是ionic?ionic框架的主要結(jié)構(gòu)是怎樣的?
2022-07-28什么是箭頭函數(shù)?箭頭函數(shù)中this關(guān)鍵字的用法
2022-07-27const關(guān)鍵字是什么?let、const、var的區(qū)別
2022-07-27網(wǎng)絡(luò)協(xié)議與體系結(jié)構(gòu):網(wǎng)絡(luò)協(xié)議概述
2022-07-27移動Web開發(fā)基礎(chǔ):設(shè)備像素比是什么?
2022-07-25HTML&JS+前端課程再升級,五大核心優(yōu)勢打造全新V8.0版本課程
2022-07-18