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

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

代码整理自w3school：http://www.w3school.com.cn 

效果图：

示例代码：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta http-equiv="Content-Language" content="zh-cn"><title>CSS 列表样式</title>  <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>  <p>CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。</p>  <hr>    <h3>(一)设置列表的列表项标志：list-style-type</h3>  

• 苹果
• 橘子
• 香蕉

(二)设置自定义图标为列表的列表项标志：list-style-image

• 苹果
• 橘子
• 香蕉

(三)设置列表项标志的位置:list-style-position

(1)inside

• 苹果
• 橘子
• 香蕉

(2)outside

• 苹果
• 橘子
• 香蕉

(四)将以上3个列表样式属性合并为一个属性：list-style

• 苹果
• 橘子
• 香蕉