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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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="#">唐 · 杜甫</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="#">宋 · 张耒</a></li>
<li><a href="#">竞渡深悲千载冤</a></li>
<li><a href="#">忠魂一去讵能还</a></li>
<li><a href="#">国亡身殒今何有</a></li>
<li><a href="#">只留离骚在世间</a></li>
</ul>
</li>
</ul></td>
</tr>
<tr>
<td align="center"> </td>
</tr>
<tr>
<td align="center"><img src="image/main_20.jpg" width="224" height="126" /></td>
</tr>
</table></td>
</tr>
</table>
<hr width="1100" />
<table width="300" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center">关于我们</td>
<td align="center">联系我们</td>
<td align="center">反馈</td>
<td align="center">更多</td>
</tr>
</table>
<hr width="1100" />
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
3.2 端午微简介代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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" />
<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 height="24" colspan="5" align="left" class="ab">“粽”情山水</td>
</tr>
<tr>
<td width="266" rowspan="4" align="left"><img src="image/main_02.jpg" width="266" height="725" /></td>
<td colspan="4" align="center" class="abc"><a href="sub1.html">端午微简介</a></td>
</tr>
<tr>
<td width="20"> </td>
<td width="422" colspan="-1" rowspan="3" align="left" valign="top"><p>端午节，又称端阳节、龙舟节、天中节等，源于自然天象崇拜，由上古时代祭龙演变而来。仲夏端午，苍龙七宿飞升于正南中天，处于全年最“正中”之位，即如《易经·乾卦》第五爻的爻辞曰：“飞龙在天”。其起源涵盖了古老星象文化、人文哲学等方面内容，蕴含着深邃丰厚的文化内涵，在传承发展中杂糅了多种民俗为一体，节俗内容丰富。扒龙舟与食粽是端午节的两大礼俗，这两大礼俗在中国自古传承，至今不辍。 <br />
端午节，本是上古先民创立用于拜祭龙祖、祈福辟邪的节日。因传说战国时期的楚国诗人屈原在五月五日跳汨罗江自尽，后来人们亦将端午节作为纪念屈原的节日；也有纪念伍子胥、曹娥及介子推等说法。总的来说，端午节起源于上古先民择“飞龙在天”吉日拜祭龙祖、祈福辟邪，注入夏季时令“祛病防疫"风尚；把端午视为“恶月恶日”起于北方中原，附会纪念屈原等历史人物纪念内容。</p>
<p><img src="image/main_05.jpg" width="390" height="249" /></p>
<p> 端午节与春节、清明节、中秋节并称为中国四大传统节日。端午文化在世界上影响广泛，世界上一些国家和地区也有庆贺端午的活动。2006年5月，国务院将其列入首批国家级非物质文化遗产名录；自2008年起，被列为国家法定节假日。<br />
</p></td>
<td width="19" rowspan="3" align="left" valign="top"> </td>
<td width="373" rowspan="3" align="left" valign="top"><p><img src="image/main_03.jpg" width="373" height="246" /></p>
<p> 2009年9月，联合国教科文组织正式批准将其列入《人类非物质文化遗产代表作名录》，端午节成为中国首个入选世界非遗的节日。“</p>
<p> 端午”的“端”字本义为“正”，“午”为“中”。“端午”（端五），“中正”也，这天午时则为正中之正。古人以天干地支来作为载体，天干承载天之道，地支承载地之道，设天干地支以契天地人事之运，纪元通用天干地支。仲夏午月午日飞龙在天，此时龙星处在正南中天，为全年周天运行最“中正”之位，既“得中”又“得正”，乃大吉大利之象。古人历来崇尚中、正之道，“中正“之道在此表现得淋漓尽致。另，端亦有“初”的意思，因此午（五）月的第一个午日，亦谓端午。 <br />
据统计，端午节的名称在中国所有传统节日当中叫法最多，达二十多个，如有龙舟节、重午节、端阳节、端五节、重五节、当五汛、天中节、夏节、艾节、上日、五月节、菖蒲节、天医节、草药节、浴兰节、午日节、地腊节、正阳节、龙日节、粽子节、五黄节、诗人节、躲午节、解粽节、端礼节、五月初五、五月当午等等。</p></td>
</tr>
<tr>
<td width="20" height="381"> </td>
</tr>
<tr>
<td width="20" height="312"> </td>
</tr>
</table>
<hr width="1100" />
<table width="300" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center">关于我们</td>
<td align="center">联系我们</td>
<td align="center">反馈</td>
<td align="center">更多</td>
</tr>
</table>
<hr width="1100" />
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
3.3 端午习俗说代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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" />
<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 height="24" colspan="7" align="left" class="ab">“粽”情山水</td>
</tr>
<tr>
<td width="266" rowspan="2" align="left"><img src="image/main_02.jpg" width="266" height="725" /></td>
<td colspan="6" align="center" class="abc"><a href="sub2.html">端午习俗说</a></td>
</tr>
<tr>
<td width="6" height="678"> </td>
<td colspan="5" align="left" valign="top"><p>一、划龙舟</p>
<p> 划龙舟，又称扒龙舟，是多人集体扒桨竞赛，是汉族传统节日端午节的主要习俗，起源于江浙地区，最初是中国人民祛病防疫的节日，吴越之地春秋之前有在农历五月初五以龙舟竞渡形式举行部落图腾祭祀的习俗；后因诗人屈原在这一天逝世，便成了中国汉族人民纪念屈原的传统节日习俗，也是汉族龙图腾文化的代表之一。</p>
<p>二、吃粽子</p>
<p> 粽子，由粽叶包裹糯米蒸制而成的食品，是中国汉族传统节庆食物之一。粽子作为中国历史文化积淀最深厚的传统食品之一，传播亦甚远。端午食粽的风俗，千百年来，在中国盛行不衰，而且流传到朝鲜、日本及东南亚诸国。<br />
粽，即粽籺，俗称粽子，主要材料是糯米、馅料，用箬叶（或柊叶、簕古子叶等）包裹而成，形状多样，主要有尖角状、四角状等。粽子由来久远，最初是用来祭祀祖先神灵的贡品。南北叫法不同，北方产黍，用黍米做粽，角状，古时候在北方称“角黍”。由于各地饮食习惯的不同，粽子形成了南北风味；从口味上分，粽子有咸粽和甜粽两大类。</p>
<p>三、挂艾草</p>
<p> 挂艾叶菖蒲是中国民间节日习俗，在端午节以艾叶悬于堂中，剪艾力虎形或剪彩为小虎，贴以艾叶，妇人争相戴之，以僻邪驱瘴。用菖蒲作剑，插于门榻， 有驱魔怯鬼之神效。<br />
在端午节，家家都以菖蒲、 艾叶、 榴花、 蒜头、龙船花，制成人形称为艾人、艾虎，制成花环、佩饰，美丽芬芳，妇人争相佩戴，用以驱瘴。民谚说：“清明插柳，端午插艾”。在端午节，人们把插艾和菖蒲作为重要内容之一。</p>
<p>四、佩香囊</p>
<p> 端午节小孩佩香囊，不但有避邪驱瘟之意，而且有襟头点缀之用。香囊内有朱砂、雄黄、香药，外包以丝布，清香四溢，再以五色丝线弦扣成索，做成各种不同形状，结成一串，形形色色，玲珑夺目。<br />
佩香囊，是端午传统习俗之一。香囊内通常填充一些具有芳香开窍的中草药，有清香、驱虫、避瘟、防病的功能。</p>
<p> 五、五色丝线<br />
五色丝线，汉族节日习俗，一般在端午节佩戴五色丝线以辟邪。端午习俗甚多，由阴阳五行术数也衍生出了一系列的辟邪习俗。端午日天地纯阳正气极盛，借助天地纯阳正气辟阴邪是端午习俗之一。五色丝线端午以五色丝线系臂，曾是很流行的节俗。这些习俗传到后世，即发展成许多种漂亮饰物，制作也日趋精致，成为端午节特有的民间艺品。<br />
</p>
<p>六、雄黄酒</p>
<p> 雄黄酒，即是用研磨成粉末的雄黄泡制的白酒或黄酒，中华民族传统节日端午节的饮品。</p></td>
</tr>
</table>
<hr width="1100" />
<table width="300" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center">关于我们</td>
<td align="center">联系我们</td>
<td align="center">反馈</td>
<td align="center">更多</td>
</tr>
</table>
<hr width="1100" />
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
3.4 端午诗词会代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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" />
<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 height="24" colspan="6" align="left" class="ab">“粽”情山水</td>
</tr>
<tr>
<td width="266" rowspan="4" align="left"><img src="image/main_02.jpg" width="266" height="731" /></td>
<td colspan="5" align="center" class="abc"><a href="sub3.html">端午诗词会</a></td>
</tr>
<tr>
<td width="26"> </td>
<td width="364" colspan="-1" rowspan="3" align="center" valign="top"><p> </p>
<p>《端午即事》<br />
宋 · 文天祥<br />
五月五日午，赠我一枝艾。<br />
故人不可见，新知万里外。<br />
丹心照夙昔，鬓发日已改。<br />
我欲从灵均，三湘隔辽海。<br />
<br />
《乙卯重五诗》<br />
宋 · 陆游<br />
重五山村好，榴花忽已繁。<br />
粽包分两髻，艾束著危冠。<br />
旧俗方储药，羸躯亦点丹。<br />
日斜吾事毕，一笑向杯盘。<br />
<br/>
《端午日赐衣》<br />
唐 · 杜甫<br />
宫衣亦有名，端午被恩荣。<br />
细葛含风软，香罗叠雪轻。<br />
自天题处湿，当暑著来清。<br />
意内称长短，终身荷圣情。</p>
<p><img src="image/main_20.jpg" width="284" height="181" /></p>
<p><br />
<br />
</p>
<p> </p></td>
<td width="23" rowspan="3" align="left" valign="top"> </td>
<td width="383" rowspan="3" align="center" valign="top"><p><br />
<br />
《浣溪沙·端午》<br />
宋 · 苏轼<br />
轻汗微微透碧纨，明朝端午浴芳兰。<br/>
流香涨腻满晴川。彩线轻缠红玉臂，<br/>
小符斜挂绿云鬟。佳人相见一千年。</p>
<p><img src="image/main_08.jpg" width="167" height="110" /></p>
<p><br />
《和端午》<br />
宋 · 张耒<br />
竞渡深悲千载冤，忠魂一去讵能还。<br />
国亡身殒今何有，只留离骚在世间。</p>
<p>《少年游 端午赠黄守徐君猷》</p>
<p>宋 · 苏轼<br />
银塘朱槛麹尘波。圆绿卷新荷。</p>
<p>兰条荐浴，菖花酿酒，天气尚清和。</p>
<p><br />
好将沈醉酬佳节，十分酒、一分歌。</p>
<p>狱草烟深，讼庭人悄，无吝宴游过。</p></td>
<td width="38" rowspan="3" align="center" valign="top"> </td>
</tr>
<tr>
<td width="26" height="381"> </td>
</tr>
<tr>
<td width="26" height="312"> </td>
</tr>
</table>
<hr width="1100" />
<table width="300" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center">关于我们</td>
<td align="center">联系我们</td>
<td align="center">反馈</td>
<td align="center">更多</td>
</tr>
</table>
<hr width="1100" />
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
3.5 端午话家乡代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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" />
<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 height="24" colspan="6" align="left" class="ab">“粽”情山水</td>
</tr>
<tr>
<td width="266" rowspan="10" align="left"><img src="image/main_02.jpg" width="266" height="729" /></td>
<td colspan="5" align="center" class="abc"><span class="11"><a href="sub4.html">端午话家乡</a></span></td>
</tr>
<tr>
<td width="29" rowspan="4"> </td>
<td colspan="2" align="center" valign="top">家乡端午</td>
<td width="249" align="center" valign="middle"> </td>
<td width="48" align="center" valign="middle"> </td>
</tr>
<tr>
<td height="13" colspan="2" align="left" valign="top"> 农历五月初五，是中国民间的传统节日——端午节。从战国时代开始，端午节至今已经存在了两千多年。在如此漫长的历史过程中，它伴随着人类生活方式、思想方式的发展而变化。端午节是怎么来的你知道吗？在我的家乡，端午节是怎么过的？有哪些特别的风俗？今天，一起来品味陇西的端午文化。</td>
<td align="center" valign="middle"><img src="image/main_15.jpg" width="135" height="88" /></td>
<td align="center" valign="middle"> </td>
</tr>
<tr>
<td height="12" colspan="2" align="left" valign="top"> </td>
<td align="center" valign="middle"><a href="index1.html">我的家乡</a></td>
<td align="center" valign="middle"> </td>
</tr>
<tr>
<td width="248" height="145" align="center" valign="middle"><img src="image/main_16.jpg" width="200" height="150" /></td>
<td width="260" colspan="-4" align="center" valign="middle"><img src="image/main_17.jpg" width="200" height="150" /></td>
<td rowspan="5" align="center" valign="top">
<p> </p>
<p>端午歌谣</p>
<p> </p>
<p>五月五</p>
<p>是端阳</p>
<p>门插艾</p>
<p>香满堂</p>
<p>吃粽子</p>
<p>洒白糖</p>
<p>龙舟下水喜洋洋<br />
</p></td>
<td rowspan="6" align="center" valign="top"> </td>
</tr>
<tr>
<td width="29" rowspan="5"> </td>
<td height="20" align="left" valign="top"> </td>
<td height="20" colspan="-4" align="left" valign="top"> </td>
</tr>
<tr>
<td height="109" align="center" valign="middle"><img src="image/main_18.jpg" width="200" height="150" /></td>
<td height="109" colspan="-4" align="center" valign="middle"><img src="image/main_28.jpg" width="200" height="150" /></td>
</tr>
<tr>
<td height="19" align="left" valign="top"> </td>
<td height="19" colspan="-4" align="left" valign="top"> </td>
</tr>
<tr>
<td align="center" valign="middle"><img src="image/main_29.jpg" width="200" height="150" /></td>
<td colspan="-4" align="center" valign="middle"><img src="image/main_30.jpg" width="200" height="150" /></td>
</tr>
<tr>
<td align="center" valign="middle"> </td>
<td colspan="-4" align="center" valign="middle"> </td>
<td align="center" valign="top"> </td>
</tr>
</table>
<hr width="1100" />
<table width="300" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center">关于我们</td>
<td align="center">联系我们</td>
<td align="center">反馈</td>
<td align="center">更多</td>
</tr>
</table>
<hr width="1100" />
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
3.6 关于作者代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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" />
<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 height="24" colspan="5" align="left" class="ab">“粽”情山水</td>
</tr>
<tr>
<td width="266" rowspan="4" align="left"><img src="image/main_02.jpg" width="266" height="725" /></td>
<td colspan="4" align="center" class="abc"><a href="sub5.html">关于作者</a></td>
</tr>
<tr>
<td width="28"> </td>
<td width="279" rowspan="3" align="center" valign="top"><p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p></td>
<td width="292" rowspan="3" align="left" valign="top"><p> </p>
<p> </p>
<p>作者简介</p>
<p>姓名：南抚琴</p>
<p>民族：汉族</p>
<p>电话：17339882859</p>
<p>联系方式：Z142506801</p>
<p></p></td>
<td width="235" rowspan="3" align="center" valign="top"> </td>
</tr>
<tr>
<td width="28" height="381"> </td>
</tr>
<tr>
<td width="28" height="312"> </td>
</tr>
</table>
<hr width="1100" />
<table width="300" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center">关于我们</td>
<td align="center">联系我们</td>
<td align="center">反馈</td>
<td align="center">更多</td>
</tr>
</table>
<hr width="1100" />
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
这篇博客展示了作者的网页设计大作业，以端午节为主题，包括6个页面：首页、端午微简介、端午习俗说、端午诗词会、端午话家乡和关于作者。每个部分详细介绍了设计效果和对应的HTML、CSS、JavaScript代码实现。
扫一扫
2382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
