关于节日文化的HTML网页设计-----二十四节气

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业: 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】


📂文章目录

  • 二、📚网站介绍
  • 三、🔗网站效果
    • ▶️1.视频演示
    • 🧩 2.图片演示
  • 四、💒 网站代码
    • 🧱HTML结构代码
    • 🏠CSS样式代码
  • 五、🎁更多源码


二、📚网站介绍

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

📓网站程序方面:计划采用最新的网页编程语言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代码)。


三、🔗网站效果

▶️1.视频演示

J27JP 二十四节气 6页 无js table表格 表单 浮动 视频

🧩 2.图片演示

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


四、💒 网站代码

🧱HTML结构代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>二十四节气</title><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="css/index.css">
</head><body><div id="ershisi"><div id="banner"><img src="picture/banner.png" alt=""></div><nav><a href="" class="dangqian">首页</a><a href="spring.html"></a><a href="summer.html"></a><a href="autumn.html"></a><a href="winter.html"></a><a href="liuyan.html">留言</a></nav><div id="mian"><div id="index_main"><img src="picture/index.png" alt=""><h1>二十四节气介绍</h1><p>二十四节气是我国历法中表示自然节律变化以及确立“十二月建”的特定节令,能准确反映自然节律变化,蕴含着悠久的文化内涵和历史积淀,是中华民族悠久历史文化的重要组成部分,被国际气象学界誉为“中国的第五大发明”,2016年被正式列入联合国教科文组织人类非物质文化遗产代表作目录。</p><p>二十四节气最初是依据斗转星移制定,北斗七星循环旋转,斗柄顺时针旋转一圈为一周期,谓之一“岁”。现行确立二十四节气依据“太阳周年视运动”,也就是太阳黄经度数。两种确立方法虽然不同,但造成斗转星移的原因则是地球绕太阳公转,因此两者交节时间基本一致。二十四节气表征了地球在公转轨道上的位置和季节、气候的对应关系,它是非常科学的。二十四节气具有普适性,对于我国一些高纬地区,甚至南半球也可以借鉴其定义和内涵。</p><p>二十四节气分别为:立春、雨水、惊蛰、春分、清明、谷雨、立夏、小满、芒种、夏至、小暑、大暑、立秋、处暑、白露、秋分、寒露、霜降、立冬、小雪、大雪、冬至、小寒、大寒。节气中的立春、惊蛰、清明、立夏、芒种、小暑、立秋、白露、寒露、立冬、大雪、小寒,分别为干支历寅月、卯月、辰月、巳月、午月、未月、申月、酉月、戌月、亥月、子月、丑月的起始。</p><p>二十四节气,是中华民族悠久历史文化的重要组成部分,表达了人与自然宇宙之间独特的时间观念,蕴含着中华民族悠久的文化内涵和历史积淀。“二十四节气”不仅在农业生产方面起着指导作用,同时还影响着古人的衣食住行,甚至是文化观念。二十四节气形成以来一直是我国农业生产的风向标。农作物的生长发育与光、温、气、热、水等因素密不可分,二十四节气对当今农业生产仍有指导意义。二十四节气还是计算数九、暑伏、春社、秋社等时间点的基准。</p></div><div id="liebiao"><h1>交节列表</h1><table><tr class="table_title"><td>春季</td><td>日期</td><td>夏季</td><td>日期</td><td>秋季</td><td>日期</td><td>冬季</td><td>日期</td></tr><tr><td>立春</td><td>2月3-5日</td><td>立夏</td><td>5月5-7日</td><td>立秋</td><td>8月7-9日</td><td>立冬</td><td>11月7-8日</td></tr><tr><td>雨水</td><td>2月18-20日</td><td>小满</td><td>5月20-22日</td><td>处暑</td><td>8月22-24日</td><td>小雪</td><td>11月22-23日</td></tr><tr><td>惊蛰</td><td>3月5-7日</td><td>芒种</td><td>6月5-7日</td><td>白露</td><td>9月7-9日</td><td>大雪</td><td>12月6-8日</td></tr><tr><td>春分</td><td>3月20-22日</td><td>夏至</td><td>6月21-22日</td><td>秋分</td><td>9月22-24日</td><td>冬至</td><td>12月21-23日</td></tr><tr><td> 清明</td><td>4月4-6日</td><td>小暑</td><td>7月6-8日</td><td>寒露</td><td>10月8-9日</td><td>小寒</td><td>1月5-7日</td></tr><tr><td>谷雨</td><td>4月19-21日</td><td>大暑</td><td>7月22日-24日</td><td>霜降</td><td>10月23-24日</td><td>大寒</td><td>1月20-21日</td></tr></table></div></div><footer>版权所有©</footer></div>
</body></html>

🏠CSS样式代码

