使用HTML制作静态网站作业——我的校园运动会(HTML+CSS)
warning:
这篇文章距离上次修改已过201天，其中的内容可能已经有所变动。
以下是一个简单的HTML和CSS代码示例，用于创建一个展示校园运动会信息的静态网页：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的校园运动会</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
.header {
text-align: center;
padding: 20px;
background-color: #333;
color: white;
}
.content {
padding: 20px;
}
.footer {
text-align: center;
padding: 20px;
background-color: #333;
color: white;
}
</style>
</head>
<body>
<div class="header">
<h1>我的校园运动会</h1>
</div>
<div class="content">
<h2>赛事信息</h2>
<p>2023年10月15日，我校将举行一年一度的运动会，以下是相关的赛事信息：</p>
<ul>
<li>主题：“激情燎原”</li>
<li>时间：周末 Both 10:00 AM - 6:00 PM</li>
<li>地点：学校田径场</li>
</ul>
<h2>报名方式</h2>
<p>报名将通过学校官方网站进行，链接：<a href="https://www.ourschool.edu.cn/sportsday">https://www.ourschool.edu.cn/sportsday</a></p>
</div>
<div class="footer">
<p>版权所有 © 我校运动会组委会 2023</p>
</div>
</body>
</html>这个示例展示了如何使用HTML创建一个简单的网页结构，并使用CSS为其添加样式。在.header、.content和.footer类中定义了不同部分的样式，使页面更具专业感和可读性。
评论已关闭