网页设计基础—列表问题

用列表实现“性能评估表”，效果图及素材见相册
正文长度小于30字符

img

img

img

img


箭头路径你自己改改，背景色和图片调对上就行了


<DOVTYPE html>
  <html lang="en">
  <head>
      <meta charset="utf-8">
      <title></title>
      <style>
          ul{
            list-style: none;
            padding: 0;
          }
          ul>.up{ 
            color: red; 
            background-color: rgb(254,238,238);
          }
          ul>.down{ 
            color: green; 
            background-color: rgb(245,254,211);
          }

          ul>li>i{
            width: 14px;
            height: 14px;
            margin: 0 10px;
            margin-bottom: -2px;
            display: inline-block;
            background-size: cover;
          }
          ul>.up>i{
            background-image: url(./up.jpg);
          }
          ul>.down>i{
            background-image: url(./down.jpg);
          }

          ul>li{
            height: 30px;
            font-size: 14px;
            line-height: 30px;
          }

          ul>li>span{
            padding-left: 5px;
            color: rgb(134, 141, 141);
          }
      </style>
  </head>

  <body>
    <ul>
      <li class="up"><i></i> 辉腾电子点火器 <span>+1.2万</span></li>
      <li class="down"><i></i> ATS电子点火器<span>-0.1万</span></li>
      <li class="up"><i></i> POLO电子点火器<span>+0.3万</span></li>
      <li class="down"><i></i> XT4电子点火器<span>-0.1万</span></li>
      <li class="up"><i></i> CRV电子点火器<span>+0.5万</span></li>
    </ul>
  </body>
</html>