HTML静态网页成品作业(HTML+CSS)—— 24节气立夏介绍网页(1个页面)

🎉不定期分享源码,关注不丢失哦

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • HTML部分代码
  • 五、源码获取


一、作品介绍

🏷️本套采用HTML+CSS,未使用Javacsript代码,共有1个页面

二、作品演示

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码

<div class="top_img"><img src="./images/bg.jpeg" alt=""></div><div class="middle"><div class="middle_left"><div class="middle_item"><div class="middle_name">立夏简介</div><div class="middle_content"><p>立夏,是二十四节气中的第7个节气,夏季的第一个节气,交节时间在每年公历505-07日。此时北斗七星的斗柄指向东南方,太阳黄经达45°。历书:“斗指东南维,为立夏,万物至此皆长大,故名立夏也。”时至立夏,万物繁茂。立夏后,日照增加,逐渐升温,雷雨增多。立夏是标示万物进入旺季生长的一个重要节气。</p></div></div><div class="middle_item"><div class="middle_name">立夏图片</div><div class="middle_content"><div class="middle_content_img"><img src="./images/1.webp" alt=""></div><div class="middle_content_img"><img src="./images/3.jpeg" alt=""></div></div></div></div><div class="middle_right"><div class="middle_item"><div class="middle_name">历史渊源</div><div class="middle_content"><p>所谓“立”即开始的意思,立春、立夏、立秋、立冬,分别代表春季、夏季、秋季、冬季的开始和到来。“夏”,在《尔雅》中被称呼为“长赢”;赢,取其“盈满”“盈余”的意思。立夏是标示万物进入旺季生长的一个重要节气。万物至此皆长大,故名立夏也。</p><p>为了更准确地表述时序特点,古人又根据天气和物候,将节气分为“分”、“至”、“启”、“闭”四组。“分”即春分和秋分,古称“二分”;“至”即夏至和冬至,古称“二至”;“启”是立春和立夏,“闭”则是立秋和立冬,立春、立夏、立秋、立冬,合称“四立”,这些加起来共为“八节”。</p><p>立夏,表示告别春天,是夏天的开始,因此又称“春尽日”。关于立夏,元人吴澄《月令七十二候集解》解释为:“夏,假也,物至此时皆假大也。”这里的“假”即“大”之意,是说春天的植物到这时已经长大了。立夏以后,正式进入雨季,雨量和雨日均明显增多。春生、夏长、秋收、冬藏,夏季是许多农作物旺盛生长的最好季节,充足的光照和适宜的温度以及充沛的雨水给植物提供了所需的条件。万物繁茂,始于立夏。它是农耕文化对于节令的反映。</p></div></div><div class="middle_item"><div class="middle_name">民间习俗</div><div class="middle_content"><p>江南的立夏习俗里有所谓的“见三新”,就是吃些这个时节长出来的鲜嫩物儿。 [2]在江浙一带有“立夏尝新”的风俗。苏州地方有“立夏见三新”的谚语。“三新”指新熟的樱桃、青梅和麦子。人们先以这“三新”祭祖,然后人们尝食。同时,苏州立夏还要吃海蛳、面筋、白笋、荠菜、咸鸭蛋、青蚕豆,各家酒店立夏这天对进店的老顾客奉送酒酿、烧酒,不取分文,因此也把立夏叫做“馈节”。无锡民间历来有“立夏尝三鲜”的习俗。在常熟,人们立夏尝新,食品更为丰富,有“九荤十八素”的说法。浙江、江苏、湖北、湖南、江西、安徽等地,人们仍然保留着立夏吃乌米饭的古老习俗,乌米饭是一种紫黑色的糯米饭,是采集野生植物乌桕树的叶子煮汤,用此汤将糯米浸泡半天,然后捞出放入木甑里蒸熟而成。</p><div class="middle_content_img"><img src="./images/2.webp" alt=""></div></div></div><div class="middle_item"><div class="middle_name">立夏视频</div><div class="middle_content"><div class="middle_content_video"><video src="./video/1.mp4" controls poster="./images/fm.png"></video></div></div></div></div></div>

