在排行榜上名列前茅

echo in the leaderboard

本文关键字：名列前茅 排行榜      更新时间：2023-09-26

我有一个排行榜，代码如下:

/*--------------------
Body
--------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  min-height: 450px;
  height: 100vh;
  margin: 0;  
  background: radial-gradient(ellipse farthest-corner at center top, #f39264 0%, #f2606f 100%);
  color: #fff;
  font-family: 'Open Sans', sans-serif;  
}
/*--------------------
Leaderboard
--------------------*/
.leaderboard {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 285px;
  height: 308px;
  background: linear-gradient(to bottom, #3a404d, #181c26);
  border-radius: 10px;
  box-shadow: 0 7px 30px rgba(62, 9, 11, .3);
  h1 {
    font-size: 18px;
    color: #e1e1e1;
    padding: 12px 13px 18px;
    & svg {
      width: 25px;
      height: 26px;
      position: relative;
      top: 3px;
      margin-right: 6px;
      vertical-align: baseline;
    }
  }
  ol {
    counter-reset: leaderboard;
    li {
      position: relative;
      z-index: 1;
      font-size: 14px;
      counter-increment: leaderboard;
      padding: 18px 10px 18px 50px;
      cursor: pointer;
      backface-visibility: hidden;
      transform: translateZ(0) scale(1.0, 1.0);
      &::before {
        content: counter(leaderboard);
        position: absolute;
        z-index: 2;
        top: 15px;
        left: 15px;
        width: 20px;
        height: 20px;
        line-height: 20px;
        color: #c24448;
        background: #fff;
        border-radius: 20px;
        text-align: center;
      }
      mark {
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 18px 10px 18px 50px;
        margin: 0;
        background: none;
        color: #fff;
        &::before, &::after {
          content: '';
          position: absolute;
          z-index: 1;
          bottom: -11px;
          left: -9px;
          border-top: 10px solid #c24448;
          border-left: 10px solid transparent;
          transition: all .1s ease-in-out;
          opacity: 0;
        }
        &::after {
          left: auto;
          right: -9px;
          border-left: none;
          border-right: 10px solid transparent;
        }
      }
      small {
        position: relative;
        z-index: 2;
        display: block;
        text-align: right;
      }
      &::after {
        content: '';
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fa6855;
        box-shadow: 0 3px 0 rgba(0, 0, 0, .08);
        // transform: scaleX(1.06) scaleY(1.03);
        transition: all .3s ease-in-out;
        opacity: 0;
      }
      &:nth-child(1) {
        background: #fa6855;
        &::after {
          background: #fa6855;
        }
      }
      &:nth-child(2) {
        background: #e0574f;
        &::after {
          background: #e0574f;
          box-shadow: 0 2px 0 rgba(0, 0, 0, .08);
        }
        & mark {
          &::before, &::after {
            border-top: 6px solid #ba4741;
            bottom: -7px;
          }
        }
      }
      &:nth-child(3) {
        background: #d7514d;
        &::after {
          background: #d7514d;
          box-shadow: 0 1px 0 rgba(0, 0, 0, .11);
        }
        & mark {
          &::before, &::after {
            border-top: 2px solid #b0433f;
            bottom: -3px;
          }
        }
      }
      &:nth-child(4) {
        background: #cd4b4b;
        &::after {
          background: #cd4b4b;
          box-shadow: 0 -1px 0 rgba(0, 0, 0, .15);
        }
        & mark {
          &::before, &::after {
            top: -7px;
            bottom: auto;
            border-top: none;
            border-bottom: 6px solid #a63d3d;;
          }
        }
      }
      &:nth-child(5) {
        background: #c24448;
        border-radius: 0 0 10px 10px;
        &::after {
          background: #c24448;
          box-shadow: 0 -2.5px 0 rgba(0, 0, 0, .12);
          border-radius: 0 0 10px 10px;
        }
        & mark {
          &::before, &::after {
            top: -9px;
            bottom: auto;
            border-top: none;
            border-bottom: 8px solid #993639;
          }
        }
      }
    }
    // hover
    li:hover {
      z-index: 2;
      overflow: visible;
      &::after {
        opacity: 1;
        transform: scaleX(1.06) scaleY(1.03);
      }
      & mark {
        &::before, &::after {
          opacity: 1;
          transition: all .35s ease-in-out;
        }
      }
    }
  }
}
* {
  //display: none;
}
<div class="leaderboard">
  <h1>
    <svg class="ico-cup">
      <use xlink:href="#cup"></use>
    </svg>
    Most active Players
  </h1>
  <ol>
    <li>
      <mark>Jerry Wood</mark>
      <small>315</small>
    </li>
    <li>
      <mark>Brandon Barnes</mark>
      <small>301</small>
    </li>
    <li>
      <mark>Raymond Knight</mark>
      <small>292</small>
    </li>
    <li>
      <mark>Trevor McCormick</mark>
      <small>245</small>
    </li>
    <li>
      <mark>Andrew Fox</mark>
      <small>203</small>
    </li>
  </ol>
</div>
<svg style="display: none;">
  <symbol id="cup" x="0px" y="0px"
	 width="25px" height="26px" viewBox="0 0 25 26" enable-background="new 0 0 25 26" xml:space="preserve">
<path fill="#F26856" d="M21.215,1.428c-0.744,0-1.438,0.213-2.024,0.579V0.865c0-0.478-0.394-0.865-0.88-0.865H6.69
	C6.204,0,5.81,0.387,5.81,0.865v1.142C5.224,1.641,4.53,1.428,3.785,1.428C1.698,1.428,0,3.097,0,5.148
	C0,7.2,1.698,8.869,3.785,8.869h1.453c0.315,0,0.572,0.252,0.572,0.562c0,0.311-0.257,0.563-0.572,0.563
	c-0.486,0-0.88,0.388-0.88,0.865c0,0.478,0.395,0.865,0.88,0.865c0.421,0,0.816-0.111,1.158-0.303
	c0.318,0.865,0.761,1.647,1.318,2.31c0.686,0.814,1.515,1.425,2.433,1.808c-0.04,0.487-0.154,1.349-0.481,2.191
	c-0.591,1.519-1.564,2.257-2.975,2.257H5.238c-0.486,0-0.88,0.388-0.88,0.865v4.283c0,0.478,0.395,0.865,0.88,0.865h14.525
	c0.485,0,0.88-0.388,0.88-0.865v-4.283c0-0.478-0.395-0.865-0.88-0.865h-1.452c-1.411,0-2.385-0.738-2.975-2.257
	c-0.328-0.843-0.441-1.704-0.482-2.191c0.918-0.383,1.748-0.993,2.434-1.808c0.557-0.663,1-1.445,1.318-2.31
	c0.342,0.192,0.736,0.303,1.157,0.303c0.486,0,0.88-0.387,0.88-0.865c0-0.478-0.394-0.865-0.88-0.865
	c-0.315,0-0.572-0.252-0.572-0.563c0-0.31,0.257-0.562,0.572-0.562h1.452C23.303,8.869,25,7.2,25,5.148
	C25,3.097,23.303,1.428,21.215,1.428z M5.238,7.138H3.785c-1.116,0-2.024-0.893-2.024-1.99c0-1.097,0.908-1.99,2.024-1.99
	c1.117,0,2.025,0.893,2.025,1.99v2.06C5.627,7.163,5.435,7.138,5.238,7.138z M18.883,21.717v2.553H6.118v-2.553H18.883
	L18.883,21.717z M13.673,18.301c0.248,0.65,0.566,1.214,0.947,1.686h-4.24c0.381-0.472,0.699-1.035,0.947-1.686
	c0.33-0.865,0.479-1.723,0.545-2.327c0.207,0.021,0.416,0.033,0.627,0.033c0.211,0,0.42-0.013,0.627-0.033
	C13.195,16.578,13.344,17.436,13.673,18.301z M12.5,14.276c-2.856,0-4.93-2.638-4.93-6.273V1.73h9.859v6.273
	C17.43,11.638,15.357,14.276,12.5,14.276z M21.215,7.138h-1.452c-0.197,0-0.39,0.024-0.572,0.07v-2.06
	c0-1.097,0.908-1.99,2.024-1.99c1.117,0,2.025,0.893,2.025,1.99C23.241,6.246,22.333,7.138,21.215,7.138z"/>
      </symbol>
</svg>

我已经写了php，并通过查询检索了前10名表演者。

我已经在变量中获取了查询结果。现在，我想在上述排行榜中回复前10名的变量。

在html中它是一个有序列表在哪里返回存储top10的变量

如果有的话，应该在html中修改什么?

请帮助。

必须遍历结果，如下所示:

<ol>
<?php foreach ($leaderboard as $key => $value) {?>
<li>
  <mark><?php echo $value['name']?></mark>
  <small><?php echo $value['score']?></small>
</li>
<?php }?>
</ol>

这只是一个例子。我不知道你的数据结构。如果您向我们提供查询返回的数据，那就更好了。

在html中实现只有一个简单echo的另一个变体是:

<?php
$leaderboardHtml = '';
foreach ($leaderboard as $key => $value) {
    $leaderboardHtml .= '
    <li>
        <mark>'.$value['name'].'</mark>
        <small>'.$value['score'].'</small>
    </li>';
}
?>
<ol>
<?php echo $leaderboardHtml;?>
</ol>
相关文章：