h5 实现固定前三榜单

实现固定前三榜单的HTML5方法

使用HTML5和CSS可以轻松实现固定前三榜单的效果。以下是具体实现方式：

HTML结构

<div class="ranking-container">
  <div class="top-three">
    <div class="rank-item first">1. 第一名</div>
    <div class="rank-item second">2. 第二名</div>
    <div class="rank-item third">3. 第三名</div>
  </div>
  <div class="other-ranks">
    <div class="rank-item">4. 第四名</div>
    <div class="rank-item">5. 第五名</div>
    <!-- 更多排名项 -->
  </div>
</div>

CSS样式

.ranking-container {
  width: 300px;
  margin: 0 auto;
}

.top-three {
  position: sticky;
  top: 0;
  background: white;
  z-index: 100;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.rank-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.first {
  color: gold;
  font-weight: bold;
  font-size: 1.2em;
}

.second {
  color: silver;
  font-weight: bold;
}

.third {
  color: #cd7f32; /* 铜色 */
  font-weight: bold;
}

使用Flexbox布局优化显示效果

对于更美观的榜单显示，可以采用Flexbox布局：

.top-three {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 0;
}

.first {
  order: 1;
  background: linear-gradient(to right, gold, #fff);
}

.second {
  order: 2;
  background: linear-gradient(to right, silver, #fff);
}

.third {
  order: 3;
  background: linear-gradient(to right, #cd7f32, #fff);
}

添加滚动效果增强用户体验

为榜单添加平滑滚动效果，当用户滚动页面时前三名保持可见：

.ranking-container {
  height: 500px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.top-three {
  position: sticky;
  top: 0;
  padding: 15px 0;
}

响应式设计适配不同设备

确保榜单在不同设备上都能正常显示：

@media (max-width: 768px) {
  .ranking-container {
    width: 90%;
  }

  .rank-item {
    padding: 8px;
    font-size: 0.9em;
  }
}

动态数据绑定（JavaScript示例）

如果需要动态加载榜单数据：

const topThreeData = [
  { rank: 1, name: "第一名", score: 100 },
  { rank: 2, name: "第二名", score: 90 },
  { rank: 3, name: "第三名", score: 80 }
];

const topThreeContainer = document.querySelector('.top-three');
topThreeData.forEach(item => {
  const rankItem = document.createElement('div');
  rankItem.className = `rank-item ${getRankClass(item.rank)}`;
  rankItem.textContent = `${item.rank}. ${item.name} (${item.score}分)`;
  topThreeContainer.appendChild(rankItem);
});

function getRankClass(rank) {
  switch(rank) {
    case 1: return 'first';
    case 2: return 'second';
    case 3: return 'third';
    default: return '';
  }
}

以上方法组合使用HTML5、CSS和JavaScript，可以实现一个美观且功能完整的固定前三榜单效果，同时保证良好的用户体验和响应式设计。