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

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

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

效果图：

演示样例代码：

</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>