Question

我需要实现这样的目标...

Numbered List

我猜这些图片需要以包含图片链接的Javascript格式存储在某种形式的数组中。但我不确定它是否只能在HTML和CSS中实现。

this question上有一个解决方案，它使用“：before”伪元素，但是有更多的跨浏览器友好解决方案吗？

Answer 1

您可以使用常规<ol>并为每个列表项添加background-image（红色圆圈）

Answer 2

为什么要使用图片：

 <style type="text/css">
   body {
    background:#333; 
    color:#FFF;
    font-size:14px;
    font-family:Arial, Helvetica, sans-serif;
   }
   .number-list {
      list-style-type:none;
      margin:0px;
      padding:0px;
   }
   .number-list li {
 width:100%;
 float:left;
 margin-bottom:10px;
 line-height:35px;
 font-size:16px;
   }
   .number-list li .order-number {
      background:#900;
      color:#FFF;
      width:35px;
      height:35px;
      text-align:center;
      line-height:35px; 
      float:left;
      margin-right:15px;
      -webkit-border-radius:35px;
         -moz-border-radius:35px;
          -ms-border-radius:35px;
      -border-radius:35px;
        border-radius:35px;
   }
  </style>
  </head>

  <body>

  <ol class="number-list">
      <li>
          <span class="order-number">1</span>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar velit in lectus suscipit elementum luctus in dolor. Fusce eu neque suscipit, egestas nisi et, aliquam est. Pellentesque ac justo a mauris pretium sollicitudin. Maecenas tempus sodales semper.
      </li>
      <li>
          <span class="order-number">2</span>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar velit in lectus suscipit elementum luctus in dolor. Fusce eu neque suscipit, egestas nisi et, aliquam est. Pellentesque ac justo a mauris pretium sollicitudin. Maecenas tempus sodales semper.
      </li>
      <li>
          <span class="order-number">3</span>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar velit in lectus suscipit elementum luctus in dolor. Fusce eu neque suscipit, egestas nisi et, aliquam est. Pellentesque ac justo a mauris pretium sollicitudin. Maecenas tempus sodales semper.
      </li>
      <li>
          <span class="order-number">4</span>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar velit in lectus suscipit elementum luctus in dolor. Fusce eu neque suscipit, egestas nisi et, aliquam est. Pellentesque ac justo a mauris pretium sollicitudin. Maecenas tempus sodales semper.
      </li>
  </ol>

IE 8中的人员＆lt;可以有一个正方形而不是一个圆形...似乎合适

通过HTML和CSS和/或Javascript编号列表

2 个答案: