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

    效果图：

    示例代码：

    1.  
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    2.  
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3.  
       
    4.  
      <html>
    5.  
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    6.  
      <meta http-equiv="Content-Language" content="zh-cn" />
    7.  
       
    8.  
      <title>CSS 列表样式</title>
    9.  
       
    10.  
      <head>
    11.  
      <style type="text/css">
    12.  
      body {background-color:#eaeaea}
    13.  
      h3 {display:inline;}
    14.  
      ul.squareType {list-style-type:square}
    15.  
      ul.imageStyle {list-style-image:url(images/red_icon.png);}
    16.  
      ul.defPositionInside {list-style-position:inside}
    17.  
      ul.defPositionOutside {list-style-position:outside}
    18.  
       
    19.  
      /*设置list-style-image之后，list-style-type将无效。*/
    20.  
      ul.defStyle {list-style:url(images/red_icon.png) square inside}
    21.  
      </style>
    22.  
      </head>
    23.  
       
    24.  
      <body>
    25.  
      <p>CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。</p>
    26.  
      <hr/>
    27.  
       
    28.  
      <h3>(一)设置列表的列表项标志：list-style-type</h3>
    29.  
      <ul class="squareType">
    30.  
      <li>苹果</li>
    31.  
      <li>橘子</li>
    32.  
      <li>香蕉</li>
    33.  
      </ul>
    34.  
       
    35.  
      <h3>(二)设置自定义图标为列表的列表项标志：list-style-image</h3>
    36.  
      <ul class="imageStyle">
    37.  
      <li>苹果</li>
    38.  
      <li>橘子</li>
    39.  
      <li>香蕉</li>
    40.  
      </ul>
    41.  
       
    42.  
      <h3>(三)设置列表项标志的位置:list-style-position</h3>
    43.  
      <h4>(1)inside</h4>
    44.  
      <ul class="defPositionInside">
    45.  
      <li>苹果</li>
    46.  
      <li>橘子</li>
    47.  
      <li>香蕉</li>
    48.  
      </ul>
    49.  
       
    50.  
      <h4>(2)outside</h4>
    51.  
      <ul class="defPositionOutside">
    52.  
      <li>苹果</li>
    53.  
      <li>橘子</li>
    54.  
      <li>香蕉</li>
    55.  
      </ul>
    56.  
       
    57.  
      <h3>(四)将以上3个列表样式属性合并为一个属性：list-style</h3>
    58.  
      <ul class="defStyle">
    59.  
      <li>苹果</li>
    60.  
      <li>橘子</li>
    61.  
      <li>香蕉</li>
    62.  
      </ul>
    63.  
       
    64.  
      </body>
    65.  
       
    66.  
      </html>

    67.  

    原文：https://blog.csdn.net/books1958/article/details/41869665
  • 相关阅读:
    The Dos and Don'ts for Ceph for OpenStack
    fio测试ceph的filestore
    yum安装Ceph指定Jewel版本
    处理stale的pg
    预估Ceph集群恢复时间
    python编码（二）
    python编码（一）
    删除重复的feature vba VS 删除重复的feature python
    新浪微博mid和url的互算
    用python实现各种排序算法
  • 原文地址：https://www.cnblogs.com/smuwgeg/p/9538072.html
Copyright © 2020-2023  润新知