世界杯淘汰赛对阵图 HTML 代码示例 - 创建足球比赛图表 - 常规

以下是一个简单的世界杯淘汰赛对阵图的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>世界杯淘汰赛对阵图</title>
    <style>
        .match {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 10px;
        }

        .team {
            width: 100px;
            height: 50px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .vs {
            margin: 10px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="match">
        <div class="team">A1</div>
        <div class="vs">vs</div>
        <div class="team">B2</div>
    </div>
    <div class="match">
        <div class="team">C1</div>
        <div class="vs">vs</div>
        <div class="team">D2</div>
    </div>
    <div class="match">
        <div class="team">E1</div>
        <div class="vs">vs</div>
        <div class="team">F2</div>
    </div>
    <div class="match">
        <div class="team">G1</div>
        <div class="vs">vs</div>
        <div class="team">H2</div>
    </div>
    <div class="match">
        <div class="team">B1</div>
        <div class="vs">vs</div>
        <div class="team">A2</div>
    </div>
    <div class="match">
        <div class="team">D1</div>
        <div class="vs">vs</div>
        <div class="team">C2</div>
    </div>
    <div class="match">
        <div class="team">F1</div>
        <div class="vs">vs</div>
        <div class="team">E2</div>
    </div>
    <div class="match">
        <div class="team">H1</div>
        <div class="vs">vs</div>
        <div class="team">G2</div>
    </div>
    <div class="match">
        <div class="team">A1/B2</div>
        <div class="vs">vs</div>
        <div class="team">C1/D2</div>
    </div>
    <div class="match">
        <div class="team">E1/F2</div>
        <div class="vs">vs</div>
        <div class="team">G1/H2</div>
    </div>
    <div class="match">
        <div class="team">A1/B2/C1/D2</div>
        <div class="vs">vs</div>
        <div class="team">E1/F2/G1/H2</div>
    </div>
    <div class="match">
        <div class="team">A1/B2/C1/D2/E1/F2/G1/H2</div>
        <div class="vs">vs</div>
        <div class="team">A1/B2/C1/D2/E1/F2/G1/H2</div>
    </div>
    <div class="match">
        <div class="team">冠军</div>
        <div class="vs">vs</div>
        <div class="team">亚军</div>
    </div>
</body>
</html>

这个HTML页面中包含了一个简单的世界杯淘汰赛对阵图，每个对阵图都使用了一个match类的div元素来包裹两个球队的名称，并使用了team类来设置球队的样式。vs类用于显示'vs'字样。你可以根据需要自定义样式或添加更多的对阵图。

更多关于世界杯淘汰赛对阵图的资源：