五、源码获取

🥇 ~ 关注我,点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙2.想要获取本文源码,点击前往吧

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

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

相关文章

使用Python创建Word文档

使用Python创建Word文档 安装python-docx库创建Word文档代码效果 在这篇文章中&#xff0c;我们将介绍如何使用 Python创建一个Word文档。首先&#xff0c;我们需要安装python-docx库&#xff0c;然后通过一段简单的代码示例展示如何创建和编辑Word文档。 安装python-docx库 …

RPA影刀 | 变量的使用

1.什么是变量 2.变量的作用 作用1&#xff1a;方便后续流程调用 这里在后续流程“点击元素”中&#xff0c;就可以选中这个变量 作用2&#xff1a;区分相同属性的变量 如果要打开两个网页&#xff0c;总不能都叫web_page吧。 所以这里一个叫百度web_page&#xff0c;一个叫…

C++期末复习总结(2)

目录 1.运算符重载 2.四种运算符重载 &#xff08;1&#xff09;关系运算符的重载 &#xff08;2&#xff09; 左移运算符的重载 &#xff08;3&#xff09;下标运算符的重载 &#xff08;4&#xff09;赋值运算符的重载 3.继承的方式 4.继承的对象模型 5.基类的构造 6…

易飞销货单出货时审核库存检查

公司接到一客户因品种多而数量少&#xff0c;单一出货计划行比较多&#xff0c;而只上了生产ERP易飞&#xff0c;审核时经常会出现倒催货&#xff0c;提前做销售单&#xff0c;行数有时超30行以上&#xff0c;审核跳窗报错时也不方便查找&#xff0c;特写一外挂程序&#xff0c…

How to: Build a Custom End-User Skin Selector

This section explains how to populate a ComboBoxEdit control with DevExpress skin items. 本节介绍如何使用DevExpress皮肤项填充ComboBoxEdit控件。 To populate a combo box editor, iterate through the SkinManager.Skins collection, which returns all currently a…

【c语言】自定义类型----结构体

结构体是c语言的一种自定义类型&#xff0c;自定义类型对于开发者及其重要的类型&#xff0c;它可以随意由开发者进行谱写功能&#xff0c;而今天的结构体可以用来表示一种变量的单个或多种具体属性&#xff0c;再编写代码时有着不可替代的作用&#xff01;&#xff01;&#x…

一个简单的消息队列

目录 原理 实现代码 示例 原理 消息队列是一个先进先出栈&#xff0c;每次都处理第一项&#xff0c;处理完了过后会删除这个消息&#xff0c;这是一个简单的消息队列图&#xff1a; 实现代码 首先消息队列需要一个队列&#xff0c;我们用Python里的列表&#xff1a; self.…

常见的api: BigInteger

一.获取一个大的随机整数 1.代码: BigInteger bd1 new BigInteger(4, new Random());System.out.println(bd1); 2.打印的结果:2 3.注释获取的是0-16之间的随机整数 二.获取一个指定的大的数 1.代码&#xff1a; BigInteger bd2 new BigInteger("100");System.o…

人工智能--教育领域的运用

文章目录 &#x1f40b;引言 &#x1f40b;个性化学习 &#x1f988;体现&#xff1a; &#x1f988;技术解析&#xff1a; &#x1f40b;智能辅导与虚拟助手 &#x1f988;体现&#xff1a; &#x1f988;技术解析&#xff1a; &#x1f40b;自动评分与评估 &#x1f…

植物大战僵尸杂交版最新2.0.88手机+电脑+苹果+修改器

在这个充满奇妙的平行宇宙中&#xff0c;植物和僵尸竟然能够和谐共存&#xff01;是的&#xff0c;你没听错&#xff01;一次意外的实验&#xff0c;让这两个看似对立的生物种类发生了基因杂交&#xff0c;创造出了全新的生物种类——它们既能够进行光合作用&#xff0c;也具备…

