HTML做一个传统节日端午节 带设计报告4500字

news2024/11/26 13:31:06

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码:【🔰 echarts大屏展示大数据平台可视化(150套) 】
🎁 免费且实用的WEB前端学习指南: 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 💬历任研发工程师,技术组长,教学总监;曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰,难凉热血;多年过去,历经变迁,物是人非。 然而,对于技术的探索和追求从未停歇。 💪坚持原创,热衷分享,初心未改,继往开来!


📂文章目录

  • 一、👨‍🎓网站题目
  • 二、✍️网站描述
  • 三、📚网站介绍
  • 四、🌐网站演示
  • 五、⚙️ 网站代码
    • 🧱HTML结构代码
    • 💒CSS样式代码
  • 六、🥇 如何让学习不再盲目
  • 七、🎁更多干货


一、👨‍🎓网站题目

🏮传统春节网页设计、🎅圣诞节节日发展、🥮中秋、端午传统节日习俗庆祝、🎏地区特色,网站模板 、等网站的设计与制作。


二、✍️网站描述

🏷️ 大学生传统节日网页作业成品采用DIV CSS布局制作,主要内容包括节日介绍、节日发展、习俗庆祝、地区特色等内容,作品共多个页面,学生HTML静态网页基础水平制作,页面排版干净简洁。网页技术方面应用包括网页背景颜色、字号字体设置、超链接、图文页面、菜单栏、顶部大图等网页基础知识点

🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)

  1. 页面分为页头、菜单导航栏(最好可下拉)、中间内容板块、页脚四大部分。
  2. 所有页面相互超链接,可到三级页面,有5-10个页面组成。
  3. 页面样式风格统一布局显示正常,不错乱,使用Div+Css技术。
  4. 菜单美观、醒目,二级菜单可正常弹出与跳转。
  5. 要有JS特效,如定时切换和手动切换图片轮播。
  6. 页面中有多媒体元素,如gif、视频、音乐,表单技术的使用。
  7. 页面清爽、美观、大方,不雷同。 。
  8. 不仅要能够把用户要求的内容呈现出来,还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

📔网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面:计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。

📘网站素材方面:计划收集各大平台好看的图片素材,并精挑细选适合网页风格的图片,然后使用PS做出适合网页尺寸的图片。

📒网站文件方面:网站系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;

📙网页编辑方面:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
其中:
(1)📜html文件包含:其中index.html是首页、其他html为二级页面;
(2)📑 css文件包含:css全部页面样式,文字滚动, 图片放大等;
(3)📄 js文件包含:js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到js代码)。


四、🌐网站演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


五、⚙️ 网站代码

