Css 列表的樣式的控制

2021-04-19 07:01:35 字數 1500 閱讀 7179

列表是html裡一種很有用的顯示方式,可以把相關的並列內容整齊地垂直排列,使網頁顯得整潔專業,並讓瀏覽者有一目了然的感覺。

樣式表為列表增加了一些功能,控制列表的樣式包括列表樣式、圖形符號、列表位置三個部分。

1.列表符號

列表符號是指顯示於每乙個列表專案前的符號標識。

基本格式如下:

list-style-type:引數

引數取值範圍:

·disc:圓形

·circle:空心圓

·square:方塊

·decimal:十進位制數字

·lower-roman:小寫羅馬數字

·upper-roman:大寫羅馬數字

·lower-alpha:小寫希臘字母

·upper-alpha:大寫希臘字母

·none:無符號顯示

引數中的disc是預設選項。

2.圖形符號

圖形符號指原來列表的專案符號將可以使用圖形來代替。

基本格式如下:

list-style-image:url

url是用來代替專案符號的圖形檔案的位址,可以使用相對位址或絕對位址。

3.列表位置

列表位置描述列表在何處顯示。

基本格式如下:

list-style-position:引數

引數取值範圍:

·inside:在box模型內部顯示

·outside:在box模型外部顯示

這裡又出現了乙個新的概念:box模型。box是指一種容器,包含了應用樣式規則的物件,具體介紹將在後文中給出。

使用無序列表:即ul

看乙個最簡單的例子:

這是乙個未加修飾的縱向列表

1:設定列表的邊界

#base

html中這樣寫,就會呈現乙個帶邊框的無序列表

2:設定列表的影象可以設定列表的樣式為左邊帶乙個影象,

樣式如下:

ul disc表示實心的圓,

list-style-image表示列表用到的小影象,如果這個影象的url不正確時,disc才會起作用,inside表示列表是在區塊內部的。

3:如何在段落中使用列表樣式如下:

#inline-list

#inline-list p

#inline-list ul, #inline-list li

4:水平導航

#h-contain

#pipe ul

#pipe ul li

#pipe ul li.first

#h-contain定乙個乙個邊界為1的區塊,水平導航用的也是inline方式,

li.first定義第乙個列表元素沒有左邊那個象素為1的border。

下面的樣式是tab方式的水平導航:

#tabs ul

#tabs ul li

#tabs ul li.here

li的class如果為here,則是選中的

css列表樣式

css列表樣式 1.list style type 設定列表項標誌的型別 1 無序列表 none 無標記 去除預設的圓點 disc 實心的圓點,circle 空心的圓點,square實心的方塊 2 有序列表 none 無標記,decimal 從1開始的整數,lower roman小寫羅馬數字,upp...

CSS字型樣式,背景樣式,列表樣式

1.color 字型顏色 2.font size 字型大小 盡量用偶數 3.font family 字型型號 可以設定多個字型,用,隔開,優先使用第乙個字型,如果沒有使用下乙個。中文字型加引號,英文本型如果有空格 則也要加引號 線上字型 font face 4.font style 字型樣式 斜體等...

CSS列表樣式屬性

list style 這個屬性是設定列表樣式的乙個快捷的綜合寫法。用這個屬性可以同時設值列表樣式型別屬性 list style type 列表樣式位置屬性 list style position 和列表樣式屬性 list style image 示例 如下 ul list style type 列表...