关于划龙舟做一个html5+css的网页
时间: 2023-08-11 09:05:52 浏览: 86
scratch端午节划龙舟比赛 scratch创意编程 少儿编程 边玩边学过个快乐端午节
5星 · 资源好评率100%
好的,以下是一个简单的 HTML5 + CSS 的龙舟网页示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>龙舟竞渡</title>
<!-- 导入 CSS 样式表 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>龙舟竞渡</h1>
</header>
<main>
<section class="content">
<h2>比赛规则</h2>
<p>龙舟竞渡是一项流行的传统体育活动,通常在端午节期间进行。比赛规则通常是多支队伍在一条河道上划龙舟,争夺冠军。</p>
<p>比赛过程中,队员们需要协调划桨的节奏,同时保持船身的平衡和速度。最终,第一个到达终点线的队伍将获得胜利。</p>
</section>
<section class="image">
<!-- 插入龙舟的图片 -->
<img src="https://picsum.photos/id/237/300/200" alt="龙舟">
</section>
</main>
<footer>
<p>版权所有 © 2021 龙舟竞渡协会</p>
</footer>
</body>
</html>
```
然后,在 `style.css` 文件中添加以下 CSS 样式:
```css
header {
background-color: #00BFFF;
color: white;
padding: 20px;
text-align: center;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 20px;
}
.content {
flex: 1;
max-width: 600px;
padding: 20px;
}
.image {
flex: 1;
max-width: 300px;
text-align: center;
}
footer {
background-color: #00BFFF;
color: white;
padding: 10px;
text-align: center;
}
```
这段 CSS 样式将为网页添加蓝色背景、居中对齐等样式,并使内容和图片在不同屏幕尺寸下自适应排列。您可以根据需要进行修改。
希望这个示例可以帮助您开始创作您自己的龙舟网页!
阅读全文