SS列表屬性作用如下:
設(shè)置不同的列表項標(biāo)記為有序列表
設(shè)置不同的列表項標(biāo)記為無序列表
設(shè)置列表項標(biāo)記為圖像
列表
在HTML中,有兩種類型的列表:
無序列表 - 列表項標(biāo)記用特殊圖形(如小黑點、小方框等)
有序列表 - 列表項的標(biāo)記有數(shù)字或字母
使用CSS,可以列出進一步的樣式,并可用圖像作列表項標(biāo)記。
不同的列表項標(biāo)記
list-style-type屬性指定列表項標(biāo)記的類型是::
實例
ul.a{list-style-type:circle;}ul.b{list-style-type:square;}ol.c{list-style-type:upper-roman;}ol.d{list-style-type:lower-alpha;}
一些值是無序列表,以及有些是有序列表。
作為列表項標(biāo)記的圖像
要指定列表項標(biāo)記的圖像,使用列表樣式圖像屬性:
實例
ul{list-style-image:url('sqpurple.gif');}
上面的例子在所有瀏覽器中顯示并不相同,IE和Opera顯示圖像標(biāo)記比火狐,Chrome和Safari更高一點點。
如果你想在所有的瀏覽器放置同樣的形象標(biāo)志,就應(yīng)使用瀏覽器兼容性解決方案,過程如下
瀏覽器兼容性解決方案
同樣在所有的瀏覽器,下面的例子會顯示的圖像標(biāo)記:
實例
ul{list-style-type:none;padding:0px;margin:0px;}ulli{background-image:url(sqpurple.gif);background-repeat:no-repeat;background-position:0px5px;padding-left:14px;}
例子解釋:
ul:
設(shè)置列表樣式類型為沒有刪除列表項標(biāo)記
設(shè)置填充和邊距0px(瀏覽器兼容性)
ul中所有l(wèi)i:
設(shè)置圖像的URL,并設(shè)置它只顯示一次(無重復(fù))
您需要的定位圖像位置(左0px和上下5px)
用padding-left屬性把文本置于列表中
列表 -縮寫屬性
在單個屬性中可以指定所有的列表屬性。這就是所謂的縮寫屬性。
為列表使用縮寫屬性,列表樣式屬性設(shè)置如下:
實例
ul{list-style:squareurl("sqpurple.gif");}
如果使用縮寫屬性值的順序是:
list-style-type
list-style-position (有關(guān)說明,請參見下面的CSS屬性表)
list-style-image
如果上述值丟失一個,其余仍在指定的順序,就沒關(guān)系。
所有的CSS列表屬性
屬性 | 描述 |
---|---|
list-style | 簡寫屬性。用于把所有用于列表的屬性設(shè)置于一個聲明中 |
list-style-image | 將圖象設(shè)置為列表項標(biāo)志。 |
list-style-position | 設(shè)置列表中列表項標(biāo)志的位置。 |
list-style-type | 設(shè)置列表項標(biāo)志的類型。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
標(biāo)
列表在網(wǎng)頁里使用的頻率非常高,對于新聞類的網(wǎng)站來說,就是百分百的使用。列表的前頭一般都是阿拉伯?dāng)?shù)字,作為列表的順序。
當(dāng)然,列表項的前綴是不止阿拉伯?dāng)?shù)字,還有小圓點'●'、正方形'■'等等,這些都是自帶的樣式。如果你還不滿意,還可以自定義前綴。
各種類型的列表符號
無論是有序列表,還是無序列表,都統(tǒng)一使用list-style-type屬性來定義列表項符號。
語法:list-style-type:屬性值;
有序列表自帶的符號,都是跟順序有關(guān)。
屬性值
更換了前綴的有序列表如下
更換效果
無序列表自帶的符號,都是小圖標(biāo),跟順序沒關(guān)系
屬性值
更換了前綴的無序列表如下
更換效果
雖然列表項有自帶樣式,但很多時候都不是我們想要的效果,就可以使用自定義符號。通過list-style-image:url(圖像地址)來設(shè)置。
語法:list-style-image:url(圖像地址);
自定義列表項符號,實際上就是列表項符號改為一張圖片
注意圖片的尺寸要把握好,是無法修改大小
代碼設(shè)置如下
設(shè)置圖片
自定義前綴的列表效果如下
自定義列表符號
list-style-type屬性,實際上更多的使用在取消符號上,幾乎能用到都是在這一點上
幾乎所有的前端框架,在重置樣式的時候,都是使用這個來取消列表項的默認(rèn)符號
語法:list-style-type:none;
新聞類網(wǎng)站,都會有部分列表項是沒有前綴符號
空白列表符號
望收藏了我寫的文章的你同時可以關(guān)注一下“小海前端”,因為這些文章都是連載的,并且是經(jīng)過我系統(tǒng)的歸納過的。
【技術(shù)等級】初級
【承接文章】《CSS實現(xiàn)圖片精靈,原來要這樣使用背景屬性,前端設(shè)計師必備知識》
本文小海老師為大家講解利用CSS處理HTML中的列表,也就是CSS有關(guān)列表的屬性。本文屬于前端開發(fā)的初級教程,適合于剛剛開始接觸CSS技術(shù)的學(xué)習(xí)者。
列表屬性是指可以對HTML中的<ol></ol>標(biāo)記對和<ul></ul>標(biāo)記對進行樣式設(shè)置的屬性。這一組CSS屬性包括以下三個:
list-style-type
list-style-image
list-style-position
一、設(shè)置列表的項目符號或編號:
CSS技術(shù)使用 list-style-type 設(shè)置列表的項目符號或編號
在HTML中,主要操作的列表有兩種:
無序列表:用<ul></ul>標(biāo)記對實現(xiàn)。無序列表項中左側(cè)的標(biāo)識我們把它稱為“項目符號”。
有序列表:用<ol></ol>標(biāo)記對實現(xiàn)。有序列表項中左側(cè)的標(biāo)識我們把它稱為“編號”。
有序列表與無序列表
CSS技術(shù)利用 list-style-type 屬性來設(shè)置HTML列表左側(cè)標(biāo)識的樣式。并且在CSS看來,<ul></ul>和<ol></ol>兩個標(biāo)記對不再進行有序和無序的區(qū)分,使用list-style-type屬性設(shè)置為哪個取值,就是對應(yīng)的哪種列表。
該屬性包括以下幾種取值:
none,列表項無標(biāo)記。
disc,默認(rèn)值,標(biāo)記為實心圓。
circle,標(biāo)記為空心圓。
square,標(biāo)記為實心方塊。
decimal,標(biāo)記為數(shù)字。
decimal-leading-zero,標(biāo)記為0開頭的數(shù)字(01、02、03 等)。
lower-roman,標(biāo)記為小寫羅馬數(shù)字(i、ii、iii等)。
upper-roman,標(biāo)記為大寫羅馬數(shù)字(I、II、III等)。
lower-alpha,標(biāo)記為小寫英文字母(a、b、c等)。
upper-alpha,標(biāo)記為大寫英文字母(A、B、C等)。
二、使用自定義圖片來代替項目符號和編號:
CSS技術(shù)利用 list-style-image 屬性來設(shè)置列表左側(cè)的標(biāo)識為指定的圖片
CSS技術(shù)利用 list-style-image 屬性來設(shè)置列表左側(cè)的標(biāo)識為指定的圖片。
格式:list-style-image:url(Image_URL);
例如:ul{list-style-image:url(../images/01.jpg);}
三、設(shè)置列表中列表項的縮進:
CSS技術(shù)利用 list-style-position 屬性來設(shè)置列表項的縮進
CSS技術(shù)利用 list-style-position 屬性來設(shè)置列表項的縮進。
該屬性包括以下兩種取值:
loutside,默認(rèn)值,列表項不縮進。
linside,列表項縮進。
這個屬性使用在列表項<li></li>標(biāo)記對上的,不能用在<ol></ol>或<ul></ul>之上。
下一篇文章中,小海老師會繼續(xù)為大家向下講解CSS屬性,下一次我們講解CSS中最為重要的一組屬性:定位屬性。這是CSS中非常常用的一組屬性,希望大家千萬不要錯過!
如果大家希望得到更加全面的關(guān)于HTML和CSS技術(shù)講解的內(nèi)容,可以私信我,我會免費將小海老師自己編寫的HTML和CSS的PDF教材發(fā)給你,幫助你在前端開發(fā)的道路上闊步前行。
在頭條上發(fā)表的這些文章都是從前端開發(fā)的基礎(chǔ)開始一步一步講起的。我非常希望能有更多的前端開發(fā)初學(xué)者通過我寫的文章,逐步學(xué)到一定的知識,甚至慢慢有了入門的感覺。這些文章都是我這幾年教學(xué)過程中的經(jīng)驗,每寫一篇時我都盡量把握好措辭,用簡單易懂的語言描述,同時精心設(shè)計版面,讓版面更加豐富,激發(fā)閱讀興趣。所以,每一篇文章可能篇幅不長,但是都要耗費小海老師很久的時間。
希望收藏了我寫的文章的你同時可以關(guān)注一下“小海前端”,因為這些文章都是連載的,并且是經(jīng)過我系統(tǒng)的歸納過的。
關(guān)注“小海前端”,我會繼續(xù)為大家奉上更加深入的前端開發(fā)文章,也希望更多的初學(xué)者跟著學(xué)下去,我們共同將前端開發(fā)的路努力堅持的走下去。
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。