2024年【R2移动式压力容器充装】考试技巧及R2移动式压力容器充装复审考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 R2移动式压力容器充装考试技巧参考答案及R2移动式压力容器充装考试试题解析是安全生产模拟考试一点通题库老师及R2移动式压力容器充装操作证已考过的学员汇总&#xff0c;相对有效帮助R2移动式压力容器充装复审考试学…

Linux 35.5 + JetPack v5.1.3@RACER编译安装

Linux 35.5 JetPack v5.1.3RACER编译安装 1. 源由2. 编译&安装Step 1&#xff1a;依赖库安装Step 2&#xff1a;LKH-3安装Step 3&#xff1a;建立工程Step 4&#xff1a;编译工程Step 5&#xff1a;安装工程 3. 问题汇总3.1 组件ros-noetic-multi-map-server问题3.2 swarm…

记录:linux桌面管理基础-X11协议(X window system)

1、认识X11 X11是X协议&#xff0c;版本号为11。X协议是专门被设计为linux桌面管理服务的&#xff0c;而linux桌面环境不像windows那样作为系统内核的一部分&#xff0c;作为一个普通程序运行在用户态上。该协议的设计初衷是为了linux的图形界面满足跨平台、跨网络、与具体硬件…

DOM型xss靶场实验

DOM型xss可以使用js去控制标签中的内容。 我使用的是一个在线的dom型xss平台&#xff0c;靶场链接&#xff1a;Challenges 第一关Ma Spaghet!&#xff1a; Ma Spaghet! 关卡 <h2 id"spaghet"></h2> <script>spaghet.innerHTML (new URL(locatio…

【TB作品】msp430f5529单片机,dht22,温湿度传感器,OLED显示屏

使用DHT22温湿度传感器和OLED显示屏的单片机项目 博客名称 利用MSP430单片机读取DHT22并显示温湿度 作品功能 本项目利用MSP430单片机读取DHT22温湿度传感器的数据&#xff0c;并将温湿度信息显示在OLED显示屏上。通过这个项目&#xff0c;您可以学习如何使用单片机与传感器…

前端开发之中svg图标的使用和实例

svg图标的使用和实例 前言效果图1、安装插件2、vue3中使用2.1、 在components文件夹中,创建公共类SvgIcon/index.vue2.2、创建icons文件,存放svg图标和将所有的svg图标进行引用并注册成全局组件2.3、在man.js 中注册2.4、在vue.config.js中配置svg2.5、在vue中的调用svg图标3…

数仓建模—指标体系指标拆解和选取

数仓建模—指标拆解和选取 第一节指标体系初识介绍了什么是指标体系 第二节指标体系分类分级和评价管理介绍了指标体系管理相关的,也就是指标体系的分级分类 这一节我们看一下指标体系的拆解和指标选取,这里我们先说指标选取,其实在整个企业的数字化建设过程中我们其实最…

电脑下载速度很慢怎么解决 电脑下载加速工具测评推荐

电脑下载速度慢&#xff0c;不仅耗时冗长&#xff0c;还会影响工作和学习效率。漫长的等待让人心情焦虑&#xff0c;每一秒都是对耐心的极大考验。有关电脑下载速度很慢怎么解决&#xff0c;电脑下载加速工具评测推荐的问题&#xff0c;本文将进行详细介绍。 一、电脑下载速度…

IO进程线程(七)代码替换函数、守护进程

文章目录 一、代码替换函数&#xff08;一&#xff09;system函数&#xff08;二&#xff09;exec函数族 二、守护进程&#xff08;一&#xff09;创建1. 脱离父进程影响2. 脱离原会话组和进程组的影响3.修改进程工作目录4. 修改进程创建文件的掩码5. 关闭从父进程继承的文件描…

每日一练——相同分数的最大操作数目

3038. 相同分数的最大操作数目 I - 力扣&#xff08;LeetCode&#xff09;相同分数的最大操作数目 I3038. 相同分数的最大操作数目 I - 力扣&#xff08;LeetCode&#xff09; 第一版 int maxOperations(int* nums, int numsSize) {if(numsSize < 1)return 0;int temp 0;…