【网页设计大作业】：端午主题（HTML+CSS+JavaScript）——中国传统文化（6页）
1.运行效果
1.1 首页效果
1.2 端午微简介效果
1.3 端午习俗说效果
1.4 端午诗词会效果
1.5 端午话家乡效果
1.6 关于作者效果
2.相关文件目录
3.相关代码
3.1 首页代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>端午，原来你如此让我感动</title>
</style>
<link href="s1.css" rel="stylesheet" type="text/css" />
<link href="s2.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
</style>
</head>
<body>
<table width="1100" border="0.5" align="center" cellpadding="1" cellspacing="0" class="ab">
<tr>
<td width="183" align="center" class="ab"><table width="1100" border="0.5" align="center" cellpadding="1" cellspacing="0" class="ab">
<tr>
<td width="93" class="11"><img src="image/main_01.jpg" width="93" height="39" /></td>
<td width="178" align="center" class="ab"><a href="index.html">首页</a></td>
<td width="170" align="center" class="11"><a href="sub1.html">端午微简介</a></td>
<td width="163" align="center" class="11"><a href="sub2.html">端午习俗说</a></td>
<td width="159" align="center" class="11"><a href="sub3.html">端午诗词会</a></td>
<td width="169" align="center" class="11"><a href="sub4.html">端午话家乡</a></td>
<td width="154" align="center" class="11"><a href="sub5.html">关于作者</a></td>
</tr>
</table></td>
</tr>
</table>
<hr width="1100" />
<table width="88%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="image/main.jpg" width="1100" height="300" /></td>
</tr>
</table>
<table width="1100" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="266" rowspan="9" align="left"><table width="1100" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="22" colspan="5" align="left" class="ab">"粽"情山水</td>
</tr>
<tr>
<td width="266" rowspan="6" align="left"><img src="image/main_02.jpg" width="266" height="636" /></td>
<td width="1" rowspan="6"><br /></td>
<td align="center" class="abc">关于端午</td>
<td align="center"> </td>
<td> </td>
</tr>
<tr>
<td>端午节，又称端阳节、龙舟节、天中节等，源于自然天象崇拜，由上古时代祭龙演变而来。仲夏端午，苍龙七宿飞升于正南中天，处于全年最“正中”之位，即如《易经·乾卦》第五爻的爻辞曰：“飞龙在天”。其起源涵盖了古老星象文化、人文哲学等方面内容，蕴含着深邃丰厚的文化内涵，在传承发展中杂糅了多种民俗为一体，节俗内容丰富。扒龙舟与食粽是端午节的两大礼俗，这两大礼俗在中国自古传承，至今不辍。 <br />
端午节与春节、清明节、中秋节并称为中国四大传统节日。端午文化在世界上影响广泛，世界上一些国家和地区也有庆贺端午的活动。2006年5月，国务院将其列入首批国家级非物质文化遗产名录；自2008年起，被列为国家法定节假日。2009年9月，联合国教科文组织正式批准将其列入《人类非物质文化遗产代表作名录》，端午节成为中国首个入选世界非遗的节日。</td>
<td> </td>
<td align="center"><img src="image/main_04.jpg" width="223" height="225" /></td>
</tr>
<tr>
<td align="center" class="abc">端午习俗</td>
<td align="left" class="abc"> </td>
<td align="left" class="abc">端午诗词</td>
</tr>
<tr>
<td height="316" rowspan="3" align="center" valign="middle"><div class="right">
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab"><img src="image/main_21.jpg" width="150" height="25" />划龙舟</div>
<div class="AccordionPanelContent"><img src="image/main_22.jpg" width="200" height="98" /></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><img src="image/main_21.jpg" width="150" height="25" />吃粽子</div>
<div class="AccordionPanelContent"><img src="image/main_23.jpg" width="200" height="98" /></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><img src="image/main_21.jpg" width="150" height="25" />挂艾草</div>
<div class="AccordionPanelContent"><img src="image/main_24.jpg" width="200" height="98" /></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><img src="image/main_21.jpg" width="150" height="25" />佩香囊</div>
<div class="AccordionPanelContent"><img src="image/main_25.jpg" width="200" height="98" /></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><img src="image/main_21.jpg" width="150" height="25" />五色线</div>
<div class="AccordionPanelContent"><img src="image/main_26.jpg" width="200" height="98" /></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><img src="image/main_21.jpg" width="150" height="27" />雄黄酒</div>
<div class="AccordionPanelContent"><img src="image/main_27.jpg" width="200" height="98" /></div>
</div>
</div>
</div></td>
<td width="66" rowspan="3" align="left" valign="middle"> </td>
<td width="279" align="center"><ul id="MenuBar1" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu" href="#">浣溪沙·端午</a>
<ul>
<li><a href="#">宋 · 苏轼</a></li>
<li><a href="#">轻汗微微透碧纨</a></li>
<li><a href="#">明朝端午浴芳兰<br />
</a></li>
<li><a href="#">流香涨腻满晴川</a></li>
<li><a href="#">彩线轻缠红玉臂</a></li>
<li><a href="#">小符斜挂绿云鬟</a></li>
<li><a href="#">佳人相见一千年</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">端午即事</a>
<ul>
<li><a href="#">宋 · 文天祥</a></li>
<li><a href="#">五月五日午，赠我一枝艾。</a></li>
<li><a href="#">故人不可见，新知万里外</a></li>
<li><a href="#">丹心照夙昔，鬓发日已改。</a></li>
<li><a href="#">我欲从灵均，三湘隔辽海。<br />
</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">乙卯重五诗</a>
<ul>
<li><a href="#">宋 · 陆游</a></li>
<li><a href="#">重五山村好，榴花忽已繁。</a></li>
<li><a href="#">粽包分两髻，艾束著危冠</a></li>
<li><a href="#">旧俗方储药，羸躯亦点丹。</a></li>
<li><a href="#">日斜吾事毕，一笑向杯盘。<br />
</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">端午日赐衣</a>
<ul>
<li><a href=<