说明
采用鲜艳、活泼的色彩，符合儿童节的氛围，同时融入端午的传统元素。
可以使用左右分栏或者上下分块的方式展示两个节日的内容。
我们使用HTML和CSS来构建页面，为了简单快速，我们采用内联样式。
页面结构：
– 整体容器：设置背景颜色，字体等。
– 头部：大标题，可以加一些装饰。
– 主体部分：分为两个大块，分别介绍端午节和儿童节。
每个大块包含：小标题、活动内容描述、图片等。
– 底部：活动时间、地点和报名按钮。
由于要求只用HTML，我们将样式写在style标签内。
注意：图片可以使用网络图片链接，这里为了演示，我们使用占位图片链接，实际使用时替换为真实图片。
演示图
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双节同庆 - 端午节与儿童节活动</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #f9f3e9 0%, #e6f3ff 100%);
color: #333;
line-height: 1.6;
overflow-x: hidden;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="none" stroke="%23ffd700" stroke-width="0.5" stroke-opacity="0.1"/></svg>');
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* 头部样式 */
header {
text-align: center;
padding: 30px 0;
background: linear-gradient(90deg, #e74c3c 0%, #e67e22 50%, #f1c40f 100%);
border-radius: 0 0 20px 20px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
position: relative;
overflow: hidden;
margin-bottom: 40px;
}
header::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M20,20 Q40,5 60,20 T100,20" fill="none" stroke="%23ffffff" stroke-width="1" stroke-opacity="0.2"/><path d="M0,40 Q20,25 40,40 T80,40" fill="none" stroke="%23ffffff" stroke-width="1" stroke-opacity="0.2"/></svg>');
background-size: 300px;
opacity: 0.3;
}
.logo-container {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
.dragon-boat, .children {
width: 80px;
height: 80px;
background: #fff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin: 0 15px;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.dragon-boat i {
color: #e74c3c;
font-size: 40px;
}
.children i {
color: #3498db;
font-size: 40px;
}
.title {
color: white;
font-size: 3.5rem;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
margin: 10px 0;
}
.subtitle {
color: #fff;
font-size: 1.5rem;
font-weight: 300;
max-width: 800px;
margin: 0 auto;
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* 倒计时样式 */
.countdown {
background: rgba(255, 255, 255, 0.9);
border-radius: 15px;
padding: 25px;
margin: 30px auto;
text-align: center;
max-width: 800px;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
border: 1px solid rgba(255, 255, 255, 0.5);
}
.countdown-title {
color: #e74c3c;
margin-bottom: 20px;
font-size: 1.8rem;
}
.timer {
display: flex;
justify-content: center;
gap: 15px;
}
.timer-item {
background: linear-gradient(135deg, #f39c12, #e67e22);
color: white;
padding: 15px;
border-radius: 10px;
min-width: 100px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.timer-value {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 5px;
}
.timer-label {
font-size: 1rem;
opacity: 0.9;
}
/* 活动部分样式 */
.activities {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin: 40px 0;
}
.activity-card {
flex: 1;
min-width: 300px;
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.activity-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}
.card-header {
padding: 25px;
color: white;
text-align: center;
}
.dragon-festival .card-header {
background: linear-gradient(90deg, #e74c3c, #c0392b);
}
.children-day .card-header {
background: linear-gradient(90deg, #3498db, #2980b9);
}
.card-icon {
font-size: 3rem;
margin-bottom: 15px;
}
.card-title {
font-size: 2rem;
margin-bottom: 10px;
}
.card-date {
font-size: 1.2rem;
opacity: 0.9;
}
.card-content {
padding: 25px;
}
.card-content h3 {
color: #e74c3c;
margin-bottom: 15px;
font-size: 1.5rem;
}
.card-content ul {
list-style-type: none;
padding: 0;
}
.card-content li {
padding: 10px 0;
border-bottom: 1px dashed #eee;
display: flex;
align-items: center;
}
.card-content li:last-child {
border-bottom: none;
}
.card-content li i {
margin-right: 10px;
color: #f39c12;
}
/* 注册部分样式 */
.registration {
background: linear-gradient(135deg, #2ecc71, #27ae60);
border-radius: 20px;
padding: 40px;
text-align: center;
color: white;
margin: 50px 0;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.registration h2 {
font-size: 2.5rem;
margin-bottom: 20px;
}
.registration p {
font-size: 1.2rem;
max-width: 700px;
margin: 0 auto 30px;
opacity: 0.9;
}
.btn {
display: inline-block;
background: white;
color: #27ae60;
padding: 15px 40px;
border-radius: 50px;
font-size: 1.2rem;
font-weight: bold;
text-decoration: none;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
transition: all 0.3s ease;
border: 2px solid white;
}
.btn:hover {
background: transparent;
color: white;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
/* 页脚样式 */
footer {
text-align: center;
padding: 30px;
color: #7f8c8d;
font-size: 1rem;
background: rgba(255, 255, 255, 0.7);
border-radius: 20px 20px 0 0;
margin-top: 50px;
}
.contact-info {
display: flex;
justify-content: center;
gap: 30px;
margin: 20px 0;
flex-wrap: wrap;
}
.contact-item {
display: flex;
align-items: center;
gap: 10px;
}
.contact-item i {
color: #e74c3c;
}
/* 响应式设计 */
@media (max-width: 768px) {
.title {
font-size: 2.5rem;
}
.subtitle {
font-size: 1.2rem;
}
.timer {
flex-wrap: wrap;
}
.activities {
flex-direction: column;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="logo-container">
<div class="dragon-boat">
<i class="fas fa-dragon"></i>
</div>
<div class="children">
<i class="fas fa-child"></i>
</div>
</div>
<h1 class="title">双节同庆 · 欢乐共享</h1>
<p class="subtitle">端午节传统文化体验 & 六一儿童节亲子嘉年华</p>
</div>
</header>
<div class="container">
<div class="countdown">
<h2 class="countdown-title">活动倒计时</h2>
<div class="timer">
<div class="timer-item">
<div class="timer-value" id="days">05</div>
<div class="timer-label">天</div>
</div>
<div class="timer-item">
<div class="timer-value" id="hours">18</div>
<div class="timer-label">小时</div>
</div>
<div class="timer-item">
<div class="timer-value" id="minutes">24</div>
<div class="timer-label">分钟</div>
</div>
<div class="timer-item">
<div class="timer-value" id="seconds">37</div>
<div class="timer-label">秒</div>
</div>
</div>
</div>
<div class="activities">
<div class="activity-card dragon-festival">
<div class="card-header">
<div class="card-icon">
<i class="fas fa-dragon"></i>
</div>
<h2 class="card-title">端午文化体验</h2>
<div class="card-date">6月10日 上午9:00-12:00</div>
</div>
<div class="card-content">
<h3>活动亮点</h3>
<ul>
<li><i class="fas fa-leaf"></i> 传统粽子制作教学 - 学习包粽子技巧</li>
<li><i class="fas fa-water"></i> 龙舟模型DIY - 亲手制作迷你龙舟</li>
<li><i class="fas fa-book"></i> 端午节故事会 - 了解屈原传说</li>
<li><i class="fas fa-paint-brush"></i> 香囊手工艺 - 制作驱邪香囊</li>
<li><i class="fas fa-music"></i> 传统民俗表演 - 舞龙舞狮欣赏</li>
</ul>
<p style="margin-top: 20px; font-style: italic; color: #e74c3c;">
<i class="fas fa-map-marker-alt"></i> 地点：文化中心广场
</p>
</div>
</div>
<div class="activity-card children-day">
<div class="card-header">
<div class="card-icon">
<i class="fas fa-child"></i>
</div>
<h2 class="card-title">六一儿童嘉年华</h2>
<div class="card-date">6月1日 全天 9:00-17:00</div>
</div>
<div class="card-content">
<h3>欢乐项目</h3>
<ul>
<li><i class="fas fa-gamepad"></i> 趣味游戏区 - 赢取精美礼品</li>
<li><i class="fas fa-palette"></i> 创意手工坊 - 发挥无限想象力</li>
<li><i class="fas fa-theater-masks"></i> 卡通人物互动 - 与喜爱的角色合影</li>
<li><i class="fas fa-cookie-bite"></i> 甜品制作工坊 - 自制美味点心</li>
<li><i class="fas fa-magic"></i> 魔术泡泡秀 - 奇幻视觉盛宴</li>
</ul>
<p style="margin-top: 20px; font-style: italic; color: #3498db;">
<i class="fas fa-map-marker-alt"></i> 地点：城市公园儿童乐园
</p>
</div>
</div>
</div>
<div class="registration">
<h2>立即报名参与双节庆典</h2>
<p>端午节与儿童节活动现已开放报名！无论您是传统文化爱好者还是亲子家庭，都能在这里找到属于您的欢乐。名额有限，立即预约！</p>
<a href="#" class="btn">立即报名</a>
</div>
</div>
<footer>
<div class="container">
<div class="contact-info">
<div class="contact-item">
<i class="fas fa-phone-alt"></i>
<span>咨询热线：400-888-9999</span>
</div>
<div class="contact-item">
<i class="fas fa-envelope"></i>
<span>邮箱：events@double-festival.com</span>
</div>
<div class="contact-item">
<i class="fas fa-map-marker-alt"></i>
<span>地址：文化中心广场 & 城市公园</span>
</div>
</div>
<p>© 2023 双节同庆活动组委会 | 传承文化 · 欢乐共享 · 共创美好回忆</p>
</div>
</footer>
<script>
// 倒计时功能
function updateCountdown() {
// 设置端午节日期 (2023年6月22日)
const dragonBoatFestival = new Date('June 10, 2023 09:00:00').getTime();
const now = new Date().getTime();
const distance = dragonBoatFestival - now;
// 计算天、小时、分钟和秒
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
// 更新页面显示
document.getElementById('days').innerHTML = days.toString().padStart(2, '0');
document.getElementById('hours').innerHTML = hours.toString().padStart(2, '0');
document.getElementById('minutes').innerHTML = minutes.toString().padStart(2, '0');
document.getElementById('seconds').innerHTML = seconds.toString().padStart(2, '0');
// 如果倒计时结束
if (distance < 0) {
clearInterval(countdownInterval);
document.getElementById('countdown').innerHTML = "活动已开始！";
}
}
// 每秒更新一次倒计时
const countdownInterval = setInterval(updateCountdown, 1000);
updateCountdown(); // 初始调用
// 卡片悬停效果增强
const cards = document.querySelectorAll('.activity-card');
cards.forEach(card => {
card.addEventListener('mouseenter', () => {
card.style.transform = 'translateY(-15px)';
});
card.addEventListener('mouseleave', () => {
card.style.transform = 'translateY(0)';
});
});
</script>
</body>
</html>
感谢您的来访，获取更多精彩文章请收藏本站。
THE END
暂无评论内容