296.端午安康节日主图网页大学生期末大作业 Web前端网页制作 html+css

仙女网页制作

于 2024-06-10 10:44:04 发布

阅读量673 Web网页设计实例节日文章标签：前端课程设计 html html5 javascript css jquery

本文链接：https://blog.csdn.net/A240307/article/details/139574082

Web网页设计实例同时被 2 个专栏收录

624 篇文章 29 订阅

节日

8 篇文章 0 订阅

欢迎光临仙女的网页世界！这里有Web前端网页制作的各行各业的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！

说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！

奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！

我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设的辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！

非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！

一、网页概述

本实例应用html+css+js：三级页面、菜单栏、二级菜单、选项卡、图片轮翻效果、留言表单等，适用于大学生网页课程作业设计。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>中国传统节日——端午节</title>
<link rel="stylesheet" type="text/css" href="css/index.css" >
</head>

<div class="zuo">
<img src="images/zuo1.jpg" />
<div class="fangshi"><h1>端午节歌谣</h1><p>　　棕子香，香厨房。艾叶香，香满堂。桃枝插在大门上，出门一望麦儿黄。这儿端阳，那儿端阳，处处都端阳。<br />
　　
五月五，是端阳。门插艾，香满堂。吃粽子，洒白糖。龙舟下水喜洋洋。<br />
　　
五月节，天气热，放下锄头歇一歇；山上清风爽，杨梅红出血。五月五，是端午，背个竹篓入山谷；溪边百草香，最香是菖蒲。<br />
　　
五月五日午，天师骑艾虎；薄剑斩百邪鬼入虎品。</p>
</div>

</div>

<div class="you">
<div class="jieshao"><h1>端午简介</h1>
<p><img src="images/jieshao.jpg" width="218" height="147" style="float:left; margin-right:19px;" />　　　端午节（英文为Dragon Boat Festival或Double Fifth Festival）又称为端阳节，为每年的农历5月初五<br />
赛龙舟日，在湖北、湖南、贵州、四川一带，端午节又分为大端午与小端午。小端午为每年农历五月初五，大端午为每年农历五月十五日。　<br />
　　
时至今日，端午节在中国人民中仍是一个十分盛行的隆重节日。国家非常重视非物质文化遗产的保护，2006年5月20日，该民俗经国务院批准列入第一批国家级非物质文化遗产名录。　<br />
　　
2009年9月30日在阿联酋首都阿布扎比召开的联合国教科文组织保护非物质文化遗产政府间委员会会议决定：中国端午节成功入选《世界人类非物质文化遗产代表作名录》。</p>
</div>

<div class="jieshao"><h1>起源传说</h1>
<p><a href="chuanshuo1.html" >纪念屈原</a></p>
<p><a href="chuanshuo2.html" >迎接伍子胥</a></p>
<p><a href="chuanshuo3.html" >纪念孝女曹娥</a></p>
<p><a href="chuanshuo4.html" >迎涛神</a></p>
<p><a href="chuanshuo5.html" >龙的节日</a></p>
<p><a href="chuanshuo6.html" >恶日禁忌</a></p>
<p><a href="chuanshuo7.html" >夏至</a></p>
</div>

</div>

</div>

</div>
</body>
</html>

...

2.CSS

代码如下（节选示例）：

@charset "utf-8";
/* CSS Document */
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
*{margin:0;padding:0;border:0;}
body { font-family: "宋体";font-size: 12px;color:#000000;line-height: 20px;text-align:left}
td,th {font-family: "宋体";font-size: 12px;color: #000000;}
a {color: #000000;}
A:link {TEXT-DECORATION: none;}
A:visited {TEXT-DECORATION: none;}
A:hover {TEXT-DECORATION: underline;}
ul,li{list-style-type:none;}

.clearit{clear:both;}
.page{width:1003px; margin:0 auto;}

.daohang{width:1003px; height:42px; margin:0 auto; overflow:hidden; background:url(../images/daohang.jpg) repeat-x;}
.daohang p{width:110px; line-height:42px; display:block; float:left; text-align:center; font-size:14px; }
.daohang p a{color:#FFFF00;}

.content{width:1003px; margin:0 auto; background:#cdffa8; padding:20px 0 0;}

.zuo{width:220px; float:left; margin-left:10px; display:inline;}
.fangshi{width:220px; border:1px solid #036b27; }
.fangshi h1{font-size:14px; padding:0 10px; font-weight:bold; line-height:26px; line-height:26px; border-bottom:1px solid #036b27; color:#036b27;}
.fangshi p{text-align:left; padding:0 10px; line-height:24px;color:#036b27;}

.you{width:750px; float:left; margin-left:10px; display:inline;}
.jieshao{width:748px;border:1px solid #036b27; background:#ffffff; margin-bottom:10px; }
.jieshao h1{font-size:14px; padding:0 10px; font-weight:bold; line-height:28px; line-height:28px; background:#ffffff;border-bottom:1px solid #036b27; color:#036b27;}
.jieshao p{text-align:left; padding:10px; line-height:24px;color:#036b27;}

.jieshaoB{width:748px;border:1px solid #036b27; background:#ffffff; margin-bottom:10px; }
.jieshaoB h1{font-size:14px; padding:0 10px; font-weight:bold; line-height:28px; line-height:28px; background:#ffffff;border-bottom:1px solid #036b27; color:#036b27;}
.jieshaoB p{padding:10px 0;}

...