端午节网页设计html
时间: 2023-08-28 17:07:32 浏览: 113
很高兴回答你的问题!以下是一份端午节主题的网页设计 HTML 示例代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>端午节快乐</title>
<style>
body {
background-image: url("https://cdn.pixabay.com/photo/2018/06/16/21/00/dragon-3470208_960_720.jpg");
background-size: cover;
color: white;
}
#container {
width: 80%;
margin: 0 auto;
text-align: center;
}
h1 {
font-size: 4em;
}
p {
font-size: 2em;
line-height: 1.5em;
margin-bottom: 2em;
}
#dragon {
width: 40%;
margin: 0 auto;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
font-size: 1.5em;
color: #555;
}
</style>
</head>
<body>
<div id="container">
<h1>端午节快乐!</h1>
<p>端午节是我国传统节日之一,源于中国战国时期楚国爱国诗人屈原。</p>
<img src="https://cdn.pixabay.com/photo/2019/05/29/12/23/dragon-4233725_960_720.png" alt="龙舟比赛" id="dragon">
</div>
<div id="footer">本网页由 XXX 设计</div>
</body>
</html>
```
这份代码包括一个简单的 HTML 页面布局,使用了 CSS 样式来设置背景图片、文本样式和页脚位置。你可以根据需要进行修改和优化。希望能对你有所帮助!
阅读全文
相关推荐


















