一个简单的nba介绍网页h5代码和css
时间: 2024-06-12 22:05:05 浏览: 164
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NBA介绍</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>NBA介绍</h1>
</header>
<nav>
<ul>
<li><a href="#history">历史</a></li>
<li><a href="#teams">球队</a></li>
<li><a href="#players">球员</a></li>
<li><a href="#championships">总冠军</a></li>
</ul>
</nav>
<main>
<h2 id="history">历史</h2>
<p>NBA(National Basketball Association,全称:美国职业篮球联赛),是由北美30支队伍组成的职业篮球联赛,始创于1946年。</p>
<h2 id="teams">球队</h2>
<ul>
<li>东部联盟</li>
<ul>
<li>波士顿凯尔特人</li>
<li>布鲁克林篮网</li>
<li>纽约尼克斯</li>
<li>费城76人</li>
<li>多伦多猛龙</li>
</ul>
<li>西部联盟</li>
<ul>
<li>洛杉矶湖人</li>
<li>洛杉矶快船</li>
<li>金州勇士</li>
<li>休斯顿火箭</li>
<li>达拉斯小牛</li>
</ul>
</ul>
<h2 id="players">球员</h2>
<table>
<tr>
<th>姓名</th>
<th>球队</th>
<th>位置</th>
<th>得分</th>
<th>篮板</th>
<th>助攻</th>
</tr>
<tr>
<td>勒布朗·詹姆斯</td>
<td>洛杉矶湖人</td>
<td>前锋</td>
<td>27.0</td>
<td>8.0</td>
<td>8.0</td>
</tr>
<tr>
<td>凯文·杜兰特</td>
<td>布鲁克林篮网</td>
<td>前锋</td>
<td>28.0</td>
<td>7.5</td>
<td>5.0</td>
</tr>
</table>
<h2 id="championships">总冠军</h2>
<ul>
<li>波士顿凯尔特人 - 17次</li>
<li>洛杉矶湖人 - 16次</li>
<li>芝加哥公牛 - 6次</li>
<li>圣安东尼奥马刺 - 5次</li>
<li>迈阿密热火 - 3次</li>
</ul>
</main>
<footer>
<p>© 2021 NBA介绍</p>
</footer>
</body>
</html>
CSS代码:
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #f2f2f2;
padding: 20px;
}
nav {
background-color: #333;
color: #fff;
padding: 10px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
}
nav li {
margin: 0 10px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
margin: 20px;
}
h2 {
font-size: 24px;
margin-top: 40px;
}
p {
font-size: 18px;
line-height: 1.5;
}
ul, li {
font-size: 18px;
line-height: 1.5;
}
table {
border-collapse: collapse;
margin-top: 40px;
}
th, td {
border: 1px solid #ddd;
padding: 10px;
}
th {
background-color: #f2f2f2;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
}
阅读全文