CSS：列表样式（设置列表项的标志图案/位置）

今天药忘吃喽~ 2021-10-23 08:17 783阅读 0赞

通过CSS 列表属性能够放置、改变列表项标志。或者将图像作为列表项标志。

代码整理自w3school：[http://www.w3school.com.cn   
][http_www.w3school.com.cn_]

效果图：

![20141211172831111][]

演示样例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="zh-cn" />
    
    <title>CSS 列表样式</title>
    
    <head>
      <style type="text/css">
        body {background-color:#eaeaea}
        h3 {display:inline;}
        ul.squareType {list-style-type:square}
        ul.imageStyle {list-style-image:url(images/red_icon.png);}
        ul.defPositionInside {list-style-position:inside}
        ul.defPositionOutside {list-style-position:outside}
    
        /*设置list-style-image之后，list-style-type将无效。*/
        ul.defStyle {list-style:url(images/red_icon.png) square inside}  
      </style>
    </head>
    
    <body>
      <p>CSS 列表属性同意你放置、改变列表项标志，或者将图像作为列表项标志。

</p> <hr/> <h3>(一)设置列表的列表项标志：list-style-type</h3> <ul class="squareType"> <li>苹果</li> <li>橘子</li> <li>香蕉</li> </ul> <h3>(二)设置自己定义图标为列表的列表项标志：list-style-image</h3> <ul class="imageStyle"> <li>苹果</li> <li>橘子</li> <li>香蕉</li> </ul> <h3>(三)设置列表项标志的位置:list-style-position</h3> <h4>(1)inside</h4> <ul class="defPositionInside"> <li>苹果</li> <li>橘子</li> <li>香蕉</li> </ul> <h4>(2)outside</h4> <ul class="defPositionOutside"> <li>苹果</li> <li>橘子</li> <li>香蕉</li> </ul> <h3>(四)将以上3个列表样式属性合并为一个属性：list-style</h3> <ul class="defStyle"> <li>苹果</li> <li>橘子</li> <li>香蕉</li> </ul> </body> </html>

转载于:https://www.cnblogs.com/jzssuanfa/p/6723931.html

[http_www.w3school.com.cn_]: http://www.w3school.com.cn
[20141211172831111]: /images/20211023/d9a8ab8306c4466c8c472ebf4d7a0111.png?