皮特莱斯 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日

悬赏问题

  • ¥100 嵌入式系统基于PIC16F882和热敏电阻的数字温度计
  • ¥15 cmd cl 0x000007b
  • ¥20 BAPI_PR_CHANGE how to add account assignment information for service line
  • ¥500 火焰左右视图、视差（基于双目相机）
  • ¥100 set_link_state
  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统