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.想要获取本文源码,点击前往吧

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

反射型xss靶场练习

反射型xss危害小&#xff0c;这里使用的xss靶场是常用的xss靶场&#xff1a;xss-labs。 当我们完成弹窗后就通过该关卡&#xff0c;说该关卡存在xss的一个漏洞并且可以解析js代码。 第一关&#xff1a; 这里没有过滤我们输入的代码&#xff1a;直接将js代码放在js代码中&a…

SQL学习小记(五)解决python连接Oracle数据库及出现的问题

python运行时出现错误DPI-1047: Cannot locate a 64-bit Oracle Client library: “The specified module could not be 解决python连接Oracle数据库及出现的问题 1. 配置本地Oracle的path2. python10的详细安装过程2.1. python10下载2.2. python10安装2.3.额外操作 3. python…

ARM功耗管理之功耗状态及功耗模式

安全之安全(security)博客目录导读 目录 一、功耗状态定义 ​编辑二、功耗模式定义 三、功耗状态和功耗模式区别 四、功耗模式细分 五、功耗状态细分 1、Core功耗状态 2、Cluster功耗状态 3、设备功耗状态 4、SoC功耗状态 5、功耗状态举例 思考:功耗状态?功耗模式…

论文复现:Track to Detect and Segment: An Online Multi-Object Tracker

论文下载链接&#xff1a;链接 简单介绍&#xff1a;大多数在线多目标跟踪器在神经网络中独立执行目标检测&#xff0c;无需任何跟踪输入。在本文中提出了一种新的在线联合检测和跟踪模型TraDeS&#xff08;TRAck to DEtect and Segment&#xff09;&#xff0c;利用跟踪线索…

Git从入门到放弃

由于我的Git学的不太好&#xff0c;所以为了能够将以后我的学习笔记能够整理的更好&#xff0c;我先要系统的学习一下git&#xff0c;文章由此产生。 文章笔记源自尚硅谷Git入门到精通全套教程视频内容 1 进入官网 学习新技术的第一步需要熟悉官网&#xff0c;Git也不例外。ht…

纷享销客安全体系:安全合规认证

安全合规认证是指组织通过独立的第三方机构对其信息系统和数据进行评估和审查&#xff0c;以确认其符合相关的安全标准、法律法规和行业要求的过程。 安全合规认证可以帮助组织提高信息系统和数据的安全性&#xff0c;并向客户、合作伙伴和监管机构证明其符合相关的安全标准和…

✔️Vue基础+

✔️Vue基础 文章目录 ✔️Vue基础computed methods watchcomputed计算属性methods计算属性computed计算属性 VS methods方法计算属性的完整写法 watch侦听器&#xff08;监视器&#xff09;watch侦听器 Vue生命周期Vue生命周期钩子 工程化开发和脚手架脚手架Vue CLI 项目目录介…

HarmonyOS(二十三)——HTTP请求实战一个可切换的头条列表

在前一篇文章&#xff0c;我们已经知道如何实现一个http请求的完整流程&#xff0c;今天就用官方列子实战一个简单的新闻列表。进一步掌握ArkTS的声明式开发范式&#xff0c;数据请求&#xff0c;常用系统组件以及touch事件的使用。 主要包含以下功能&#xff1a; 数据请求。…

独立游戏之路 -- 获取OAID提升广告收益

Unity 之 获取手机&#xff1a;OAID、IMEI、ClientId、GUID 前言一、Oaid 介绍1.1 Oaid 说明1.2 移动安全联盟(MSA) 二、站在巨人的肩膀上2.1 本文实现参考2.2 本文实现效果2.3 本文相关插件 三、Unity 中获取Oaid3.1 查看实现源码3.2 工程配置3.3 代码实现3.4 场景搭建 四、总…

金融科技:跨境支付的新引擎,开启全球化支付新时代

一、引言 在全球经济一体化的今天,跨境支付作为连接各国经贸往来的重要桥梁,其便捷性、安全性和效率性成为了各国企业和消费者关注的焦点。金融科技,作为现代金融与传统科技深度融合的产物,正以其独特的创新力和推动力,成为跨境支付领域的新引擎,引领着全球化支付新时代…

基于SSM的旅游民宿预定系统【源码】【运行教程】

基于SSM的旅游民宿预定系统 一、项目介绍1. 游客功能2. 管理员功能3. 高级功能 二、项目技术栈三、项目运行四、项目演示总结 大家好&#xff0c;这里是程序猿代码之路&#xff01;随着旅游业的快速发展&#xff0c;民宿作为一种独特的住宿方式越来越受到游客的喜爱。为了提升用…

Android端信号处理总结

最早之前不管是视频录制还是视频直播&#xff0c;都是从麦克风获取音频后&#xff0c;直接交编码器&#xff0c;封装复用到不同媒体格式。在后面在IM场景中做短语音消息、短语音消息转文本以及语音输入设计到语音识别&#xff0c;也仍然是直接从麦克风拿数据。在整个语音SDK设计…

【JavaScript】内置对象 - 字符串对象 ④ ( 根据索引位置返回字符串中的字符 | 代码示例 )

文章目录 一、根据索引位置返回字符串中的字符1、charAt 函数获取字符2、charCodeAt 函数获取字符 ASCII 码3、数组下标获取字符 String 字符串对象参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String 一、根据索引位置返回…

新火种AI|超越苹果成为市值第二大公司!英伟达的时代已然来临...

美东时间周三&#xff08;6月5日&#xff09; &#xff0c;人工智能领域的龙头公司英伟达开始发力&#xff0c;其股票实现大涨&#xff0c;幅度超过5 %&#xff0c;刷新历史新高。更重要的是&#xff0c;历经了这一波的上涨&#xff0c;英伟达的市值突破了3万亿美元。截至当日收…

嵌入式 Linux LED 驱动开发实验学习

I.MX6U-ALPHA 开发板上的 LED 连接到 I.MX6ULL 的 GPIO1_IO03 这个引脚上&#xff0c;进行这个驱动开发实验之前&#xff0c;需要了解下地址映射。 地址映射 MMU 全称叫做 MemoryManage Unit&#xff0c;也就是内存管理单元。在老版本的 Linux 中要求处理器必须有 MMU&#x…

香港电讯荣获广东省香港商会「2023金领航奖」

&#x1f389;近日&#xff0c;由香港贸易发展局与广东省香港商会联合主办的「粤港服务业合作交流会 暨 2023金领航奖颁奖典礼」在广州举行&#xff0c;香港电讯非常荣幸获颁「卓越企业大奖」&#x1f3c6; &#x1f3c6;「金领航奖」由广东省香港商会于2018年创办&#xff0c;…

常见的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…

Science刊发!乌普萨拉大学最新神经形态触觉人造皮肤可快速精准识别物体

当前&#xff0c;人形机器人使用的传统电子皮肤在处理触觉感知信息方面的能力并不强&#xff0c;尤其是在时间信息编码和快速特征提取方面存在一定的局限性。简单来说就是机器人无法完成在接触到物品的瞬间&#xff0c;判断用怎样的力度去对该物品做出反应。尽管多模态大模型和…

171.二叉树:二叉树的所有路径(力扣)

代码解决 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(nullptr, right(nullptr) {}* Tree…

C 语言实现在终端里输出二维码

Mac 环境安装二维码库 brew install qrencode安装过程报权限问题执行以下命令 sudo chown -R 用户名 /usr/local/include /usr/local/lib chmod uw /usr/local/include /usr/local/lib#include <stdio.h> #include <qrencode.h>void print_qr_code(QRcode *qrcode…