端午节快乐html网页
时间: 2024-06-12 10:02:31 浏览: 16
端午节快乐的HTML网页通常会包含节日祝福语、相关的节日元素和可能的动态效果,以下是一个简单的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>端午节快乐</title>
<style>
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
.container {
width: 600px;
margin: auto;
padding: 20px;
text-align: center;
}
h1 {
color: #333;
margin-bottom: 20px;
}
p {
color: #666;
line-height: 1.5;
}
.decorations {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
}
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="container">
<h1 style="font-size: 24px;">端午安康,粽香飘逸</h1>
<p>在这个龙舟竞渡的日子里,愿您家庭和睦,身体健康。</p>
<div class="decorations">
<img src="dragon-boat.jpg" alt="龙舟图片">
<img src="zongzi.jpg" alt="粽子图片">
</div>
<button id="greet" onclick="showGreeting()">点击获取更多祝福</button>
<p id="hiddenGreeting" style="display: none;">祝您端午节快乐,阖家幸福!</p>
</div>
<script>
function showGreeting() {
document.getElementById("hiddenGreeting").style.display = "block";
}
</script>
</body>
</html>
```
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)
![](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)
![](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)
![](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)