🧱HTML结构代码


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>节日由来</title>
</head>
<link rel="stylesheet" type="text/css" href="../css/jieriyoulai.css">
<body>
<div>
  <div class="top">
     <p class="one">欢迎!</p>
      <input type="text" placeholder="搜索">
      <a href="denglu.html" class="dl">登录</a>
      <a href="zhuceyemian.html"class="zc">注册</a>
  </div>
  <div class="nav">
   <a class="nav_" href="shouye.html.html">首页</a>
   <a class="nav_" href="jieriyoulai.html.html">节日由来</a>
   <a class="nav_" href="jierixisu.html.html">节日习俗</a>
   <a class="nav_" href="quyuanshengping.html">屈原生平</a>
   <a class="nav_" href="lishiwenhua.html">历史文化</a>
   <a><select><option>更多</option><option>端午小故事</option><option>端午小视频</option></select></a>
  </div>
  <div class="content">
    <div class="content_left">
      <h2><span>端午节</span>(中国四大传统节日之一)</h2>
       <p>端午节,又称端阳节、龙舟节、重午节、天中节等,源于自然天象崇拜,由上古时代祭龙演变而来。仲夏端午,苍龙七宿飞升于正南中天,处于全年最“正中”之位,即如《易经·乾卦》第五爻:“飞龙在天”。端午是“飞龙在天”的吉祥日子,龙及龙舟文化始终贯穿在端午节的传承历史中。端午节是集拜神祭祖、祈福辟邪、欢庆娱乐和饮食为一体的民俗大节。</p>
       <p>端午节是流行于中国以及汉字文化圈诸国的传统文化节日, [140]  传说战国时期的楚国诗人屈原在五月五日跳汨罗江自尽,后人亦将端午节作为纪念屈原的节日;也有纪念伍子胥、曹娥及介子推等说法。端午节的起源涵盖了古老星象文化、人文哲学等方面内容,蕴含着深邃丰厚的文化内涵,在传承发展中杂糅了多种民俗为一体,各地因地域文化不同而又存在着习俗内容或细节上的差异。</p>
       <p>端午节与春节、清明节、中秋节并称为中国四大传统节日。端午文化在世界上影响广泛,世界上一些国家和地区也有庆贺端午的活动。2006年5月,国务院将其列入首批国家级非物质文化遗产名录;自2008年起,被列为国家法定节假日。2009年9月,联合国教科文组织正式批准将其列入《人类非物质文化遗产代表作名录》,端午节成为中国首个入选世界非遗的节日。</p>
       <p>2021年10月25日,《国务院办公厅关于2022年部分节假日安排的通知》发布,2022年端午节:6月3日至5日放假,共3天。</p>
      <table border="0">
      <tr>
        <td>中文名</td>
        <td>端午节</td>
        <td>节日活动</td>
        <td>扒龙船、放纸鸢、挂艾草菖蒲等</td>
      </tr>
      <tr>
        <td>外文名</td>
        <td>Dragon Boat Festival(龙舟节直译)</td>
        <td>节日饮食</td>
        <td>粽子、五黄。咸鸭蛋、绿豆糕等</td>
      </tr>
      <tr>
        <td>别 名</td>
        <td>端阳节、龙节、正阳节、龙舟节、天中节等</td>
        <td>节日意义</td>
        <td>传承与弘扬非物质文化</td>
      </tr>
      <tr>
        <td>节日时间</td>
        <td>农历五月初五</td>
        <td>起源时期</td>
        <td>上古时代</td>
      </tr>
      <tr>
        <td>节日类型</td>
        <td>中国四大传统节日之一</td>
        <td>纪念人物</td>
        <td>屈原、伍子胥、曹娥、介子推等</td>
      </tr>
      <tr>
        <td>流行地区</td>
        <td>中国及汉字文化圈诸国</td>
        <td>国家文化遗产</td>
        <td>2006年5月20日列入第一批名录</td>
      </tr>
      <tr>
        <td>节日起源</td>
        <td>天象崇拜、龙图腾祭祀</td>
        <td>世界文化遗产</td>
        <td>2009年9月30日入选世界名录</td>
      </tr>
    </table>
     <h3>端午节的别称</h3>
     <ul>
     <li>端阳节</li>
     <p>古人纪年、纪月、纪日、纪时通用天干地支,根据干支历,按十二地支顺序推算,第五个月即“午月”,而午日又为“阳辰”,所以端午也称为“端阳”。</p>
     <li>天中节</li>
     <p>仲夏端午苍龙七宿处在正南中天,位置最”正“、最”中“。另,因端午节对于在北回归线及以南地区,太阳在天空位置是一年里最当中。</p>
     <li>重午节</li>
     <p>上古干支纪元法,以天干地支来作为载体,纪元通用天干地支。端午原为干支历的午月午日,正月建寅,第五个月即为午月,午月午日谓之重午,午月午日“中正”也。到了汉代时,由于南北统一,历法变动,朝廷为了方便过节,规定每年的端午节改为阴历五月初五。</p>
     <li>龙舟节</li>
     <p>古代的百越民族是以龙为图腾的,为表示他们是“龙子”的身分,端午节两个最主要的活动吃粽子和竞渡,都与龙相关。粽子投入江河水里祭祀龙神,而竞渡则用的是龙舟。他们不仅有“断发纹身”以“像龙子”的习俗,而且每年在五月五日这一天,举行一次盛大的图腾祭;其中有一项活动便是在急鼓声中刻画成龙形的独木舟,在水面上作竞渡的游戏,绘图腾神。这便是龙舟竞渡习俗的由来。扒龙舟是端午节的一项重要活动,故又称龙舟节。</p>
     <li>草药节</li>
     <p>端午日是草木药性在一年里最强的一天,端午遍地皆药,这天采的草药治皮肤病、去邪气最为灵验、有效,故名。</p>
     <li>龙节</li>
     <p>上古百越先民在端午进行祭龙,端午节在当时其实是“龙的节日”。 [50]  仲夏端午“飞龙在天”,苍龙的主星“大火”(心宿二)高悬正南中天,龙气(阳气)旺盛。由于易经的阴阳转化之道,盛极必衰,“上九”(乾卦第六爻)则为“亢龙有悔”;从卦辞而言,“上九”为最阳之爻,再无上升的余地,必然要走向衰落。而仲夏端午的“九五”是为“飞龙在天”,龙星处于全年最“中正”之位,喻事物处于鼎盛时期,大吉大利。《易经·乾卦》爻辞中所言的“龙”,实质是对苍龙七宿一年四时运行的阐发。</p>
     <li>浴兰节</li>
     <p>民间有在端午采草药煲水沐浴的习俗,故亦有浴兰节之称,如汉代《大戴礼》云:“午日以兰汤沐浴”。</p>
     <li>上日</li>
     <p>端午,有的地方称为“上日”,意思是“神的日子”。亦有佳日、佳节的意思。</p>
     <li>菖蒲节、艾节</li>
     <p>古人认为菖蒲、艾草有辟邪作用,端午阳气旺,且艾、菖长势茂盛,每年端午人们有在门上挂菖蒲或艾草辟阴邪的习俗,故端午节也称“菖蒲节”、“艾节”。</p>
     <li>当五汛</li>
     <p>在上海部分农村,靠杭州湾北岸一带区域,如奉贤、南汇等地区,习惯上称“端五节”为“当五汛”。亦有个别地区称为“五月当午”。</p>
     <li>躲午节</li>
     <p>古时南北风俗各异,“五月”古时北方中原称之为“恶月”,所以有的地方在端午节这天,父母便把未满周岁的儿童,送到外婆家去躲藏,以避恶,故有“躲午节”之称。</p>
     <li>地腊节</li>
     <p>道教把全年分为五腊,正月一日天腊,五月五日地腊。据《天皇至道太清玉册》与《云笈七笺》中说,五月初五名地腊,五帝攒会之日,此日五帝会于南方三炁丹天,查生人祖考及见世子孙所行善恶,以定罪福,校定生人官爵。道教认为一年中的几个腊日是良辰吉日,适合祭祀祖先和诸神以获得福佑。</p>
     </ul>
    </div>
    <div class="content_right">
    <p class="p0">相关资讯</p>
    <img class="imgone" src="../images/2019060720462725984.jpg">
    <p class="p1"><a href="#">关于端午,其实还有一部白蛇传</a></p>
    <img class="imgtwo" src="../images/1496104694311.gif">
    <p class="p2"><a href="#">端午粽香,情暖小镇</a></p>
    <img class="imgthree" src="../images/s_6e3705b2b27f4cb9bb70c9636e7b21d1.jpg">
    <p class="p3"><a href="#">端午小长假即将结束,请做好返程的准备</a></p>
    <img class="imgfour" src="../images/s_95757239ecff4d0084664451098d604c.png">
    <p class="p4"><a href="#">雷军玩谐音梗:称米粉为“小粽子” 因为<br/>粽子“心中有MI”</a></p>
    <p class="pp">..........................................................................................</p>
    <h5><a href="#">关于屈原</a></h5>
    <img class="imgfive" src="../images/800 (2).jfif">
    <div class="content_right_one">
    <p class="p5">
    屈原(公元前340年-公元前278年),战国时期楚国诗人、政治家。屈原是中国历史上第一位伟大的爱国诗人,中国浪漫主义文学的奠基人,被誉为“中华诗祖”、“辞赋之祖”。他是“楚辞”的创立者和代表者,开辟了“香草美人”的传统。屈原的出现,标志着中国诗歌进入了一个由集体歌唱到个人独创的新时代。他被后人称为“诗魂"。 主要作品有《离骚》《九歌》《九章》《天问》等。
    </p>
    </div>
    </div>
  </div>
  <div class="footer" align="center">版权归个人所有</div>
