用html写一个成都大运会的页面
时间: 2023-09-24 20:05:54 浏览: 58
好的,以下是一个简单的成都大运会的页面示例:
```
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>成都大运会</title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
width: 80%;
margin: 0 auto;
background-color: #fff;
padding: 20px;
box-shadow: 0px 2px 5px rgba(0,0,0,.2);
}
h1 {
text-align: center;
margin-top: 0;
}
.nav {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.nav a {
display: block;
margin: 0 20px;
color: #333;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
transition: all .2s ease-in-out;
}
.nav a:hover {
color: #ff6600;
}
.header {
background-image: url('https://cdn.pixabay.com/photo/2016/07/04/15/35/stadium-1494907_960_720.jpg');
background-size: cover;
background-position: center;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #fff;
text-shadow: 1px 1px 2px rgba(0,0,0,.5);
}
.header h2 {
font-size: 3em;
margin-bottom: 0;
}
.header p {
font-size: 1.5em;
margin-top: 0;
}
.section {
margin-bottom: 40px;
}
.section h3 {
margin-top: 0;
}
.section p {
line-height: 1.5;
}
.footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>成都大运会</h1>
<nav class="nav">
<a href="#">首页</a>
<a href="#">赛程</a>
<a href="#">成绩</a>
<a href="#">新闻</a>
<a href="#">关于我们</a>
</nav>
<div class="header">
<h2>欢迎来到成都大运会</h2>
<p>2022年成都大运会,期待您的到来!</p>
</div>
<div class="section">
<h3>赛程安排</h3>
<p>成都大运会将于2022年8月15日至8月27日在成都举行,共设有36个大项、20个小项,分为夏季运动会和冬季运动会两个赛会。具体赛程安排将在赛前公布。</p>
</div>
<div class="section">
<h3>成绩查询</h3>
<p>成都大运会成绩查询功能将在赛后开通,届时您可以在本网站上查询您关注的项目的成绩。</p>
</div>
<div class="section">
<h3>新闻动态</h3>
<p>本网站将实时更新成都大运会的新闻动态,您可以在本网站上了解最新的比赛情况和选手动态。</p>
</div>
<div class="section">
<h3>关于我们</h3>
<p>本网站是成都大运会官方网站,旨在为广大观众提供最全面、最及时的成都大运会信息服务。如果您有任何建议或意见,请联系我们。</p>
</div>
</div>
<div class="footer">
<p>© 2022 成都大运会</p>
</div>
</body>
</html>
```
这个页面使用了 HTML 和 CSS。其中,HTML 用于定义页面结构和内容,CSS 用于定义页面样式。页面包括一个导航栏、一个顶部图片和标题、四个区块和一个页脚。你可以根据需求自行修改或添加内容。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pptx](https://img-home.csdnimg.cn/images/20210720083543.png)