端午节网页设计代码,VPS安装搭建云作业管理,vps做服务器,日本vps日本vps推荐,搬瓦工vps推荐

🗣 Wd提问: 端午节网页设计代码

🤖 Ai回答:
下面是一个简单的端午节主题网页设计代码示例，使用 HTML + CSS 实现一个美观、节日氛围浓厚的静态网页。你可以将其保存为 `.html` 文件并在浏览器中打开查看效果。

🎉 端午节主题网页（HTML + CSS）

html
<!DOCTYPE html
<html lang=zh-CN
<head
<meta charset=UTF-8 /
<meta name=viewport content=width=device-width, initial-scale=1.0/
<title端午节快乐 Dragon Boat Festival</title
<style
/* 全局样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Microsoft YaHei, sans-serif;
background: linear-gradient(135deg, e6f7ff, d4edda);
color: 333;
line-height: 1.6;
}

.container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
text-align: center;
}

header {
margin-bottom: 40px;
}

h1 {
font-size: 3rem;
color: c14c00;
text-shadow: 2px 2px 8px rgba(0,0,0,0.1);
margin-bottom: 10px;
}

.subtitle {
font-size: 1.4rem;
color: d35400;
margin-bottom: 20px;
}

/* 龙舟与粽子插图 */
.festival-img {
display: flex;
justify-content: center;
gap: 30px;
margin: 30px auto;
flex-wrap: wrap;
}

.zongzi {
width: 150px;
height: 180px;
background: url('https://cdn.jsdelivr.net/gh/lipis/flag-icon-css/flags/4x3/cn.svg') no-repeat center / contain;
opacity: 0.8;
transform: rotate(-15deg);
animation: float 3s ease-in-out infinite;
}

.dragon-boat {
width: 300px;
height: 120px;
background: url('https://65.hk/dragon-boat.png') no-repeat center / contain; /* 替换为真实龙舟图链接 */
animation: moveBoat 8s linear infinite;
}

/* 动画效果 */
@keyframes float {
0%, 100% { transform: translateY(0) rotate(-15deg); }
50% { transform: translateY(-15px) rotate(-10deg); }
}

@keyframes moveBoat {
0% { transform: translateX(-100%); }
100% { transform: translateX(100vw); }
}

/* 内容区域 */
.content {
background: white;
padding: 30px;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
margin-top: 30px;
text-align: left;
max-width: 800px;
margin: 30px auto;
}

.content h2 {
color: c14c00;
margin-bottom: 15px;
text-align: center;
}

.content p {
margin-bottom: 15px;
font-size: 1.1rem;
}

footer {
margin-top: 50px;
color: 777;
font-size: 0.9rem;
}

/* 响应式 */
@media (max-width: 768px) {
h1 { font-size: 2.2rem; }
.subtitle { font-size: 1.1rem; }
.festival-img { gap: 15px; }
.zongzi, .dragon-boat { width: 100px; height: auto; }
}
</style
</head
<body

<div class=container
<header
<h1🎉 端午节快乐！</h1
<p class=subtitle农历五月初五 · 纪念屈原 · 赛龙舟 · 吃粽子</p
</header

<! 龙舟和粽子动画
<div class=festival-img
<div class=zongzi</div
<div class=dragon-boat</div
<div class=zongzi style=animation-delay: 1s;</div
</div

<! 主要内容
<div class=content
<h2关于端午节</h2
<p
端午节，又称端阳节、龙舟节，是中国传统节日之一，时间为每年农历五月初五。
据传是为了纪念爱国诗人屈原而设立。屈原投江自尽后，百姓划船捞救，并投下粽子以防鱼虾啃食其身体，由此演变为赛龙舟和吃粽子的习俗。
</p

<p
<strong主要习俗：</strong<br
🛶 赛龙舟 —— 团结拼搏的象征<br
🍡 吃粽子 —— 用糯米包裹馅料，以竹叶或芦苇叶包裹蒸煮<br
🌿 挂艾草与菖蒲 —— 驱邪避疫<br
👗 佩香囊、系五彩绳 —— 祈福纳吉
</p

<p style=text-align: center; font-style: italic; color: d35400;
“路漫漫其修远兮，吾将上下而求索。” —— 屈原《离骚》
</p
</div

<footer
© 2024 中华传统节日文化展示 | 设计：你的名字
</footer
</div

</body
</html

🔧 使用说明：

1、替换图片：
当前 `.dragon-boat` 和 `.zongzi` 使用了占位背景图（例如国旗图），你需要替换为真实的龙舟和粽子图片 URL。
推荐使用免费图库如 [Unsplash](https://unsplash.com/) 或 [Pixabay](https://pixabay.com/) 下载 PNG 图片并上传到图床（如 [Imgur](https://imgur.com/) 或 [Cloudinary](https://cloudinary.com/)）获取外链。

示例替换：
css
.dragon-boat {
background: url('https://your-image-host.com/dragon-boat.png') no-repeat center / contain;
}

2、添加音乐（可选）：
可在 `<body` 中加入背景音乐：
html
<audio autoplay loop hidden
<source src=bg-music.mp3 type=audio/mpeg
</audio

3、扩展功能建议：
添加 JavaScript 实现倒计时（到下一个端午节）
制作互动小游戏（如“包粽子”小游戏）
响应式适配移动端

✅ 效果预览功能：
渐变背景
动画飘动的粽子
移动的龙舟（从左到右循环）
响应式布局（适配手机）
节日文案介绍

如果你希望我帮你生成一个完整的 ZIP 包含图片资源、或者做成多页面网站、加入 JavaScript 动态效果（如点击放烟花），也可以告诉我，我可以继续完善！

祝你做出一个漂亮的端午节网页！🎏

Ai作答

📣 商家广告：