</div>
</body>
</html>



💒CSS样式代码

@charset "utf-8";
/* CSS Document */

  body{margin:0; height:0; border:0; text-align:center; background:#D0FFFF;}
     @font-face{
	 font-family:FZJZJW;
	 src:url(../fonts/FZJZJW.TTF);
 }

  div{
	  width:1310px;
	  margin:2px auto;
	  background:#FFF;
  }
  .top{
	  width:100%;
	  height:40px;
  }
  .one{
	  position:absolute;
	  line-height:5px;
	  font-family:FZJZJW;
	  font-size:22px;
	  color:#000;
  }
  	div input{
	  width:200px;
	  height:20px;
	  position:relative;
	  position:absolute;
	  top:1310px;
	  left:50px;
	  font-family:FZJZJW;
	  font-size:26px;
  }
  .imgfive{
	  width:280px;
	  height:300px;
	  position:absolute;
	  top:1400px;
	  left:50px;
  }
  .content_right_one{
	  width:280px;
	  height:245px;
	  position:absolute;
	  top:1700px;
	  left:50px;
	  background:#FFFFBD;
  }
    .footer{
	  width:1310px;
	  height:80px;
	  line-height:90px;
	  }





六、🥇 如何让学习不再盲目

很多刚入门编程的小白学习了基础语法,却不知道语法的用途,不知道如何加深映像,不知道如何提升自己,这个时候每天刷自主刷一些题就非常重要(百炼成神),可以去牛客网上的编程初学者入门训练。该专题为编程入门级别,适合刚学完语法的小白练习,题目涉及编程基础语法,基本结构等,每道题带有练习模式和考试模式,可还原考试模式进行模拟,也可通过练习模式进行练习 。


七、🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦!

2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!

3.

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/68270.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

征文连载丨在不修改数据库源码的情况下,如何提高 MogDB 对 Oracle 的兼容性?...

&#xff1a; 2022年8月4日至9月9日&#xff0c;墨天轮社区联合云和恩墨发起了首届「MogDB 主题征文活动」&#xff0c;邀请各位技术从业者学习、使用 MogDB 数据库&#xff0c;分享使用心得与实战案例&#xff0c;一起探索这款融合了众多创新特性的商业版企业级数据库。活动期…

[附源码]Python计算机毕业设计Django校园租赁系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

Docker安装Jenkins

docker安装&#xff1a;可参考这里 拉取Jenkins镜像 docker pull jenkins/jenkins创建挂载目录并赋予777权限 mkdir /data/jenkins chmod 777 /data/jenkins运行Jenkins容器并设置名字、端口、目录、时间 50000:50000:前面端口是宿机的端口&#xff0c;&#xff1a;后面端口…

客服如何维护客户?

有网店工作经验的客服&#xff0c;都知道维护老客户的重要性&#xff0c;因为老客户关乎着商品的销量、店铺的升级、客户转化率的多少&#xff0c;因此客服需要通过好的售后服务留住大量的老客户。 前言 有网店工作经验的客服&#xff0c;都知道维护老客户的重要性&#xff0c…

LIBTIFF读取tiff文件时,打印buf出错

如图所示&#xff0c;按照官网提供的例程读取tiff文件&#xff0c;并打印读取的值时&#xff0c;提示&#xff1a; Subscript of pointer to incomplete type void 代码如下&#xff1a; //---打开tiff文件的测试TIFF* tif TIFFOpen("a.tif", "r");if(tif…

使用docker安装RocketMQ

1.创建namesrv服务拉取镜像docker pull rocketmqinc/rocketmq创建namesrv数据存储路径mkdir -p /docker/rocketmq/data/namesrv/logs /docker/rocketmq/data/namesrv/store构建namesrv容器docker run -d \ --restartalways \ --name rmqnamesrv \ -p 9876:9876 \ -v /docker…

如何用vue+免费的webdb 实现一个世界杯足球竞猜系统

一、前言 最近世界杯在如火如荼的进行。我们都知道&#xff0c;中国也派出了我们的一支强大的队伍&#xff1a;中国建筑队&#xff0c;全程参与了世界杯的所有比赛。 哈哈开个玩笑&#xff0c;不过说到世界杯&#xff0c;还真有不少朋友&#xff0c;不仅仅是看球&#xff0c;…

[附源码]Python计算机毕业设计Django疫情防控管理系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

手把手教你成为荣耀开发者:数据报表使用指引

荣耀开发者服务平台是荣耀面向开发者的统一生态入口&#xff0c;通过聚合周边内外部系统&#xff0c;分全球多站点部署&#xff0c;为全球开发者提供业务全生命周期的商业支撑服务&#xff0c;拥有应用分发、智慧服务、开放能力、HONOR Connect等众多业务等您来合作。 “数据报…

Partial differential equation

In mathematics, a partial differential equation (PDE) is an equation which imposes relations between the various partial derivatives of a multivariable function. The function is often thought of as an “unknown” to be solved for, similarly to how x is th…

【三维目标检测】SASSD(一)

SASSD是用于点云三维目标检测模型算法&#xff0c;发表在CVPR 2020《Structure Aware Single-stage 3D Object Detection from Point Cloud》&#xff0c;论文地址为“https://www4.comp.polyu.edu.hk/~cslzhang/paper/SA-SSD.pdf”。SASSD与基于Anchor的目标检测模型的结构基本…

Kafka(四)- Kafka 生产者

文章目录一、生产者消息发送流程1. 发送流程2. 生产者重要参数列表二、异步发送 API1. 普通异步发送2. 带回调函数的异步发送3. 同步发送三、生产者分区1. 分区好处2. 生产者发送消息的分区策略&#xff08;1&#xff09;默认的分区器 DefaultPartitioner&#xff08;2&#xf…

行业沙龙第四期丨企业供应链协同的数字化解痛之道

当前&#xff0c;数字经济正在蓬勃发展&#xff0c;我们正在迈向一个协同一体的全球化时代。所谓协同&#xff0c;协者&#xff0c;众和之同也&#xff0c;多方能够协作才能达到一个共同的目标。其中&#xff0c;数据是实现协同的基本要素&#xff0c;技术是实现协同重要途径&a…

网络安全 核心基础篇总结

目录 前言 网络安全三大要素 CIA含义 1. Confidentiality&#xff08;机密性&#xff09; 1.1 机密性主要三个解决方法 1.1.1 加密 1.1.2 权限管理 1.1.3 敏感信息暴露 2. Integrity&#xff08;完整性&#xff09; 3. Availabitity&#xff08;可用性&#xff09; 威胁…

基于51单片机水塔水箱液水位WIFI监控报警设计proteus仿真原理图PCB

功能&#xff1a; 0.本项目采用STC89C52作为单片机系统的控制MCU 1.WIFI实时上传当前水位状态 2.通过液位传感器检测液位&#xff0c;检测到最低液位和最高液位时&#xff0c;超过设定阈值将声光报警 3.通过状态指示灯显示当前液位情况&#xff0c;三种颜色&#xff0c;红色代表…

快来给你的宠物视频加个表情特效吧

摘要&#xff1a;我们将给猫贴一张卡通脸&#xff0c;给 Elon Musk 贴上小胡子&#xff0c;给小狗贴上驯鹿角&#xff01;本文分享自华为云社区《视频AI&#xff0c;给你的宠物加个表情特效&#xff01;》&#xff0c;作者&#xff1a;HWCloudAI。 GAN 监督学习是一种联合端到…

Android适配【入坑指南+解决痛点】

Android适配是一个大坑&#xff0c;你可能早有耳闻。适配问题到底有多坑&#xff1f;为什么坑&#xff1f;以及如何从坑里爬出来&#xff1f; 概述 Android屏幕尺寸各异&#xff0c;而我们不可能根据各种尺寸都设计一套原型图去匹配&#xff0c;我们需要利用适配这一个过程把…

冷热电气多能互补的微能源网鲁棒优化调度附Matlab代码

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;修心和技术同步精进&#xff0c;matlab项目合作可私信。 &#x1f34e;个人主页&#xff1a;Matlab科研工作室 &#x1f34a;个人信条&#xff1a;格物致知。 更多Matlab仿真内容点击&#x1f447; 智能优化算法 …

基于Session的认证与授权实践

Spring Security系列文章 认证与授权之Cookie、Session、Token、JWT基于Session的认证与授权实践 基于Session的认证方式 基于 session 的认证方式如下图&#xff1a; 基于 Session 的认证机制由 Servlet 规范定制&#xff0c;Servlet 容器已实现&#xff0c;用户通过 HttpSes…

Matplotlib入门[05]——注释与标签

Matplotlib入门[05]——注释与标签 参考&#xff1a; https://ailearning.apachecn.org/ Matplotlib官网 plt.legend参数 使用Jupyter进行练习 注释 使用文本框进行注释 import numpy.random import matplotlib.pyplot as pltfig plt.figure(1, figsize(5,5)) # plt.clf…