HTML+CSS排行榜实现代码，复制粘贴可使用

news2025/2/23 2:38:53

在这里插入图片描述

如何用HTML和CSS创建一个具有吸引力的创作者排行榜

在数字化时代，排行榜是吸引用户注意的绝佳方式。无论是展示最受欢迎的产品、文章还是创作者，一个设计精良的排行榜都能提升用户的参与度和兴趣。本文将指导你如何使用HTML和CSS创建一个具有吸引力的创作者排行榜，包括为前三名添加鲜艳的颜色和圆形头像框。

1. HTML结构

首先，我们需要创建基本的HTML结构。这包括一个包含排行榜标题和列表的容器。

<div class="ranking-container">
    <h2 class="ranking-title">创作者排行</h2>
    <ul class="ranking-list">
        <!-- 排行榜列表项 -->
    </ul>
</div>

2. CSS样式

接下来，我们使用CSS来美化这个排行榜。这包括设置背景颜色、边框半径、阴影效果以及字体样式。

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

.ranking-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    margin: auto;
}

.ranking-title {
    text-align: center;
    font-size: 24px;
    color: #333;
}

.ranking-list {
    list-style: none;
    padding: 0;
}

.ranking-list li {
    border-bottom: 1px solid #eee;
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ranking-list li:last-child {
    border-bottom: none;
}

.ranking-position {
    color: #666;
    font-size: 22px;
    font-weight: bold;
}

.ranking-name {
    font-size: 18px;
    color: #333;
}

.ranking-value {
    font-size: 16px;
    color: #555;
}

3. 添加头像和颜色

为了使排行榜更具吸引力，我们将为每个列表项添加圆形头像，并为前三名添加鲜艳的颜色。

.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
}

.top-three {
    color: #ff6700; /* 鲜艳的颜色 */
}

HTML中，我们将头像图片插入到每个列表项中：

<li>
    <span class="ranking-position top-three">1</span>
    <div class="avatar"><img src="头像图片URL" alt="头像 1"></div>
    <span class="ranking-name">游山记</span>
    <span class="ranking-value">100万能力值</span>
</li>

4. 完整的HTML页面

将所有内容放在一起，我们得到一个完整的HTML页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创作者排行</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="ranking-container">
        <h2 class="ranking-title">创作者排行</h2>
        <ul class="ranking-list">
            <li>
                <span class="ranking-position top-three">1</span>
                <div class="avatar"><img src="https://example.com/avatar1.png" alt="头像 1"></div>
                <span class="ranking-name">游山记</span>
                <span class="ranking-value">100万能力值</span>
            </li>
            <!-- 其他列表项 -->
        </ul>
    </div>

</body>
</html>