世界杯淘汰赛对阵图 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'字样。你可以根据需要自定义样式或添加更多的对阵图。
更多关于世界杯淘汰赛对阵图的资源:
原文地址: https://www.cveoy.top/t/topic/pe7e 著作权归作者所有。请勿转载和采集!