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

news2024/11/26 0:52:03

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

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • 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.coloradmin.cn/o/1803487.html

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

相关文章

最小相位系统

最小相位系统 1、传递函数 一个线性系统的响应。 比如一个RC低通滤波器&#xff1a; 交流分量在电容的充放电中被滤除掉&#xff0c;通过设置电容器的电容值&#xff0c;以及电阻值&#xff0c;能够控制这种滤除能力&#xff0c;这个参数为RC。 电容的电抗为 1 / j w C 1/j…

变声器软件免费版有哪些?国内外12大热门变声器大盘点!(新)

变声软件是一种人工智能AI音频处理工具&#xff0c;允许用户实时修改自己的声音或改变预先录制的音频。这些软件解决方案可提供不同的效果&#xff0c;如改变声音的音调或速度&#xff0c;或将我们的声音转换成其他人或其他东西的声音&#xff0c;如名人、卡通人物、机器人或不…

力扣96 不同的二叉搜索树 Java版本

文章目录 题目描述代码 题目描述 给你一个整数 n &#xff0c;求恰由 n 个节点组成且节点值从 1 到 n 互不相同的 二叉搜索树 有多少种&#xff1f;返回满足题意的二叉搜索树的种数。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;5 示例 2&#xff1a; 输入…

澳大利亚和德国媒体投放-国外新闻发稿-海外软文推广

德国媒体 Firmenpresse德国新闻 Firmenpresse德国新闻是一家备受欢迎的新闻发布平台&#xff0c;其好友搜索引擎在收录网站方面表现出色。如果您希望更好地将您的新闻传播给德国受众&#xff0c;Firmenpresse德国新闻将是一个理想的选择。 Frankfurt Stadtanzeiger法兰克福城…

三维重建 虚拟内窥镜(VE)是什么?怎么实现 使用场景

1.虚拟内窥镜&#xff1a; 就是利用计算机图形学、虚拟现实、图像处理和科学可视化等信息处理技术仿真光学内窥镜对病人进行诊断的一种技术。 VE(Virtual Endoscopy)&#xff0c;虚拟内镜技术。这种CT重建图像可以模拟各种内镜检查的效果&#xff0c;它是假设视线位于所要观察…

RaspAP:轻松实现树莓派无线 AP

RaspAP 是一个可以将树莓派轻松部署成无线 AP&#xff08;Access Point&#xff09;的软件方案&#xff0c;具有一套响应式的 WebUI 来控制 WiFi&#xff0c;用起来和家用路由器一样方便。RaspAP 可以运行在 Raspbian 上&#xff0c;只需要先给树莓派安装好 Raspbian 系统&…

白话解读网络爬虫

网络爬虫&#xff08;Web Crawler&#xff09;&#xff0c;也称为网络蜘蛛、网络机器人或网络蠕虫&#xff0c;是一种自动化程序或脚本&#xff0c;被用来浏览互联网并收集信息。网络爬虫的主要功能是在互联网上自动地浏览网页、抓取内容并将其存储在本地或远程服务器上供后续处…

备战十一届大唐杯国赛预选赛

这次省赛带了太多个省一了&#xff0c;具体可看下面的图片&#xff0c;只放了一部分。目前根据可靠消息&#xff0c;应该还有个预选赛和去年一样&#xff0c;就是还会考一次仿真。如果说通过了就是国二起步然后去北方工业争夺国一国二&#xff0c;没过的话就是国三。 每…

利用GPT和PlantUML快速生成UML图用于设计

在软件开发中&#xff0c;设计阶段可是关键的一步。UML&#xff08;统一建模语言&#xff09;图能帮我们更清晰地理解和规划系统结构&#xff0c;但手动画UML图有时会很费时费力。好消息是&#xff0c;通过结合使用ChatGPT和PlantUML&#xff0c;我们可以高效地生成UML图&#…

最新下载:Hype 4 mac版【软件附加安装教程】

【简介】 Hype是一款强大的Mac OS平台 HTML5 创作工具&#xff0c;它可以在网页上做出赏心悦目的动画效果&#xff0c;创建丰富的网页交互动画&#xff0c;支持层、时间轴等编辑方式&#xff0c;并能很好的导出HTML5/CSS3/JavaScript&#xff0c;在台式机&#xff0c;智能手机…

