整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          CSS 列表樣式

          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)

          • 設(shè)置自帶的符號樣式
          • 用圖片設(shè)置符號樣式
          • 取消符號


          列表在網(wǎng)頁里使用的頻率非常高,對于新聞類的網(wǎng)站來說,就是百分百的使用。列表的前頭一般都是阿拉伯?dāng)?shù)字,作為列表的順序。

          當(dāng)然,列表項的前綴是不止阿拉伯?dāng)?shù)字,還有小圓點'●'、正方形'■'等等,這些都是自帶的樣式。如果你還不滿意,還可以自定義前綴。

          各種類型的列表符號


          設(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)站,都會有部分列表項是沒有前綴符號

          空白列表符號


          總結(jié)

          望收藏了我寫的文章的你同時可以關(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>之上。

          文章預(yù)告

          下一篇文章中,小海老師會繼續(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ā)的路努力堅持的走下去。


          主站蜘蛛池模板: 丰满爆乳无码一区二区三区| 日本精品啪啪一区二区三区| 精品国产一区二区三区四区 | 国产高清视频一区二区| 在线视频亚洲一区| 亚洲熟妇av一区二区三区 | 亚洲美女视频一区| 亚洲日韩AV一区二区三区四区| 精品国产一区二区二三区在线观看| 精品视频在线观看一区二区三区| 久久国产香蕉一区精品| 精品性影院一区二区三区内射| 日韩一区二区三区射精| 久久精品国产一区二区电影| 日韩一区二区在线观看视频| 日本一区二区三区在线观看视频| 中文字幕一区日韩在线视频| 亚洲欧洲专线一区| 一区二区三区影院| 少妇人妻精品一区二区| 高清国产精品人妻一区二区| 国产精品久久久久一区二区三区 | 亚洲一区二区三区成人网站 | 久久精品日韩一区国产二区 | 亚洲一区二区三区免费在线观看 | 国产一区二区精品久久凹凸| 日韩一区二区三区射精| 日本不卡一区二区三区视频| 日韩精品免费一区二区三区| 亚洲国产精品自在线一区二区 | 伊人久久精品无码av一区| 成人免费一区二区三区在线观看| 一区二区三区人妻无码| 国产一区二区三区福利| 无码国产精品久久一区免费| 人妻天天爽夜夜爽一区二区| 成人国内精品久久久久一区| 国产视频一区二区在线观看| 99精品一区二区三区无码吞精| 日本免费一区二区久久人人澡| 无码人妻精品一区二区蜜桃百度|