源码获取魏：RACXDX 支持要求定制文档编写
目录
1. 主题总结
本站是一个专注于中国传统节日文化传播的综合性展示平台，旨在通过丰富的图文内容和互动体验，向用户全面介绍中国最重要的传统节日及其文化内涵。网站以弘扬中华优秀传统文化为核心，重点展示了春节、清明节和中秋节三个具有代表性的传统节日，通过系统梳理节日起源、发展历程、传统习俗、饮食文化和趣闻轶事等内容，构建了一个生动直观的中华传统节日知识库。
网站以简洁优雅的设计风格，将传统文化元素与现代网页技术相结合，为用户提供了沉浸式的文化体验，帮助用户深入了解中国传统节日的历史底蕴和文化魅力，增强文化认同感和民族自豪感。
2. 页面结构与技术实现
2.1 首页（index.html）
**技术特点：**
- 采用响应式设计，适配不同设备屏幕
- 实现了图片轮播功能，自动切换节日主题图片
- 运用CSS动画和过渡效果，增强页面交互体验
- 导航菜单支持下拉子菜单，提升用户浏览体验
**内容涵盖：**
- 传统节日起源概述，介绍了天地信仰和祖先信仰的文化根源
- 精选节日展示区，以图文并茂的方式呈现春节、清明节和中秋节的核心信息
- 每个节日卡片包含简短描述和相关页面的导航链接
- 轮播图设计直观引导用户进入各个节日详情页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>传统节日 在中国</title>
<link rel="shortcut icon" href="favicon1.ico" />
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
<!-- animate.js必须写在index.js的上面 -->
<script src="js/animate.js"></script>
<!-- 引入js -->
<script src="js/index.js"></script>
</head>
<body>
<!-- 头部模块start -->
<div class="header">
<!-- logo图标 -->
<div class="main">
<div class="logo"> <img src="images/logo.png" alt=""></div>
<!-- 下拉菜单 -->
<ul class="nav ">
<li>
<a href="#">传统节日</a>
<ul class="list list1">
<li><a href="#">起源</a></li>
<li><a href="#">精选展示</a></li>
</ul>
</li>
<li>
<a href="chun.html">春节</a>
<ul class="list list4">
<li><a href="chun.html">起源</a></li>
<li><a href="chun.html">传统习俗</a></li>
<li><a href="chun.html">舌尖上的春节</a></li>
<li><a href="chun.html">有趣咨讯</a></li>
</ul>
</li>
<li>
<a href="qingming.html">清明节</a>
<ul class="list list3">
<li><a href="qingming.html">传承发展</a></li>
<li><a href="qingming.html">传统习俗</a></li>
<li><a href="qingming.html">节令食品</a></li>
</ul>
</li>
<li>
<a href="zhongqiu.html">中秋节</a>
<ul class="list list4">
<li><a href="zhongqiu.html">传说故事</a></li>
<li><a href="zhongqiu.html">传统习俗</a></li>
<li><a href="zhongqiu.html">中秋海外</a></li>
<li><a href="zhongqiu.html">有趣咨讯</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- <script>
var nav = document.querySelector('.nav');
var lis = nav.children;
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function () {
this.children[1].style.display = 'block';
}
lis[i].onmouseout = function () {
this.children[1].style.display = 'none';
}
}
</script> -->
<!-- 头部模块end -->
<!-- 轮播图 -->
<div class='focus f1'>
<a href="javascript:;" class="arrow-l">
<
</a>
<a href="javascript:;" class="arrow-r">
>
</a>
<ul>
<li>
<a href="chun.html"><img src="images/bg1.jpg" alt=""></a>
</li>
<li>
<a href="zhongqiu.html"><img src="images/bg3.jpg" alt=""></a>
</li>
<li>
<a href="qingming.html"><img src="images/bg2.jpg" alt=""></a>
</li>
<li>
<a href="zhongqiu.html"><img src="images/bg6.jpg" alt=""></a>
</li>
</ul>
<ol class="circle">
</ol>
</div>
<!-- 轮播图end -->
<h1 class="or">中国传统节日起源</h1>
<div class="origin">
<p> 据现代人类学、考古学的研究成果表明，人类最原始的两种信仰：一是天地信仰，二是祖先信仰。天地信仰和祖先信仰产生于人类初期
对自然界以及祖先的崇拜，由此产生了各种崇拜祭祀活动。祭祀，是一种信仰活动，源于天地和谐共生的信仰信念。古老节日是人们基于
原始信仰以及为了适应生活需要而创造的民俗文化，古时代一些流传至今的节俗活动，清晰地记录着古人丰富多彩的社会生活内容，也积淀着博
大精深的中国历史文化内涵。</p>
</div>
<h1 class="sp">精选展示</h1>
<ul class="special w">
<li class="img1">
<div>
<div class="mask">
<ul>
<li><a href="chun.html">起源</a></li>
<li><a href="chun.html">传统习俗</a></li>
<li><a href="chun.html">舌尖上的春节</a></li>
<li><a href="chun.html">有趣咨讯</a></li>
</ul>
</div>
<img src="images/special1.jpg" alt="">
<div class="content">
<div>
<h3>新年</h3>
<p>农历正月初一，也兼指正月初一以后的几天。人们都回家团聚，以各种形式迎新春，祈求幸福吉祥。</p>
</div>
</div>
</div>
</li>
<li>
<div>
<div class="mask">
<ul>
<li><a href="qingming.html">传承发展</a></li>
<li><a href="qingming.html">传统习俗</a></li>
<li><a href="qingming.html">节令食品</a></li>
</ul>
</div>
<img src="images/special2.jpg" alt="">
<div class="content">
<div>
<h3>清明</h3>
<p>二十四节气之一，多在农历四月，人们习惯在这天扫墓、踏青；祭奠祖先，缅怀逝者，尊重生命。</p>
</div>
</div>
</div>
</li>
<li>
<div>
<div class="mask">
<ul>
<li><a href="zhongqiu.html">传说故事</a></li>
<li><a href="zhongqiu.html">传统习俗</a></li>
<li><a href="zhongqiu.html">中秋海外</a></li>
<li><a href="zhongqiu.html">有趣咨讯</a></li>
</ul>
</div>
<img src="images/special3.jpg" alt="">
<div class="content">
<div>
<h3>中秋</h3>
<p>团圆节，农历八月十五，亲恩团圆朋友相聚，流行赏月、吃月饼、点花灯等风俗。人们但愿人长久，千里共嫦娟。</p>
</div>
</div>
</div>
</li>
</ul>
</body>
</html>2.2 春节页面（chun.html）
**技术特点：**
- 实现了标签页（Tab）切换功能，分类展示不同内容模块
- 使用JavaScript实现动态内容加载和交互效果
- 图文混排布局，优化内容阅读体验
- 视频链接集成，扩展内容形式
**内容涵盖：**
- 春节起源与历史发展概述
- 传统与当代习俗：办年货、祭灶、扫尘、贴年红、年夜饭、守岁、压岁钱、拜年、春晚等
- 舌尖上的春节：饺子、元宵、汤圆、年糕、春饼、糍粑、八宝饭等传统美食介绍
- 有趣视频资讯：春节在海外的影响力和庆祝方式相关视频链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>春节</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
<link rel="shortcut icon" href="favicon2.ico">
</head>
<body>
<div class="header_f w">
<div class="logo_f"><a href="#"><img src="images/logo_f.png" alt=""></a></div>
<div class="index3 index"><a href="index.html">返回首页</a></div>
<div class="poetry">
<div>
<p>
爆竹声中一岁除，春风送暖入屠苏。<br>
千门万户曈曈日，总把新桃换旧符。
</p>
</div>
</div>
</div>
<div class="describe1">
<p>春节，即农历新年，是一年之岁首、传统意义上的年节。俗称新春、新年、新岁、岁旦、年禧、大年等。春节历史悠久，由上古时代岁首祈年祭祀演变而来。万物本乎天、人本乎祖，祈年祭祀、敬天法祖，报本反始也。春节的起源蕴含着深邃的文化内涵，在传承发展中承载了丰厚的历史文化底蕴。在古代民间，人们从年末廿三或廿四的祭灶便开始“忙年”了，新年到正月十九日才结束。在现代，人们把春节定于农历正月初一，但一般至少要到正月十五新年才算结束。
</p>
</div>
<div class="tradition">
<div class="contain">
<div class="sub_title1"><img src="images/banner-chun1.jpg" alt=""></div>
<div class="add"></div>
<h1>传统与当代习俗</h1>
</div>
</div>
<div class="tab-chun">
<div class="tab_list_chun">
<ul>
<li class="current">办年货</li>
<li>祭灶</li>
<li>扫尘</li>
<li>贴年红</li>
<li>年夜饭</li>
<li>守岁</li>
<li>压岁钱</li>
<li>拜年</li>
<li>春晚</li>
</ul>
</div>
<div class="tab_con">
<div class="item-chun" style="display: block">
<div class="pic-chun1"><img src="images/pic-chun1.jpg" alt=""></div>
<p class="tab">
中国的年俗文化源远流长，全国各地衍生出纷繁多样的过年习俗，南北迥异，各具特色。虽然各地习俗不尽相同，但是备年货、送年礼却是几乎全国上下的“过年必备”。置办年货，包括吃的、穿的、戴的、用的、贴的（年红）、送的（拜年）礼物等等，统名曰之“年货”，而把采购年货的过程称之为“办年货”。办年货是中国人过春节的一项重要活动。
</p>
</div>
<div class=" item-chun">
<div class="pic-chun2"><img src="images/pic-chun2.jpg" alt=""></div>
<p class="tab">
农历十二月廿三/廿四日祭灶。民间祭灶，源于古人拜火习俗。《释名》：“灶。造也，创食物也。”灶神的职责就是执掌灶火，管理饮食，后来扩大为考察人间善恶，以降福祸。祭灶在中国民间有几千年历史了，灶神信仰是中国百姓对“衣食有余”梦想追求的反映。
</p>
</div>
<div class="item-chun">
<div class="pic-chun3"><img src="images/pic-chun3.jpg" alt=""></div>
<p class="tab">
在民间，新年前夕有“腊月二十四，扫尘（亦称扫屋）的习俗。民谚称“二十四，扫房子”。民间称做“扫尘日”。扫尘就是年终大扫除，家家户户都要打扫环境，清洗各种器具，拆洗被褥窗帘，洒扫六闾庭院，掸拂尘垢蛛网，疏浚明渠暗沟。到处洋溢着欢欢喜喜搞卫生、干干净净迎新春的欢乐气氛。按民间的说法：因“尘”与“陈”谐音，年前扫尘有“除陈布新”的涵义。扫尘用意是要把一切穷运、晦气统统扫出门，以祈来年清吉。
</p>
</div>
<div class="item-chun">
<div class="pic-chun4"><img src="images/pic-chun4.jpg" alt=""></div>
<p class="tab">
年廿八、廿九或三十日家家户户“贴年红”（年红是春联、门神、横批、年画、“福”字等过年时所贴的红色喜庆元素统称）。过年贴年红（挥春），是中国传统的过年习俗，增添了喜庆的节日气氛，并寄予着人们对新年和新生活的美好期盼。
</p>
<div class="pic-chun41"><img src="images/pic-chun41.jpg" alt=""></div>
<p class="chun41">
春联：根据《玉烛宝典》、《燕京岁时记》等文学作品记载，春联的原始形式就是人们所说的“桃符”。春联的另一来源是春贴，古人在立春日多贴“宜春”二字，后渐渐发展为春联。贴春联也叫贴门对、春贴、对联、对子、桃符等，它以工整、对偶、简洁、精巧的文字描绘时代背景，抒发美好愿望，是中国特有的文学形式。每逢春节，无论城市还是农村，家家户户都要精选一幅大红春联贴于门上，为节日增加喜庆气氛。
</p>
<div class="pic-chun42"><img src="images/pic-chun42.jpg" alt=""></div>
<p class="chun41">
年画：春节挂贴年画在城乡也很普遍，浓黑重彩的年画给千家万户平添了许多兴旺欢乐的喜庆气氛。年画是中国的一种古老的民间艺术，反映了人民朴素的风俗和信仰，寄托着他们对未来的希望。随着木板印刷术的兴起，年画的内容已不仅限于门神之类单调的主题，变得丰富多彩。
</p>
<div class="pic-chun43"><img src="images/pic-chun43.jpg" alt=""></div>
<p class="chun41">
窗花与“福”字：在民间人们还喜欢在窗户上贴上各种剪纸——窗花。窗花不仅烘托了喜庆的节日气氛，也集装饰性、欣赏性和实用性于一体。同时，一些人家要在屋门上、墙壁上、门楣上贴上大大小小的“福”字。民间还有将“福”字精描细做成各种图案的，图案有寿星、寿桃、鲤鱼跳龙门、五谷丰登、龙凤呈祥等。
</p>
</div>
<div class="item-chun">
<div class="pic-chun5"><img src="images/pic-chun5.jpg" alt=""></div>
<p class="tab">
年夜饭，又称年晚饭、团年饭、团圆饭等，特指岁末除夕的阖家聚餐。年夜饭源于古代的年终祭祀仪，拜祭神灵与祖先后团圆聚餐。年夜饭是年前的重头戏，不但丰富多彩，而且很讲究意头。吃团年饭前先拜神祭祖，待拜祭仪式完毕后才开饭。席上一般有鸡（寓意有计）、鱼（寓意年年有余）、蚝豉（寓意好市）、发菜（寓意发财）、腐竹（寓意富足）、莲藕（寓意聪明）、生菜（寓意生财）、生蒜（寓意会计算）、腊肠（寓意长久）等以求吉利。中国人的年夜饭是家人的团圆聚餐，这顿是年尾最丰盛、最重要的一顿晚餐。
</p>
</div>
<div class="item-chun">
<div class="pic-chun6"><img src="images/pic-chun6.jpg" alt=""></div>
<p class="tab">
除夕守岁是年俗活动之一，守岁之俗由来已久。守岁的民俗主要表现为所有房子都点燃岁火，合家欢聚，并守“岁火”不让熄灭，等着辞旧迎新的时刻，迎接新岁到来。除夕夜灯火通宵不灭，曰“燃灯照岁”或“点岁火”，所有房子都点上灯烛，还要专门在床底点灯烛，遍燃灯烛，谓之“照虚耗”，据说如此照过之后，就会使来年家中财富充实。古时南北风俗各异，古时北方一些地方守岁习俗主要为熬年夜，如晋朝周处所著的《风土记》中说：除夕之夜大家各相与赠送，称“馈岁”；长幼聚欢，祝颂完备，称“分岁”；终岁不眠，以待天明，称“守岁”。除夕之夜，全家团聚在一起，吃过年夜饭，点起蜡烛或油灯，围坐炉旁闲聊，通宵守夜，象征着把一切邪瘟病疫照跑驱走，期待着新的一年吉祥如意。
</p>
</div>
<div class="item-chun">
<div class="pic-chun7"><img src="images/pic-chun7.jpg" alt=""></div>
<p class="tab">
压岁钱，年俗之一，年晚饭后长辈要将事先准备好的压岁钱派发给晚辈，据说压岁钱可以压住邪祟，晚辈得到压岁钱就可以平平安安度过一岁。压岁钱在民俗文化中寓意辟邪驱鬼，保佑平安。压岁钱最初的用意是镇恶驱邪。因为人们认为小孩容易受鬼祟的侵害，所以用压岁钱压祟驱邪。
在历史上，压岁钱是分多种的，一般在新年倒计时时由长辈派发给晚辈，表示压祟，包含着长辈对晚辈的关切之情和真切祝福；另一种就是晚辈给老人的，这个压岁钱的“岁”指的是年岁，意在期盼老人长寿。可追溯的最早压岁钱文字记载在汉代，又叫压胜钱，并不在市面上流通，而是铸成钱币形式的玩赏物，有避邪的功能。
</p>
</div>
<div class="item-chun">
<div class="pic-chun8"><img src="images/pic-chun8.jpg" alt=""></div>
<p class="tab">拜年
春节期间走访拜年是年节传统习俗之一，是人们辞旧迎新、相互表达美好祝愿的一种方式。初二、三就开始走亲戚看朋友，相互拜年，道贺祝福，说些恭贺新喜、恭喜发财、恭喜、新年好等话。拜年的意义所在是亲朋好友之间走访联络感情、互贺新年，表达对亲朋间的情怀以及对新一年生活的美好祝福。
</p>
</div>
<div class="item-chun">
<div class="pic-chun9"><img src="images/pic-chun9.jpg" alt=""></div>
<p class="tab">春节联欢晚会
春节联欢晚会，通常简称“春晚”，是中国中央电视台在每年除夕晚上为庆祝农历新年举办的综艺性文艺晚会。1983年，央视举办春节联欢晚会应该说是一个偶然事件。但是这台晚会已经成为了中国人的“新民俗，新文化”，每年除夕夜必看的电视大餐。从1983年起，央视春晚这枚凝聚了十几亿中国人亲情与乡愁的符号，已经成为几代中国人的文化记忆。
从文化发展的角度看，中央电视台春节联欢晚会开创了电视综艺节目的先河，且引发了中国电视传媒表达内容、表达方式等方面的重大变革。春节联欢晚会涵盖小品、歌曲、歌舞、杂技、魔术、戏曲、相声剧等多种表演形式。
</p>
</div>
</div>
</div>
<script>
// 获取元素
var tab_list_chun = document.querySelector('.tab_list_chun');
var lis_chun = tab_list_chun.querySelectorAll('li');
var items_chun = document.querySelectorAll('.item-chun');
// for循环绑定点击事件
for (var i = 0; i < lis_chun.length; i++) {
// 开始给5个小li 设置索引号
lis_chun[i].setAttribute('index', i);
lis_chun[i].onclick = function () {
// 1. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式
// 干掉所有人 其余的li清除 class 这个类
for (var i = 0; i < lis_chun.length; i++) {
lis_chun[i].className = '';
}
// 留下我自己
this.className = 'current';
// 2. 下面的显示内容模块
var index = this.getAttribute('index');
console.log(index);
// 干掉所有人 让其余的item 这些div 隐藏
for (var i = 0; i < items_chun.length; i++) {
items_chun[i].style.display = 'none';
}
// 留下我自己 让对应的item 显示出来
items_chun[index].style.display = 'block';
}
}
</script>
<div class="food">
<div class="contain">
<div class="sub_title2"><img src="images/banner-chun2.jpg" alt=""></div>
<div class="add"></div>
<h1>舌尖上的春节</h1>
</div>
</div>
<div class="food-con ">
<ul class="w">
<li>
<div>
<img src="images/food1.jpg" alt="">
<div>
<h2>饺子</h2>
<p>饺子是中国最有代表性的传统美食，已有近两千年的历史，广受人们的喜爱。每逢新春佳节，尤其在北方，饺子是年夜饭餐桌上不可缺少的美味佳肴。饺子一般要在大年三十晚上12点以前包好，待到半夜子时吃，因为这时正是农历正月初一的伊始，“子”为“子时”，“饺”与“交”谐音，吃饺子取“更岁交子”之意，即新年与旧年相交的时刻“喜庆团圆”之意。饺子外形如元宝，包饺子意味着包住福运，吃饺子象征生活富裕。人们还会将硬币或者花生米和果仁包在饺子里，谁吃到饺子就预示新的一年将交好运。
</p>
</div>
</div>
</li>
<li>
<div>
<img src="images/food2.jpg" alt="">
<div>
<h2>元宵VS汤圆 傻傻分不清</h2>
<p>
元宵节吃汤圆的习俗，最早记载见于宋代。当时的明州（即今天的浙江宁波）兴起一种新奇食物，用各种果饵做馅，外面用糯米粉搓成球，这种糯米球煮在锅里又浮又沉，所以最早叫“浮圆子”，后来有的地区把“浮圆子”改称“元宵”。正月十五北方吃元宵，南方吃汤圆，那么汤圆和元宵究竟有何区别呢？以江浙为中心的南方地区，用包制方法制作汤圆，即用糯米烫软后，手揉湿粉包馅而成，通常馅都较大，皮则略薄；以北京为中心的北方地区，用摇制方法制作元宵，即用干粉滚制而成，馅较小，粉较多。春节吃汤圆，意味着新的一年合家幸福、团团圆圆。
</p>
</div>
</div>
</li>
<li>
<div>
<img src="images/food3.jpg" alt="">
<div>
<h2>“义取年胜年，籍以祈岁谂”</h2>
<p>新春期间很多地区都讲究吃年糕，因为年糕又称“年年糕”，与“年年高”谐音，意寓人们的工作和生活一年比一年好，所以，年糕不仅是一种节日美食，而且代表着美好的寓意和希望。正如诗所云：“人心多好高，谐声制食品，义取年胜年，籍以祈岁谂。”据说，年糕最早只是作为祭祀祖先和神灵用的，后来才逐渐成为春节传统美食。春节吃年糕多出现于南方，多以红、黄、白三色出现，寄寓了五谷丰登、生活富足的美好愿望。如今，年糕已经发展成色彩丰富、形状各异的新年美食。
</p>
</div>
</div>
</li>
<li>
<div>
<img src="images/food4.jpg" alt="">
<div>
<h2>春节吃春饼 新年万事平</h2>
<p>春卷，又称春饼、春盘、薄饼，是中国民间立春时吃的传统美食，流行于中国各地。春卷包含着新年的美好祝福，有迎春喜庆之吉兆。在南方的某些地区，过春节不吃饺子，吃春卷。古代立春日所食之面饼，烙得很薄，又称薄饼。与数种生菜同食，名曰“春盘”。每年立春日，都要吃春饼，名曰“咬春”。春饼是面粉烙制的薄饼，一般要卷菜来吃，卷的配菜不尽相同，在北京叫春饼，在北京卷的是北京烤鸭，在广东卷的可能就是蜜汁烧鹅。
</p>
</div>
</div>
</li>
<li>
<div>
<img src="images/food5.jpg" alt="">
<div>
<h2>“二十八，打粑粑。”</h2>
<p>过年前制作糍粑是农村上千年流传下来的习俗。具有浓厚的乡村风味，打糍粑活动成为大家过年前的一项重要准备活动。糍粑由糯米蒸熟再通过特质石材凹槽冲打而成，手工打糍粑很费力，但是做出来的糍粑柔软细腻，味道极佳。
</p>
</div>
</div>
</li>
<li>
<div>
<img src="images/food6.jpg" alt="">
<div>
<h2>八宝饭</h2>
<p>所谓八宝,分别是玉鱼、和合、鼓板、磬、龙门、灵芝、松、鹤八种祥瑞之物。八宝饭是上海人传统年夜饭必不可少的食物，象征团团圆圆、吉祥平安。</p>
</div>
</div>
</li>
</ul>
</div>
<div class="inf-chun">
<h1>有趣视频</h1>
<div class="msg-chun">
<ul class="msg">
<li class="box">
<a href="https://www.bilibili.com/video/BV1vb411z7nf" target="_blank">
<div class="pic"><img src="images/msg1-chun.jpg" alt=""></div>
<a href="https://www.bilibili.com/video/BV1vb411z7nf" target="_blank">春节在美国影响力有多大？学校放假庆春节！</a>
</a>
</li>
<li class="box">
<a href="https://www.bilibili.com/video/BV1wW41177cY/?spm_id_from=333.788.videocard.0"
target="_blank">
<div class="pic"><img src="images/msg2-chun.jpg" alt=""></div>
<a href="https://www.bilibili.com/video/BV1wW41177cY/?spm_id_from=333.788.videocard.0"
target="_blank">中国春节在美国影响大不大？看看美国人怎么庆春节！</a>
</a>
</li>
<li class="box">
<a href="https://v.qq.com/x/page/m0370itb6my.html" target="_blank">
<div class="pic"><img src="images/msg3-chun.jpg" alt=""></div>
<a href="https://v.qq.com/x/page/m0370itb6my.html"> 春节早已无国界,一起看看我们与外国人眼中的春节吧!</a>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>2.3 清明节页面（qingming.html）
**技术特点：**
- 多级标签页设计，实现内容的分类展示和管理
- JavaScript动态交互，提升用户体验
- 响应式图片布局，优化视觉呈现
- 引用经典诗词，增强文化氛围
**内容涵盖：**
- 传承发展：节日融合（寒食节、上巳节）、假期变迁、发展演变的历史脉络
- 传统习俗：扫墓祭祖、踏青、插柳、蚕花会等习俗的详细介绍和文化内涵
- 节令食品：青团、艾粄、乌稔饭、子推馍、薄饼、朴籽粿等传统节令美食
- 引用唐代诗人杜牧的《清明》诗句，营造文化氛围
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清明节</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
<link rel="shortcut icon" href="favicon4.ico">
</head>
<body>
<div class="header1 w">
<div class="logo1"><a href="#"><img src="images/logo1.png" alt=""></a></div>
<div class="index2 index"><a href="index.html">返回首页</a></div>
<div class="poetry">
<div>
<p>
清明时节雨纷纷，路上行人欲断魂。<br>
借问酒家何处有，牧童遥指杏花村。
</p>
</div>
</div>
</div>
<div class="describe">
<p>清明节，又称踏青节、行清节、三月节、祭祖节等，节期在仲春与暮春之交。清明节源自上古时代的祖先信仰与春祭礼俗，兼具自然与人文两大内涵，既是自然节气点，也是传统节日。扫墓祭祖与踏青郊游是清明节的两大礼俗主题。</p>
</div>
<div class="develop">
<div class="contain">
<div class="sub_title1"><img src="images/banner1.jpg" alt=""></div>
<div class="add"></div>
<h1>传承发展</h1>
</div>
</div>
<div class="tab_develop w">
<div class="tab_list_q">
<ul>
<li class="current">节日融合</li>
<li>假期变迁</li>
<li>发展演变</li>
</ul>
</div>
<div class="tab_con">
<div class="item_q" style="display: block">
<div class="pic1"><img src="images/pic1.jpg" alt=""></div>
<h2>融合寒食节习俗</h2>
<p>
清明节在历史发展中融合了寒食节的禁火、冷食习俗。传说寒食节是在春秋时代为纪念晋国的忠义之臣介子推而设立的节日，在民间传说中寒食节虽与介子推有关，但寒食起源，并非为纪念介子推，而是沿袭了上古的改火旧习，即如《周礼》所说“仲春以木铎修火禁于国中”。寒食节是流传于我国北方中原一带古代较早的节日，寒食节初为节时，禁烟火、只吃冷食，在后世的发展中逐渐增加了上坟祭扫、秋千、蹴鞠、牵勾、斗鸡等风俗。由于北方寒冷，春三月气温上升正值改火的时节，人们在新火未到之时，要禁止生火。
</p>
<p>汉代称寒食节为禁烟节，因为这天百姓人家不得举火，到了晚上才由宫中点燃烛火，并将火种传至贵戚重臣家中。据《后汉书》记载，最初的寒食节时间很长，最长的105天，最短的也要近1个月。寒食节期间不得生火，只能生食，对人的健康不利。从文献记载可知，先秦时期我国北方一些地方已有比较严格的禁火制度，从官方到民间都有改火的习俗。成书于两汉之间的《周礼》即明确记载当时有“司炬”之官，每当仲春季节，气候干燥，不仅人类保存的火种容易引起火灾，而且春雷发生也易引起山火。古人在这个季节往往要进行隆重的祭祀活动，把上一年传下来的火种全部熄灭，即是“禁火”。然后重新钻燧取出新火，作为新一年生产与生活的起点，谓之“改火”。在禁火与改火期间，人们必须准备足够的熟食以冷食度日。由于古代的禁火制度过于残酷和严厉，并不顾各地具体情况，甚至影响到民众的生产和生活。于是，汉代发生了周举在太原一带废除禁火陋俗的事件。汉代的寒食节，很多地方要禁火一个月，到了唐代，寒食节变成三天，分别叫大寒食、官寒食、小寒食。唐朝之后，寒食节逐渐式微。宋元时期，清明节的地位上升到取代寒食节的地位。
</p>
<div class="pic2"><img src="images/pic2.jpg" alt=""></div>
<h2 class="change">融合上巳节习俗</h2>
<p>
清明节还融合了另外一个较早出现的节日—上巳节的习俗内容。上巳节，俗称三月三。上巳节是古代举行“祓除畔浴”活动
中最重要的节日，人们结伴去水边沐浴，称为“祓禊”，此后又增加了祭祀宴饮、曲水流觞、郊外游春等内容。上古时代
以“干支”纪日，三月上旬的第一个巳日，谓之“上巳”。“上巳”一词最早出现在汉代文献，《周礼》郑玄注：“岁时祓除，如今三月上巳如水上之类。”魏晋以后，上巳节的节期改为阴历三月初三，故又称“重三”或“三月三”。
上巳习俗——祓除衅浴、郊外游春上巳节主要风俗是郊外游春、春浴、祓禊（临河洗浴，以祈福消灾）等。古代，每逢三月时令，人们都去水边祭祀。晋代陆机有诗写到：“迟迟暮春日，天气柔且嘉。元吉隆初巳，濯秽游黄河。”即是当时人们在上巳节祓禊、踏青的生动写照，诚如唐代大诗人王维诗句“少年分日作遨游，不用清明兼上巳”。到了宋代，上巳节逐渐销声匿迹，不见于文献记载。
</p>
</div>
<div class=" item_q">
<div class="pic3"><img src="images/pic3.jpg" alt=""></div>
<p class="tab">清明节虽有着久远的历史源头，但在全国范围盛行并设扫墓假期是在唐宋之后。据资料记载，唐代，由于官吏回乡扫墓，
时有耽误职守的事，唐玄宗颁布政令解决假期的问题。开始规定寒食节放假四天：“（开元）二十四年（736年）二月二
十一敕：‘寒食、清明四日为假。’”（《唐会要》卷八十二），按大历十二年（777年）诏令，唐朝衙门依例放假五天：
“自今以后，寒食通清明，休假五日。”。到贞元六年（790年），假日加到七天。这样官员们可以从容地进行扫墓祭奠
之事。唐朝王冷然的《寒食篇》中说：“秋贵重阳冬贵蜡，不如寒食在春前。”由此可见，当时寒食节已经成为唐朝一个
很隆重的节日。</p>
<p>
清明时节雨纷纷。宋代的寒食、清明也放假七天。北宋庞元英《文昌杂录》卷一记载：“祠部休假岁凡七十有六日，元
日、寒食、冬至各七日。”南宋陈元靓《岁时广记》卷十五引宋吕原明《岁时杂记》说：“清明前二日为寒食节，前后
各三日，凡假七日。而民间以一百四日禁火，谓之私寒食，又谓之大寒食。北人皆以此日扫祭先茔，经月不绝，俗有
寒食一月节之谚。”据宋《梦粱录》记载：每到清明节，“官员士庶俱出郊省墓，以尽思时之敬。”清明前后的扫墓活动
常成为社会全体亲身参与的事，数日内郊野间人群往来不绝，规模极盛。
</p>
<div class="pic4"><img src="images/pic4.jpg" alt=""></div>
<p> 1935年中华民国政府明定4月5日为国定假日清明节。2007年12月7日，国务院第198次常务会议通过了修改《全国年节
及纪念日放假办法》的决定，其中规定“清明节，放假1天（农历清明当日）；2008年，清明节正式成为法定节假日，
放假一天；2009年，清明节假期包括调休又改为3天。
</p>
</div>
<div class="item_q">
<div class="pic6"><img src="images/pic6.jpg" alt=""></div>
<p class="tab">
清明节是中华民族的春祭大节，与清明春祭相对应的是重阳秋祭，春秋二祭，古已有之。中华民族自古就有礼敬祖先、慎终追远的礼俗观念。清明节有着久远的历史，它随着时代的发展而变化，后续渐渐融合了寒食节和上巳节的习俗。古时我国南北风俗各异，唐代以前我国北方上墓祭扫主要是在寒食节与寒衣节。从《礼经》等文献的记载来看，唐代以前我国北方并没有清明节上墓祭扫的例规，到了唐代时清明节上墓祭扫已成风气。
</p>
<div class="pic5"><img src="images/pic5.jpg" alt=""></div>
<p>唐代是我国南北各地墓祭风俗融合时期，沿袭清明墓祭风俗，并扩大到全国各地。唐朝之后，寒食节逐渐式微，因与清明节日期相近。宋元时期，清明节上升到取代寒食节的地位，并融汇了寒食节的禁火、冷食等习俗内容。融汇了寒食与上巳两个节日习俗的清明节，在宋元时期形成一个以祭祖扫墓为中心，将寒食的禁火、冷食风俗与上巳郊游等习俗活动相融合定型；由于寒食节的禁火、冷食习俗移置到清明节，我国北方一些地方还保留着在清明节禁火与吃冷食的习惯。明清大体承接前代旧制，清明节仍然坚持并发展着其在春季生活中一个必不可少的大节的地位。民国时期，清明节这天，除了原有的扫墓、踏青等习俗，植树也被确定为常规项目，这实际上不过是对民间长期延续的植树风俗的一个官方认定。
</p>
</div>
</div>
</div>
<script>
//tab栏制作
//获取元素
var tab_list_q = document.querySelector('.tab_list_q');
var lis_q = tab_list_q.querySelectorAll('li');
var items_q = document.querySelectorAll('.item_q');
// for循环绑定点击事件
for (var i = 0; i < lis_q.length; i++) {
// 开始给5个小li 设置索引号
lis_q[i].setAttribute('index', i);
lis_q[i].onclick = function () {
// 1. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式
// 干掉所有人 其余的li清除 class 这个类
for (var i = 0; i < lis_q.length; i++) {
lis_q[i].className = '';
}
// 留下我自己
this.className = 'current';
// 2. 下面的显示内容模块
var index = this.getAttribute('index');
console.log(index);
// 干掉所有人 让其余的item 这些div 隐藏
for (var i = 0; i < items_q.length; i++) {
items_q[i].style.display = 'none';
}
// 留下我自己 让对应的item 显示出来
items_q[index].style.display = 'block';
}
}
</script>
<div class="custom">
<div class="contain">
<div class="sub_title2"><img src="images/banner2.jpg" alt=""></div>
<div class="add"></div>
<h1>传统习俗</h1>
</div>
</div>
<div class="tab_custom_q1 w">
<div class="tab_list_q1">
<ul>
<li class="current">扫墓祭祖</li>
<li>踏青</li>
<li>插柳</li>
<li>蚕花会</li>
</ul>
</div>
<div class="tab_con">
<div class="item_q1" style="display: block">
<div class="pic11"><img src="images/pic11.jpg" alt=""></div>
<p class="tab">
清明扫墓，即为“墓祭”，谓之对祖先的“思时之敬”，祭扫祖先是对先人的缅怀方式，其习俗由来久远。据考古发掘，广
东英德青塘遗址发现了万年前的墓葬，经加速器质谱(AMS)测定，年代距今13500年左右，时代为旧石器时代晚期，是中
国年代最早的可确认葬式的墓葬，表明距今1万多年前，岭南古人已具有明确的有意识墓葬行为和礼俗观念。扫墓祭祖，
是清明节俗的中心。清明之祭主要祭祀祖先，表达祭祀者的孝道和对先人的思念之情，是礼敬祖先、慎终追远的一种文
化传统。清明祭祀按祭祀场所的不同可分为墓祭、祠堂祭。以墓祭最为普遍，清明祭祀的特色就是墓祭，清明祭祀被称
为扫墓，主要是由于采取墓祭方式。另一种形式是祠堂祭，又称庙祭，是一个宗族的人聚集在祠堂共祭祖先，祭完后要
开会聚餐等，这种祭祀是团聚族人的一种方式。</p>
<div class="pic22"><img src="images/pic22.jpg" alt=""></div>
<p> 清明节扫墓
清明祭祀在清明前后，各地有所差异。清明祭祖，按照习俗，一般在清明节上午出发扫墓。拜清的方式或项目各地有所
不同，常见的做法有两部分内容组成：一是整修坟墓，二是挂烧纸钱、供奉祭品。扫墓时首先整修坟墓，其做法主要是
清除杂草，培添新土，然后叩头行礼祭拜。这种行为一方面可以表达祭祀者对先人的孝敬和关怀，另一方面，在古人的
信仰里，祖先的坟墓和子孙后代的兴衰福祸有莫大的关系，所以培墓是不可轻忽的一项祭奠内容。所供奉祭品主要是食
品，品种各地不同，都是当地人认为的并且按祭祀者的经济能力能拿得出来的美味佳肴，或合于时令的特色食品。
</p>
</div>
<div class=" item_q1">
<div class="pic33"><img src="images/pic33.jpg" alt=""></div>
<p class="tab">
中华民族自古就有清明踏青的习俗。踏青古时叫探春、寻春等，即为春日郊游，也称“踏春”。一般指初春时到郊外散步游玩。踏青这种节令性的民俗活动，在我国有着悠久的历史，其源泉是远古农耕祭祀的迎春习俗，这种农耕祭祀的迎春习俗对后世影响深远。清明节兼具节气与节日两大内涵，清明节气在时间和气象物候特点上为清明踏青习俗的形成提供了重要条件。清明时节，春回大地，自然界到处呈现一派生机勃勃的景象，正是郊游的大好时光。人们乃因利趁便，扫墓之余亦一家老少在山乡野间游乐一番。
</p>
<div class="pic44"><img src="images/pic44.jpg" alt=""></div>
<p> 中国民间长期保持着清明踏青的习惯，踏青习俗由来已久。清明期间正是春风得意、春意盎然的时节，万物萌动之时，迎春郊游于野外早就已成为风俗。据《晋书》记载：每年春天，人们都要结伴到郊外游春赏景。踏青风俗至唐宋尤盛。据《旧唐书》记载：“大历二年二月壬午，幸昆明池踏青。”可见，踏青春游的习俗早已流行。
</p>
</div>
<div class="item_q1">
<div class="pic22"><img src="images/pic55.jpg" alt=""></div>
<p class="tab">
清明节，中国民间有插柳习俗。清明插柳习俗，其来源普遍存在三种说法。有专家认为，插柳的风俗，是为了纪念“教民稼穑”的农事祖师神农氏的。有的地方，人们把柳枝插在屋檐下，以预报天气，古谚有“柳条青，雨蒙蒙；柳条干，晴了天”的说法。杨柳有强大的生命力，俗话说：“有心栽花花不发，无心插柳柳成荫。”柳条插土就活，插到哪里，活到哪里，年年插柳，处处成荫。
</p>
<div class="pic22"><img src="images/pic66.jpg" alt=""></div>
<p>
清明插柳戴柳另一种说法是驱鬼辟邪。我国北方一些地方将清明节、中元节、寒衣节，合称为“三大鬼节”。因受佛教观世音手持柳枝蘸水普度众生的影响，许多人便认为柳条有驱鬼辟邪的作用，把柳枝称为“鬼怖木”。北魏贾思勰《齐民要术》中写道：“取杨柳枝著户上，百鬼不入家。”清明既然是鬼节，值此柳条发芽时节，人们便纷纷插柳戴柳以辟邪了。还有一种说法是，此俗是为了纪念介子推。介子推为明志守节而焚身于大柳树下，让晋文公和群臣百姓痛心不已。第二年，晋文公亲率群臣爬上山来祭拜介子推时，发现当年被烧毁的那棵老柳树居然死而复生。晋文公当下便将老柳树赐名为“清明柳”，并且当场折下几枝柳条戴在头上，以示怀念之情。从此以后，群臣百姓纷纷效仿，遂相沿成风。清明插柳戴柳成为纪念介子推的一种象征。
</p>
</div>
<div class="item_q1">
<div class="pic88"><img src="images/pic88.jpg" alt=""></div>
<p class="tab">
“蚕花会”是蚕乡一种特有的民俗文化，过去清明节期间，梧桐、乌镇、崇福、洲泉等地都有此项民俗活动。其中以洲泉的马鸣庙和青石的双庙诸的蚕花会最为精彩隆重。马鸣庙位于洲泉镇西，在当地有“庙中之王”之称，每年蚕花会人山人海，活动频繁，有迎蚕神、摇快船、闹台阁、拜香凳、打拳、龙灯、翘高竿、唱戏文等十多项活动。这些活动有的在岸上进行，绝大多数在船上进行，极具水乡特色。
</p>
</div>
</div>
</div>
<script>
//tab栏制作
//获取元素
var tab_list_q1 = document.querySelector('.tab_list_q1');
var lis_q1 = tab_list_q1.querySelectorAll('li');
var items_q1 = document.querySelectorAll('.item_q1');
// for循环绑定点击事件
for (var i = 0; i < lis_q1.length; i++) {
// 开始给5个小li 设置索引号
lis_q1[i].setAttribute('index', i);
lis_q1[i].onclick = function () {
// 1. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式
// 干掉所有人 其余的li清除 class 这个类
for (var i = 0; i < lis_q1.length; i++) {
lis_q1[i].className = '';
}
// 留下我自己
this.className = 'current';
// 2. 下面的显示内容模块
var index = this.getAttribute('index');
console.log(index);
// 干掉所有人 让其余的item 这些div 隐藏
for (var i = 0; i < items_q1.length; i++) {
items_q1[i].style.display = 'none';
}
// 留下我自己 让对应的item 显示出来
items_q1[index].style.display = 'block';
}
}
</script>
<h1 class="qing">节令食品</h1>
<div class="eating ">
<ul class="w">
<li><img src="images/eating1.jpg" alt=""></li>
<li>
<div>
<h2>青团</h2>
<p> 人们把清明果叫成青青裹、清明团子等，一般选取的野草主要是艾草。艾草做的清明果为深绿色，有股浓郁的艾味。取当季的野草做成新鲜绿汁液后，混入糯米团中蒸制而成。</p>
</div>
</li>
<li><img src="images/eating2.jpg" alt=""></li>
<li>
<div>
<h2>艾粄</h2>
<p>
每年清明节，清明时节，人们在外出祭祀、踏青时便会采摘些鲜嫩的艾叶、鼠曲草、竺叶、鸡矢藤和使君子等用于制作各类清明粄。</p>
</div>
</li>
<li>
<div>
<h2>乌稔饭</h2>
<p> 又名乌米饭，每年三月初三，畲族人煮“乌稔饭”，并馈赠汉族的亲戚朋友</p>
</div>
</li>
<li><img src="images/eating3.jpg" alt=""></li>
<li>
<div>
<h2>子推馍</h2>
<p> 清明节前一天为寒食节。寒食节不准动烟火，只能吃冷食凉菜，以纪念春秋时期介子推。后因寒食和清明相连，逐渐合为一个节日，清明节前蒸子推馍在陕北的榆林和延安两地一直流传至今。</p>
</div>
</li>
<li><img src="images/eating4.jpg" alt=""></li>
<li><img src="images/eating5.jpg" alt=""></li>
<li>
<div>
<h2>薄饼</h2>
<p>是广东潮州、福建福州地区传统的特色名点，每逢清明节的早上上山祭祖，祭完祖回家之后， 人们都会用薄饼作为午餐。</p>
</div>
</li>
<li><img src="images/eating6.jpg" alt=""></li>
<li>
<div>
<h2> 朴籽粿</h2>
<p> 朴籽粿是海内外潮人们的清明节必备传统的糕点，清明节，远在异乡、海外的潮汕乡亲回乡扫墓时都会供奉上朴籽粿，缅怀先人。</p>
</div>
</li>
</ul>
</div>
<!-- <div>
<h1>分割</h1>
</div> -->
</body>
</html>2.4 中秋节页面（zhongqiu.html）
**技术特点：**
- 标签式内容组织，方便用户分类浏览
- 响应式设计，确保在不同设备上的良好显示
- 多媒体内容集成，包括图片和视频链接
- 海外内容展示，拓展国际视野
**内容涵盖：**
- 传说故事：丑女无盐拜月、玄宗漫游月宫、嫦娥奔月、吴刚折桂、朱元璋与月饼起义等经典传说
- 传统民俗：祭月、赏月、吃月饼、玩花灯、赏桂花饮桂花酒等习俗介绍
- 中秋海外：华人华侨在海外过中秋的情况和外国人如何庆祝中国中秋节
- 有趣视频资讯：提供关于中秋节的趣味视频和资讯链接
- 引用宋代词人苏轼的《水调歌头·明月几时有》，增强文化底蕴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>中秋节</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
<link rel="shortcut icon" href="favicon3.ico">
</head>
<body>
<div class="header2 w">
<div class="logo2"><a href="#"><img src="images/logo2.png" alt=""></a></div>
<div class="index1 index"><a href="index.html">返回首页</a></div>
<div class="poetry">
<div>
<p>
明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。</br>
转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。
</p>
</div>
</div>
</div>
<div class="describe2">
<p>中秋节，又称祭月节、月光诞、月夕、秋节、团圆节等，是中国民间的传统节日。中秋节源自天象崇拜，由上古时代秋夕祭月演变而来。最初“祭月节”的节期是在干支历二十四节气“秋分”这天，后来才调至夏历（农历）八月十五。中秋节自古便有祭月、赏月、吃月饼等民俗，流传至今，经久不息。
</p>
</div>
<div class="history2">
<div class="contain">
<div class="sub_title1"><img src="images/banner-au1.jpg" alt=""></div>
<div class="add"></div>
<h1>传说故事</h1>
</div>
</div>
<div class="tab_history2 w">
<div class="tab_list">
<ul>
<li class="current">丑女无盐拜月</li>
<li>玄宗漫游月宫</li>
<li>嫦娥奔月</li>
<li>吴刚折桂</li>
<li>朱元璋与月饼起义</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block">
<div class="qiu1"> <img src="images/qiu1.jpg" alt=""></div>
<p class="tab">
丑女无盐是战国时期齐国人,芳名钟离春。相传丑女无盐幼年时曾虔诚拜月,长大之后,以超群品德入宫,但未被宠幸。一年八月十五的中秋之夜,无盐正在拜月,齐宣王偶然看到月光下的无盐,觉得她美丽出众,风姿超群,便立她为王后,中秋拜月由此而来。月中嫦娥,以美貌著称,故少女拜月,愿“貌似嫦娥,面如皓月”。
</p>
</div>
<div class="item">
<div class="qiu2"> <img src="images/qiu2.jpg" alt=""></div>
<p class="tab">
在唐朝,最富有传奇色彩的就是游夜宫的传说了。相传唐玄宗与申天师及道士鸿都中秋望月,突然玄宗兴起游月宫之念,于是天师作法,三人一起步上青云,漫游月宫,但宫前有守卫森严,无法进入,只能在外俯瞰长安皇城,在此之际,忽闻仙声阵阵,清丽奇绝,宛转动人!唐玄宗素来熟通音律,于是默记心中。这正是“此曲只应天上有,人间哪得几回闻!日后玄宗回忆月宫仙娥的音乐歌声,自己又谱曲编舞,这便是历史上有名的“霓裳羽衣曲”。
</p>
</div>
<div class="item">
<div class="qiu3"> <img src="images/qiu3.png" alt=""></div>
<p class="tab">
相传,远古时候天上有十日同时出现,晒得庄稼枯死,民不聊生,一个名叫后羿的英雄,同情受苦的百姓,登上昆仑山顶,运足神力,拉开神弓,一气射下九个多太阳,并严令最后一个太阳按时起落,为造福。后羿因此受到百姓的尊敬和爱戴,他娶了个美丽善良的妻子,名叫嫦娥。后羿除传艺狩猎外,终日和妻子在一起,人们都羡慕这对郎才女貌的恩爱夫妻。不少志士慕名前来投师学艺,心术不正的蓬蒙也混了进来。一天,后羿到昆仑山访友求道,巧遇由此经过的王母娘娘,便向王母求得一包不死药。据说,服下此药,能即刻升天成仙。然而,后羿舍不得撇下妻子,只好暂时把不死药交给嫦娥珍藏。嫦娥将药藏进梳妆台的百宝匣里,不料被小人蓬蒙看见了,他想偷吃不死药自己成仙。有一次,后羿率众徒外出狩猎,蓬蒙待后羿率众人走后不久,手持宝剑闯入内宅后院,威逼嫦娥交出不死药。嫦娥危急之时转身打开百宝匣,拿出不死药自己吞了下去。嫦娥吞下药,身子立时飘离地面、冲出窗口,向天上飞去。
</p>
<p>
由于嫦娥牵挂着丈夫,便飞落到离人间最近的月亮上成了仙。傍晚,后羿回到家,侍女们哭诉了白天发生的事。后羿既惊又怒,抽剑去杀恶徒,蓬蒙早已逃走,后羿悲痛欲绝,仰望着夜空呼唤爱妻的名字,这时他惊奇地发现,今天的月亮格外皎洁明亮,而且有个晃动的身影酷似嫦娥。他拼命朝月亮追去,可是他追三步,月亮退三步,他退三步,月亮进三步,无论怎样也追不到跟前。后羿无可奈何,又思念妻子,只好派人到嫦娥喜爱的后花园里,摆上香案,放上她平时最爱吃的蜜食鲜果,遥祭在月宫里眷恋着自己的嫦娥。百姓們蜜食鲜果,遥祭在月宫里眷恋着自己的嫦娥。百姓们闻知嫦娥奔月成仙的消息后,纷纷在月下摆设香案向善良的嫦娥祈求吉祥平安。从此,中秋节拜月的风俗在民间传开了。
</p>
</div>
<div class="item">
<div class="qiu4"> <img src="images/qiu4.jpg" alt=""></div>
<p class="tab">
吴刚折桂相传月亮上的广寒宫前的桂树生长繁茂,有五百多丈高,下边有一个人常在砍伐它,但是每次砍下去之后,被砍的地方又立即合拢了。几千年来,就这样随砍随合,这棵桂树永远也不能被砍光。据说这个砍树的人名叫吴刚,是汉朝西河人,曾跟随仙人修道到了天界,但是他犯了错误,仙人就把他贬谪到月宫,日日做这种徒劳无功的苦差使,以示惩处。李白诗中有“欲斫月中桂,持为寒者薪的记载。
</p>
</div>
<div class="item">
<div class="qiu5"> <img src="images/qiu5.jpg" alt=""></div>
<p>中秋节吃月饼相传始于元代。当时,中原广大人民不堪忍受元朝统治阶级的残酷统治,纷纷起义抗元。朱元璋联合各路反抗力量准备起义。但朝庭官兵搜查的十分严密,传递消息十分困难。军师刘伯温便想出一计策,命令属下把藏有“八月十五夜起义的纸条藏入饼子里面,再派人分头传送到各地起义军中,通知他们在八月十五日晚上起义响应。到了起义的那天,各路义军一齐响应,起义军如星火燎原。很快,徐达就攻下元大都,起义成功了。消息传来,朱元璋高兴得连忙传下口谕,在即将来临的中秋节,让全体将士与民同乐，并将当年起兵时以秘密传递信息的“月饼”，作为节令糕点赏赐群臣。此后，“月饼”制作越发精细，品种更多，大者如圆盘，成为馈赠的佳品。以后中秋节吃月饼的习俗便在民间流传开来。
</p>
</div>
</div>
</div>
<script>
//tab栏制作
//获取元素
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
// for循环绑定点击事件
for (var i = 0; i < lis.length; i++) {
// 开始给5个小li 设置索引号
lis[i].setAttribute('index', i);
lis[i].onclick = function () {
// 1. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式
// 干掉所有人 其余的li清除 class 这个类
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
// 留下我自己
this.className = 'current';
// 2. 下面的显示内容模块
var index = this.getAttribute('index');
console.log(index);
// 干掉所有人 让其余的item 这些div 隐藏
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
// 留下我自己 让对应的item 显示出来
items[index].style.display = 'block';
}
}
</script>
<div class="custom2">
<div class="contain">
<div class="sub_title2"><img src="images/banner-au2.jpg" alt=""></div>
<div class="add"></div>
<h1>传统民俗</h1>
</div>
</div>
<div class="tab_custom w">
<div class="tab_list1">
<ul>
<li class="current">祭月</li>
<li>赏月</li>
<li>吃月饼</li>
<li>玩花灯</li>
<li>赏桂花，饮桂花酒</li>
</ul>
</div>
<div class="tab_con">
<div class="item1" style="display: block">
<div class="cus1"><img src="images/cus1.jpg" alt=""></div>
<p class="tab">
祭月，在我国是一种十分古老的习俗，实际上是古人对“月神”的一种崇拜活动。在古代有“秋暮夕月”的习俗。夕月，即拜祭月神。自古以来，在广东部分地区，人们都有在中秋晚上拜祭月神（拜月娘、拜月光）的习俗。拜月，设大香案，摆上月饼、西瓜、苹果、红枣、李子、葡萄等祭品。在月下，将“月神”牌位放在月亮的那个方向，红烛高燃，全家人依次拜祭月亮，祈求福佑。祭月赏月，托月追思，表达了人们的美好祝愿。祭月作为中秋节重要的祭礼之一，从古代延续至今，逐渐演化为民间的赏月、颂月活动，同时也成为现代人渴望团聚、寄托对生活美好愿望的主要形态
</p>
</div>
<div class=" item1">
<div class="cus2"><img src="images/cus2.jpg" alt=""></div>
<p class="tab">赏月的风俗来源于祭月，严肃的祭祀变成了轻松的欢娱。据说此夜月球距地球最近，月亮最大最圆最亮，所以从古至今都
有饮宴赏月的习俗；回娘家的媳妇是日必返夫家，以寓圆满、吉庆之意。民间中秋赏月活动的文字记载出现在魏晋时期，但未成习。到了唐代，中秋赏月、玩月颇为盛行，许多诗人的名篇中都有咏月的诗句</p>
</div>
<div class="item1">
<div class="cus3"><img src="images/cus3.jpg" alt=""></div>
<p class="tab">
月饼，又叫月团、丰收饼、宫饼、团圆饼等，是古代中秋祭拜月神的供品。月饼最初是用来祭奉月神的祭品，后来人们逐渐把中秋赏月与品尝月饼，作为家人团圆的一大象征。月饼象征着大团圆，人们把它当作节日食品，用它祭月、赠送亲友。发展至今，吃月饼已经是中国南北各地过中秋节的必备习俗，中秋节这天人们都要吃月饼以示“团圆”。
</p>
</div>
<div class="item1">
<div class="cus4"><img src="images/cus4.png" alt=""></div>
<p class="tab">
中秋节，有许多的游戏活动，首先是玩花灯。中秋是我国三大灯节之一，过节要玩灯。当然，中秋没有像元宵节那样的大型灯会，玩灯主要只是在家庭、儿童之间进行的。早在北宋《武林旧事》中，记载中秋夜节俗，就有将“一点红”灯放入江中漂流玩耍的活动。
</p>
<p> 中秋玩花灯，多集中在南方。如佛山秋色会上，就有各种各式的彩灯：芝麻灯、蛋壳灯、刨花灯、稻草灯、鱼鳞灯、谷壳灯、瓜籽灯及鸟兽花树灯等，令人赞叹。在广西南宁一带，除了以纸竹扎各式花灯让儿童玩耍外，还有很朴素的柚子灯、南瓜灯、桔子灯。所谓柚子灯，是将柚子掏空，刻出简单图案，穿上绳子，内点蜡烛即成，光芒淡雅。南瓜灯、桔子灯也是将瓤掏去而成。虽然朴素，但制作简易，很受欢迎，有些孩子还把柚子灯漂入池河水中作游戏。广西有简单的户秋灯，是以六个竹篾圆圈扎成灯，外糊白纱纸，内插蜡烛即成，挂于祭月桌旁祭月用，也可给孩子们玩。如今两广的不少地区，在中秋夜布置灯会，扎制用电灯照亮的大型现代灯彩，还有用塑料制成的各式新型花灯供儿童玩，但却少了一份旧时灯彩的纯朴之美。
</p>
</div>
<div class="item1">
<div class="cus5"><img src="images/cus5.jpg" alt=""></div>
<p class="tab">
人们经常在中秋时吃月饼赏桂花，食用桂花制作的各种食品，以糕点、糖果最为多见。中秋之夜，仰望着月中丹桂，闻着阵阵桂香，喝一杯桂花蜜酒，欢庆合家甜甜蜜蜜，已成为节日一种美的享受。到了现代，人们多是拿红酒代替。
</p>
</div>
</div>
</div>
<script>
//传统习俗
//tab栏制作
//获取元素
var tab_list1 = document.querySelector('.tab_list1');
var lis1 = tab_list1.querySelectorAll('li');
var items1 = document.querySelectorAll('.item1');
// for循环绑定点击事件
for (var i = 0; i < lis1.length; i++) {
// 开始给5个小li 设置索引号
lis1[i].setAttribute('index', i);
lis1[i].onclick = function () {
// 1. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式
// 干掉所有人 其余的li清除 class 这个类
for (var i = 0; i < lis1.length; i++) {
lis1[i].className = '';
}
// 留下我自己
this.className = 'current';
// 2. 下面的显示内容模块
var index = this.getAttribute('index');
console.log(index);
// 干掉所有人 让其余的item 这些div 隐藏
for (var i = 0; i < items1.length; i++) {
items1[i].style.display = 'none';
}
// 留下我自己 让对应的item 显示出来
items1[index].style.display = 'block';
}
}
</script>
<div class="co_inf w">
<div class="broad ">
<h1>中秋海外</h1>
<p>“但愿人长久，千里共婵娟。”无论时光如何流逝，炎黄儿女心中都有着恒久不变的中秋情结。可以说，有华人在的地方就有中国的传统佳节。近些年来，随着越来越多的华人远渡重洋、移居海外，也将中国的传统节日“漂洋过海”带去了大洋彼岸。在这个团圆喜庆其乐融融的节日里，海内外中华儿女及外国友人就都在用不同的形式庆祝这一中国传统佳节。
</p>
<div class="content">
<h3>华人华侨过中秋（华人的传承——关于乡情）</h3>
<p>
中秋节对于华人来说最重要的意义就是团圆。老一辈的移民对于中秋，总是掺杂着对故乡浓浓的眷恋之情.他们表示，自己的孩子、孙子对中秋节的感情渐渐淡了，他们更熟悉且重视感恩节、圣诞节这些西方节日。但到了中秋等传统节日他一定会把大家聚起来联络感情阖家庆祝，也希望以此让后代们记住自己的根。当然，每年也有许多的来自世界各地的华人小孩或是热爱中华文化的外国人，寄来画作以庆中秋。
</p>
<div class="child clearfix">
<ul>
<li class="child1">
<img src="images/child1.jpg" alt="">
<p>《明月寄相思》 <br>
张熙骅作 （7岁）（寄自英国）
</p>
</li>
<li class="child2">
<img src="images/child2.jpg" alt="">
<p>
《中秋节快乐》 <br>
吴玥莹作（六岁）（寄自荷兰）
</p>
</li>
<li class="child3">
<img src="images/child3.jpg" alt="">
<p>
《月亮和月饼》 <br>
章小妖作（七岁）（寄自荷兰）
</p>
</li>
<li class="child4">
<img src="images/child4.jpg" alt="">
<p>荷兰丹华文化教育中心学生手工制作的中秋作品</p>
</li>
</ul>
</div>
<div>
<h3>方式</h3>
<p>
1.吃月饼</br>
华人中秋，月饼不但富有含义，更是一种象征。在海外，早些年的时候，月饼还是稀罕物，很多地方的华人还需要自己动手做月饼，以寄托思乡之情。但现在几乎在世界各地都能买到来自中国的美食，许多华人也不必自己做才能吃到月饼，去到超市，自然会找到各式各样的中秋月饼。比如中秋期间，美国的各大华人超市，月饼销售兴旺，琳琅满目的，有广式，苏式、香港、澳门风味。
</p>
<div class="con-chun"><img src="images/con-chun.jpg" alt=""></div>
<p>
2.参加文艺晚会</br>
在海外，许多住在唐人街的华人华侨也会举办中秋文艺晚会，虽然没有那么盛大，但也富有各自的特色。在美国，华人街道一般会张灯结彩，街会不少摊位出售月饼、灯笼，举办各种活动，比如免费拿报纸，免费试食中国小吃等。中文学校的学生会穿上传统服装，表演传统乐器，在街会上巡游。一些专业舞龙舞狮的队伍会进行巡游和表演，把节日气氛带向高潮。除此之外，中秋晚会上还会表演中国的传统音乐和舞蹈，有形式多样的歌舞表演，有优美的合唱朗诵，在参加了中秋节期间的各类庆典活动和文艺晚会后，许多华人华人表示文艺晚会不仅可以表达对亲人的思念，更是一种文化的传播，让当地长大的二、三代华人了解到中华文化的博大精深。
</p>
<p> 3.与家人团聚</p>
</div>
<h3>外国人过中秋</h3>
<div class="con-chun2"><img src="images/con-chun2.jpg" alt=""></div>
<p>近年来，随着中国国际影响力日渐提高，越来越多外国人开始了解中国，了解中国节。对美国人来说，春节和中秋都是他们喜欢的节日。他们喜欢中秋节那令人垂涎欲滴的月饼，和中秋节的美丽传说。在吃月饼的同时，越来越多世界人民知道了嫦娥的故事，还有桂花树、砍树的吴刚，甚至知道广寒宫。
</p>
</div>
</div>
</div>
<div class="inf">
<h1>有趣视频咨讯</h1>
<div class="msg-qiu">
<ul class="msg">
<li class="box">
<a href="https://baijiahao.baidu.com/s?id=1644432827351857348&wfr=spider&for=pc">
<div class="pic"><img src="images/msg1.jpg" alt=""></div>
<a href="https://baijiahao.baidu.com/s?id=1644432827351857348&wfr=spider&for=pc">过中秋节最有趣的地方</a>
</a>
</li>
<li class="box">
<a href="https://tv.sohu.com/v/dXMvMjI1NzQ2NzY4LzgwODY0ODc2LnNodG1s.html" target="_blank">
<div class="pic"><img src="images/msg2.jpg" alt=""></div>
<a href="https://tv.sohu.com/v/dXMvMjI1NzQ2NzY4LzgwODY0ODc2LnNodG1s.html"
target="_blank">文化中国—中秋节</a>
</a>
</li>
<li class="box">
<a href="https://www.bilibili.com/video/BV1GW411r7eU?from=search&seid=14405713805270708623"
target="_blank">
<div class="pic"><img src="images/msg3.jpg" alt=""></div>
<a href="https://www.bilibili.com/video/BV1GW411r7eU?from=search&seid=14405713805270708623">
哔哩哔哩对决星巴克和超市货，中秋月饼哪家强？</a>
</a>
</li>
</ul>
</div>
</div>
<!-- <div class="inf">
<h1>有趣咨讯</h1>
<div class="msg">
<div class="msg1">
<div class="box">
<div class="pic">
<img src="images/msg1.jpg" alt="">
</div>
<div class="neirong">
<a href="https://baijiahao.baidu.com/s?id=1644432827351857348&wfr=spider&for=pc">过中秋节最有趣的地方</a>
<p>
中秋节是我国的传统佳节，那么你知道全国各地，那个地方过中秋节最有趣吗？答案先不揭晓，让我们看看他们有哪些有趣的地方。
</p>
</div>
</div>
</div>
<div class="msg2">
<div class="box">
<div class="pic">
<img src="images/msg2.jpg" alt="">
</div>
<div class="neirong">
<a href="https://tv.sohu.com/v/dXMvMjI1NzQ2NzY4LzgwODY0ODc2LnNodG1s.html">文化中国—中秋节</a>
<p>简介：《文化中国》是中央新影旗下，中央电视台新科动漫...
来源：搜狐视频 发布时间：2015-07-23</p>
</div>
</div>
</div>
<div class="msg3">
<div class="box">
<div class="pic">
<img src="images/msg3.jpg" alt="">
</div>
<div class="neirong">
<a
href="https://www.bilibili.com/video/BV1GW411r7eU?from=search&seid=14405713805270708623">哔哩哔哩对决星巴克和超市货，中秋月饼哪家强？</a>
<p>
</p>
</div>
</div>
</div>
</div>
</div> -->
</body>
</html>技术架构总结
整个网站采用了现代化的前端技术栈，主要包括：
1. **HTML5**：构建语义化的网页结构，提升内容的可访问性和SEO表现
2. **CSS3**：实现响应式布局、动画效果和视觉美化，确保网站在不同设备上的良好体验
3. **JavaScript**：实现交互功能，如标签页切换、轮播图、动态内容加载等
4. **模块化设计**：通过base.css和index.css分离基础样式和页面特定样式，提高代码可维护性
5. **统一资源管理**：图片资源统一存放在images目录，JS文件存放在js目录，便于管理和优化
扫一扫
3214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
