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库 …

【pytest】为什么不能使用__init__

示例代码分析 以下是一个简单的示例&#xff0c;演示了在 pytest 中使用 __init__ 方法导致的问题&#xff1a; class TestClass:def __init__(self):self.x 10def test_add(self):self.x 5assert self.x 15def test_main():pytest.main()在这个示例中&#xff0c;TestCla…

RPA影刀 | 变量的使用

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

flask项目结构与蓝图【心得】

flask 项目没有标准的项目结构&#xff0c;合理组织&#xff0c;确保能跑&#xff0c;可配置&#xff0c;可拓展、模型可被发现就行。 一般可以分为两种 按模型&#xff08;业务&#xff09;划分 按功能划分&#xff0c;就是api、models、config、db、service等 按模型&…

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…

字母异位词分组(charyw)

字母异位词分组 题目描述 给定一个字符串数组&#xff0c;将字母异位词组合在一起。字母异位词指字母相同&#xff0c;但排列不同的字符串。 输入格式 第一行正整数n&#xff0c;表示有n个字符串(1<n<1000) 第二行n个字符串&#xff0c;空格隔开 输出格式 多组字母…

Linux基础指令网络管理002

Linux网络管理涉及配置、监控和维护网络接口、路由、防火墙规则、网络服务等&#xff0c;本章主要讲述如何查看网络接口以及管理网络连接。 操作系统&#xff1a; CentOS Stream 9 操作步骤&#xff1a; 查看网络接口及ip信息 指令ipconfig ,如果不能使用该命令先下载 yum …

Qt程序发布工具windeployqt.exe所带来的坑

一、使用Qt自带的发布工具&#xff1a;windeployqt.exe来自动查找运行时库文件&#xff0c;是个好办法。但是该工具有坑&#xff01;并且坑很深&#xff01;我在发布程序时就遇到了一个大坑&#xff01;我使用该工具进行程序发布&#xff0c;自动查找运行时库文件&#xff0c;看…

【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…

mybatis离谱bug乱转类型

字符串传入的参数被转成了int&#xff1a; Param("online") String online<if test"online 0">and (heart_time is null or heart_time <![CDATA[ < ]]> UNIX_TIMESTAMP(SUBDATE(now(),INTERVAL 8 MINUTE)) )</if><if test"…

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

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

【react】useEffect 快速上手

useEffect 快速上手 useEffect(setup, dependencies?) 可以接收两个参数&#xff0c;分别是回调函数与依赖数组. useEffect 用什么姿势来调用&#xff0c;本质上取决于你想用它来达成什么样的效果。下面我们来简单介绍 useEffect 的调用规则。 每一次渲染后都执行的副作用&a…

国内拉取国外镜像方法

参考&#xff1a; https://mp.weixin.qq.com/s/-bDrC63J52oSEcIfGcQ7pw 1. github创建仓库 images-sysncer 2. 在此仓库中创建目录 .github/workflows 3. 在此目录中创建文件 sync-image-example.ymlvim sync-image-example.yml name: Sync Image to Aliyun Exampleon:pus…

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

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

从零手写实现 nginx-11-文件处理逻辑与 range 范围查询合并

前言 大家好&#xff0c;我是老马。很高兴遇到你。 我们为 java 开发者实现了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何处理的&#xff0c;可以参考我的另一个项目&#xff1a; 手写从零实现简易版 tomcat minicat 手写 nginx 系列 …

C语言中memset()以及memcpy()函数使用方法

memset( ) 在函数memset&#xff08;void *A&#xff0c;int B&#xff0c;int C&#xff09;&#xff1b;语句中&#xff0c;程序完成了将A指针指向的内容开始往后的C个字节内容置为B。 例如下列函数&#xff0c;最终结果是&#xff1a;cps数组内容为&#xff1a;2222222222…