如何修改列表項(xiàng)li、ul前的圓點(diǎn)小方塊.doc

如何修改列表項(xiàng)li、ul前的圓點(diǎn)小方塊解決思路： 在HTML中沒(méi)有相應(yīng)的屬性可以設(shè)置該效果，但在CSS中可以，相應(yīng)的屬性為list-style-type，要把圓點(diǎn)改成實(shí)心方塊解決思路： 在HTML中沒(méi)有相應(yīng)的屬性可以設(shè)置該效果，但在CSS中可以，相應(yīng)的屬性為list-style-type，要把圓點(diǎn)改成實(shí)心方塊，只需要設(shè)置list-style-type的值為square。 具體步驟： 代碼示例： ul lilist1 lilist2 lilist3 lilist4 /ul 技巧：想必大家都注意到，列表項(xiàng)離左邊有很大一段距離，利用前面學(xué)過(guò)的知識(shí)，設(shè)置margin-left屬性就行了： ul lilist1 lilist2 lilist3 lilist4 /ul 另外，如果要把小黑點(diǎn)換成自定義圖片，可以用list-style-image，用法： list-style-image:url 提示：對(duì)于列表項(xiàng)目，還有一個(gè)list-style-position屬性可以定義，主要用于設(shè)置列表項(xiàng)前的符號(hào)根據(jù)列表文字的排列方式，對(duì)應(yīng)的腳本特性為listStylePosition。可選值的說(shuō)明 outside 列表項(xiàng)目符號(hào)在文本以外，文本不根據(jù)標(biāo)記對(duì)齊。 inside 列表項(xiàng)目符號(hào)在文本以內(nèi)，文本根據(jù)標(biāo)記對(duì)齊。 特別提示 本例代碼運(yùn)行效果如圖2.1.6.9所示，原本為實(shí)心圓點(diǎn)的列表符號(hào)現(xiàn)在已經(jīng)變成了實(shí)心方塊。 圖2.1.6.9自定義列表項(xiàng)前的符號(hào) 特別說(shuō)明 list-style-type屬性用于設(shè)置列表項(xiàng)目前的符號(hào)，對(duì)應(yīng)的腳本特性為listStyType，可選值及說(shuō)明如表2.1.6.1所示。list-style-image屬性用于設(shè)置列表項(xiàng)目前的自定義圖片，對(duì)應(yīng)的腳本特性為listStyleImage。如果同時(shí)設(shè)置list-style-image和list-style-type，則list-style-type屬性將被忽略，除非list-style-image的值設(shè)置為none或指定的圖片不可用，list-style-type才有作用。list-style-type、list-style-position和list-style-image的復(fù)合屬性為list-style。 表2.1.6.1list-style-type屬性的可選值 可選值說(shuō)明 none不使用項(xiàng)目符號(hào) disc實(shí)心圓，默認(rèn)值 circle空心圓 square實(shí)心方塊 decimal阿拉伯?dāng)?shù)字 lower-roman小寫(xiě)羅馬數(shù)