#index_main {width: 100%;margin-top: 20px;
}h1 {line-height: 50px;color: #3874AA;border-bottom: 1px dotted #ccc;
}#index_main img {width: 300px;float: left;margin-right: 30px;margin-bottom: 20px;
}#index_main p {text-indent: 32px;line-height: 30px;margin-top: 20px;font-size: 18px;color: #333;
}#liebiao {width: 100%;margin-top: 30px;color: #333;background: url(../image/bg3.png) no-repeat;background-size: 500px;background-position: 600px 0px;
}#liebiao h1 {line-height: 50px;text-align: center;
}#liebiao table {margin-top: 20px;text-align: center;width: 100%;line-height: 40px;
}.table_title td {font-weight: 700;font-size: 20px;line-height: 40px;color: #333 !important;
}#liebiao table tr td:nth-child(2n+1) {color: #3874AA;
}

五、🎁更多源码

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

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!

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

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

二十四节气-立冬文案、海报。万物收藏,冬之伊始。

立冬将至&#xff0c;奉上一些立冬文案和海报&#xff0c;快来看看吧&#xff01; 更多立冬海报素材免费下载&#xff1a; https://www.sucai999.com/?vNTYwNDUx 1.日照数九冬至天&#xff0c;清霜风高未辞岁 2.大河奔涌&#xff0c;不因冬止&#xff0c;寰球凉热共此时 3.…

QNAP NAS局域网无法访问的解决方法

最近在使用威联通NAS的时候突然访问不到设备&#xff0c;各种方法都无法建立连接&#xff0c;NAS自闭了……&#xff0c;找遍网上也没有找到解决方法&#xff0c;人也自闭了……&#xff0c;经过几天的摸索终于找到了问题所在&#xff0c;原因居然是NAS自己把自己网线掐了 问题…

逆水寒服务器维护7.5,逆水寒7.26日维护到什么时候 逆水寒7.26日游戏改动汇总介绍...

逆水寒7.26日维护到什么时候 逆水寒7.26日游戏改动汇总介绍 2018-07-26 10:08:08来源&#xff1a;游戏下载编辑&#xff1a;苦力趴评论(0) 《逆水寒》官方发布微博&#xff0c;称为了保证服务器的运行稳定和服务质量&#xff0c;将于7月26日上午7:00-上午10:00进行停服维护。此…

逆水寒服务器维护到什么时候,逆水寒11月1日更新到什么时候_维护到几点

逆水寒11月1日周四例行维护&#xff0c;首届跨服比武大会“说英雄谁是英雄”将正式拉开战火&#xff0c;同时将上线大批的时装&#xff0c;感兴趣的一起来看看吧。 逆水寒11月1日更新预告&#xff1a; 更新时间&#xff1a;上午08&#xff1a;00-10&#xff1a;00更新维护 首届…

逆水寒服务器怎么全维护,《逆水寒》2020年1月22日更新公告

各位自在同门&#xff1a; 为了保证服务器的运行稳定和服务质量&#xff0c;《逆水寒》将于2020年1月22日(周三)早8:00停机进行维护工作&#xff0c;预计维护到上午10:00。本周更新较往常提前了一天&#xff0c;周四不再进行维护更新。1月30日(初六)春节假期的维护更新将暂停一…

网易逆水寒服务器型号,《逆水寒》周年庆 网易:什么要求都满足

逆水寒在生日之际&#xff0c;交上了一份给玩家的答卷&#xff0c;推出了全新资料片“混江湖“。更轻松、更休闲、更有市井烟火气的全新江湖&#xff0c;现已面向所有玩家开放。 这次逆水寒针对玩家建议&#xff0c;究竟做了哪些更新呢&#xff1f; 玩家&#xff1a;日常一条龙…

逆水寒智能NPC也会结婚生子!|与AI共创游戏未来,掀起AIGC革命性体验!

网易6月30日将正式开服公测的《逆水寒》手游&#xff0c;推出被“逆水寒游戏GPT”加持的高智能AINPC&#xff0c;号称玩家可与NPC无限交流&#xff0c;甚至插手NPC私生活&#xff0c;改变游戏走向。与多数游戏中NPC只会“按部就班”做事设定不同的是&#xff0c;AI赋能下的智能…

笔记本玩逆水寒服务器未响应,运行逆水寒电脑崩溃怎么办_逆水寒运行游戏时电脑崩溃问题解决指引_游戏吧...

部分笔记本在运行逆水寒游戏时会出现崩溃现象&#xff0c;许多玩家都不知道该怎么办&#xff0c;如何解决这个问题&#xff0c;下面玩家宝宝们就和游戏吧小编一起来看一看《逆水寒》运行游戏时电脑崩溃问题解决指引吧&#xff01; 《逆水寒》运行游戏时电脑崩溃问题解决指引 亲…

逆水寒服务器维护,逆水寒11月29日更新到几点进游戏 逆水寒更新维护公告

逆水寒在11月29日进行了一次新版本的更新&#xff0c;新团本风雪铁牢关要上线了&#xff0c;很多奖励接踵而来&#xff0c;一些小伙伴还不知道更新了什么&#xff0c;下面就来为大家分享一下逆水寒的更新维护公告。 各位自在同门&#xff1a; 为了保证服务器的运行稳定和服务质…

逆水寒计算机丢失api,逆水寒游戏崩溃常见问题汇总 逆水寒常见问题解决方法...

