皮特莱斯 2022-11-03 10:21 采纳率: 33.3%
浏览 37
已结题

网页设计基础—列表问题

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

img

img

img

  • 写回答

1条回答 默认 最新

  • 管那么多 2022-11-03 11:08
    关注

    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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 11月6日
  • 已采纳回答 11月3日
  • 创建了问题 11月3日

悬赏问题

  • ¥20 测距传感器数据手册i2c
  • ¥15 RPA正常跑，cmd输入cookies跑不出来
  • ¥15 求帮我调试一下freefem代码
  • ¥15 matlab代码解决，怎么运行
  • ¥15 R语言Rstudio突然无法启动
  • ¥15 关于#matlab#的问题：提取2个图像的变量作为另外一个图像像元的移动量，计算新的位置创建新的图像并提取第二个图像的变量到新的图像
  • ¥15 改算法，照着压缩包里边，参考其他代码封装的格式 写到main函数里
  • ¥15 用windows做服务的同志有吗
  • ¥60 求一个简单的网页(标签-安全|关键词-上传)
  • ¥35 lstm时间序列共享单车预测，loss值优化，参数优化算法