通过HTML、CSS和/或Javascript对列表进行编号_Javascript_Html_Css_Html Lists

通过HTML、CSS和/或Javascript对列表进行编号

javascript html css

通过HTML、CSS和/或Javascript对列表进行编号,javascript,html,css,html-lists,Javascript,Html,Css,Html Lists,我需要实现这样的目标我猜图片需要存储在Javascript中包含图像链接的某种形式的数组中。但我不确定它是否可以在HTML和CSS中实现上有一个使用“：before”伪元素的解决方案，但是否有更易于跨浏览器使用的解决方案？您可以使用常规的并向每个列表项添加背景图像（红色圆圈）为什么还要使用图像： <style type="text/css"> body { background:#333; color:#FFF; font-size:14px;

我需要实现这样的目标

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

上有一个使用“：before”伪元素的解决方案，但是否有更易于跨浏览器使用的解决方案？

您可以使用常规的

并向每个列表项添加

背景图像（红色圆圈）
为什么还要使用图像：
 <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>


身体{
背景：#333；
颜色：#FFF；
字体大小：14px；
字体系列：Arial、Helvetica、无衬线字体；
}
.号码表{
列表样式类型：无；
边际：0px；
填充：0px；
}
李先生{
宽度：100%；
浮动：左；
边缘底部：10px；
线高：35px；
字体大小：16px；
}
.号码列表李.订单号{
背景：#900；
颜色：#FFF；
宽度：35px；
高度：35px；
文本对齐：居中；
线高：35px；
浮动：左；
右边距：15px；
-webkit边界半径：35px；
-moz边界半径：35px；
-ms边界半径：35px；
-边界半径：35px；
边界半径：35px；
}

1.
Lorem ipsum dolor sit amet，是一位杰出的献身者。在多洛的吕克图斯的耳垂上有一层粗的枕骨。这是一个很好的例子。佩伦茨克只不过是一个莫里斯·普雷蒂姆·索利西图丁（mauris pretium sollicitudin）。麦塞纳斯豆豉苏打水。


2.
Lorem ipsum dolor sit amet，是一位杰出的献身者。在多洛的吕克图斯的耳垂上有一层粗的枕骨。这是一个很好的例子。佩伦茨克只不过是一个莫里斯·普雷蒂姆·索利西图丁（mauris pretium sollicitudin）。麦塞纳斯豆豉苏打水。


3.
Lorem ipsum dolor sit amet，是一位杰出的献身者。在多洛的吕克图斯的耳垂上有一层粗的枕骨。这是一个很好的例子。佩伦茨克只不过是一个莫里斯·普雷蒂姆·索利西图丁（mauris pretium sollicitudin）。麦塞纳斯豆豉苏打水。


4.
Lorem ipsum dolor sit amet，是一位杰出的献身者。在多洛的吕克图斯的耳垂上有一层粗的枕骨。这是一个很好的例子。佩伦茨克只不过是一个莫里斯·普雷蒂姆·索利西图丁（mauris pretium sollicitudin）。麦塞纳斯豆豉苏打水。


IE8<中的人可以有一个正方形而不是圆形。。。似乎很合适
使用一个有序的列表并设计项目符号，也许？尝试以下答案：非常有用的链接^^谢谢！它是一个有序的列表，如果有什么的话，它是一个有序的列表。