进口电动低温调节阀的作用-美国NOTON

进口电动低温调节阀在低温环境下的精确控制、广泛的工业应用、高效能设计、耐低温性和密封性、稳定性及可靠性以及安全性等方面发挥着重要作用。 进口电动低温调节阀的作用主要体现在以下几个方面&#xff1a; 低温环境下的精确控制&#xff1a; 进口电动低温调节阀是一种专为…

2024 年最新 Python 基于百度智能云实现短语音识别详细教程

百度智能云语音识别 采用国际领先的流式端到端语音语言一体化建模算法&#xff0c;将语音快速准确识别为文字&#xff0c;支持手机应用语音交互、语音内容分析、机器人对话等场景。百度短语音识别可以将 60 秒以下的音频识别为文字。适用于语音对话、语音控制、语音输入等场景…

Shell以及Shell编程

Shell的任务 ①分析命令&#xff1b; ②处理通配符、变量替换、命令替换、重定向、管道和作业控制&#xff1b; ③搜索命令并执行。 内部命令&#xff1a;内嵌在Shell中。 外部命令&#xff1a;存在于磁盘上的独立可执行文件。 #&#xff01;/bin/bash #! 称为一个幻数&…

微信小程序毕业设计-综合文化信息管理系统项目开发实战(附源码+论文)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;微信小程序毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计…

【开源】医院电子病历管理系统 SSM+JSP+MySQL

目录 一、项目介绍 科室模块 医生模块 预约挂号模块 就诊记录模块 就诊评价模块 二、项目界面 三、核心代码 一、项目介绍 经典老框架SSM打造入门项目《医院电子病历管理系统》&#xff0c;分为用户网页和管理后台&#xff0c;包括科室模块、医生模块、预约挂号模块、…

老黄一举揭秘三代GPU!打破摩尔定律,打造AI帝国,量产Blackwell解决ChatGPT全球耗电难题

近日&#xff0c;老黄手持Blackwell向全世界展示的那一刻&#xff0c;全场观众沸腾了。 这是迄今为止世界上最大的芯片&#xff01; 用老黄的话来说&#xff0c;它是「全世界迄今为止制造出来的最复杂、性能最高的计算机。」GPT-4o深夜发布&#xff01;Plus免费可用&#xff01…

10倍速开发开关电源:PSIM DLL集成指南与如何单步调试你的代码

文末有彩蛋哦。 去年提到要写一篇如何在利用PSIM Visual Studio进行仿真联调&#xff0c;加速实际嵌入式端C代码的开发&#xff0c;但因为懒一直没兑现。 本期简单总结下实现的方法。 特别声明&#xff1a;本文约一半以上内容有kimi/文心一言提问式生成&#xff0c;仅用于技…

【数据结构】二叉树:简约和复杂的交织之美

专栏引入&#xff1a; 哈喽大家好&#xff0c;我是野生的编程萌新&#xff0c;首先感谢大家的观看。数据结构的学习者大多有这样的想法&#xff1a;数据结构很重要&#xff0c;一定要学好&#xff0c;但数据结构比较抽象&#xff0c;有些算法理解起来很困难&#xff0c;学的很累…

菜品信息分页查询——后端SpringBoot

1.分页查询的逻辑&#xff1a; 页面发送ajax请求&#xff0c;将分页查询参数(page&#xff0c;pageSize, name)提交到服务端&#xff0c;获取分页数据&#xff1b; 页面发送请求&#xff0c;请求服务端进行图片下载&#xff0c;用于页面图片展示。 开发菜品信息分页查询功能&a…

大模型应用:基于Golang + 大模型构建简易的电商售前对话服务

1.背景 某X互联网电商公司为了解决当前大量用户的售前咨询问题&#xff0c;需要建设一个不需要客服介入的简易电商售前机器人&#xff0c;用于回答用户的售前问题&#xff0c;并给出基本可靠的咨询回答。 当前大模型如gpt、baichuan、文心等均有开放使用的OpenAPI接口&#xf…