逆水寒游戏可能因为太过于火爆让许多小问题层出不穷,许多玩家都遇到过一进游戏就发生了逆水寒游戏崩溃的情况,或者就是提示游戏正在运行,无法正常打开,不用担心点击查看逆水寒常见问题解决方法来保护您流畅运行游戏吧。 受到网络、下载服务器、操作系统等多方面的原因的影响…

逆水寒服务器维护26号,逆水寒维护到几点 逆水寒8.23维护公告时间

逆水寒维护到几点?逆水寒几点可以登录游戏?逆水寒今天更新维护了哪些内容?逆水寒在8月23日更新了最新的版本内容。下面&#xff0c;就随琵琶网小编来了解一下! 逆水寒维护到几点? 《逆水寒》于2018年8月23日早上8:00停机进行维护工作&#xff0c;预计维护到上午10:00。 逆水…

遇见逆水寒服务器修复,遇见逆水寒暂时关服修整,改为乙女游戏,下次再见就是氪金之时?...

原标题&#xff1a;遇见逆水寒暂时关服修整&#xff0c;改为乙女游戏&#xff0c;下次再见就是氪金之时&#xff1f; 作为逆水寒的衍生作&#xff0c;遇见逆水寒虽然写作“NPC攻略小助手”&#xff0c;但实际上却是一款“恋爱”手游&#xff0c;对象正是逆水寒端游中比较受欢迎…

阿里云推出工作学习 AI 助手“通义听悟”;谷歌发布 PaLM2;吴恩达推出了三门课

&#x1f989; AI新闻 &#x1f680; 阿里云推出工作学习 AI 助手“通义听悟” 摘要&#xff1a;阿里云峰会・粤港澳大湾区上&#xff0c;阿里云宣布推出最新产品“通义听悟”&#xff0c;该产品能用于会议讨论、教学培训、调研访谈、视频观看等场景&#xff0c;依托大模型&a…

面向开发者的 ChatGPT 提示工程课程|吴恩达携手OpenAI 教你如何编写 prompt

提示工程&#xff08;Prompt Engineering&#xff09;是一门相对较新的学科&#xff0c;旨在开发和优化提示&#xff0c;从而高效地将语言模型(LM)用于各种应用和研究主题&#xff0c;并帮助开发人员更好地理解大型语言模型(LLM)的能力和局限。随着 ChatGPT 等大语言模型的爆火…

解决:同样的Python程序,在cmd和pycharm都能正常运行,但是在Visual Studio Code却报错,且`conda activate`命令无法激活或切换虚拟环境

解决&#xff1a;同样的Python程序&#xff0c;在cmd和pycharm都能正常运行&#xff0c;但是在Visual Studio Code却报错&#xff0c;且conda activate命令无法激活或切换虚拟环境 ⚙️1.软件环境⚙️&#x1f50d;2.问题描述&#x1f50d;&#x1f421;3.解决方法&#x1f421…

2大学英语四级关于计算机的图表作文,大学英语四级图表作文真题写作模板

许多同学都会咨询有关大学英语四级图表作文真题写作的问题&#xff0c;今天小编就针对大学英语四级图表作文真题写作为大家提供一些模板&#xff0c;希望对大家有所帮助。 图表作文提示部分包括图表和文字要点提示两部分。图表的类型主要有&#xff1a;圆形(饼型)图(pie chart)…

李彦宏:牛人小的时候就很牛了——李彦宏早年顶级论文曝光

10月 23 日电近日&#xff0c;一份百度创始人李彦宏早年间发表于国际权威学术期刊 PAMI 的论文在国内计算机工程师中悄然流传。据本报记者调查显示&#xff0c;这篇 1996 年发表的论文主要聚焦于 OCR (光学字识别)模型选择和集成问题&#xff0c;成文于 1993 年李彦宏就读研究生…

李彦宏“湿身”的瓜吃完,还是回归正题看看百度AI的进展吧

作者&#xff1a;丁广胜 来源&#xff1a;网易智能频道 相比于两年前百度开发者大会李彦宏“无证”上五环那个哭笑不得还稍显得意的热搜&#xff0c;今天被泼水称得上是一场事故。 百度在回过神的第二份公开声明中说“我们感到愤怒并强烈谴责&#xff0c;这样的行为让人觉得不耻…

李彦宏疯了?百度要把全部产品重做一遍

大家好&#xff0c;我是校长。 前几天李彦宏参加了在北京举办的 2023 中关村论坛&#xff0c;发表了题为《大模型改变世界》的演讲。 聊到了很多有意思的观点&#xff0c;分享几个&#xff0c;我们一起看看。 1、大模型重新定义了人机交互。 李彦宏说&#xff1a;过去几十年&am…

李彦宏:百度吹过的牛逼今天实现了!

今天&#xff0c;在北京进入桑拿天的 36℃ 里&#xff0c;2018 百度 AI 开发者大会在国家会议中心正式举行&#xff0c;在百度人工智能助理小度的主持下&#xff0c;百度创始人、董事长兼首席执行官李彦宏上台致开场主题演讲&#xff0c;喊出了“Everyone can AI”的口号&#…