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

news2024/10/6 22:32:02

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

文章目录

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


一、作品介绍

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

二、作品演示

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码


<div id="main">
		<div id="header">
			<div class="logo">
				<img src="./image/logo.jpg">
			</div>
			<div class="header_right">
				<a href="">关于我们</a>
				<span>|</span>
				<a href="">联系我们</a>
			</div>
		</div>

		<div id="nav">
			<ul>
				<li><a href="">首页</a></li>
				<li><a href="">二十四节气</a></li>
				<li><a href="">节气传说</a></li>
				<li><a href="">节气习俗</a></li>
				<li><a href="">节气渊源</a></li>
			</ul>
		</div>

		<div id="banner">
			<img src="./image/banner.jpeg">
		</div>

		<div id="content">
			<div class="content1">
				<div class="content1_top">
					
					<div class="content1_top_item">
						<div class="content_tit">
							<span>冬至介绍</span>
							<a href="">MORE&gt;&gt;</a>
						</div>

						<div class="content_desc">
							冬至,又称日南至、冬节、亚岁等,兼具自然与人文两大内涵,既是二十四节气中一个重要的节气,也是中国民间的传统祭祖节日。冬至是四时八节之一,被视为冬季的大节日,在古代民间有“冬至大如年”的讲法。冬至习俗因地域不同而又存在着习俗内容或细节上的差异。在中国南方地区,有冬至祭祖、宴饮的习俗。在中国北方地区,每年冬至日有吃饺子的习俗。
						</div>
					</div>
					<div class="content1_top_item">
						<div class="content_tit">
							<span>冬至谚语</span>
							<a href="">MORE&gt;&gt;</a>
						</div>

						<div class="content_desc">
							<ul>
								<li>冬至西北风,来年干一春。</li>
								<li>清爽冬至邋遢年,邋遢冬至清爽年。</li>
								<li>冬至晴,正月雨;冬至雨,正月晴。</li>
								<li>冬至晴,新年雨,中秋有雨冬至晴。</li>
								<li>冬至晴,新年雨;冬至雨,新年晴。</li>
								<li>冬至冷,春节暖;冬至暖,春节冷。</li>
								<li>冬至不冷,夏至不热。</li>
								<li>冬至暖,冷到三月中。</li>
								<li>冬至暖,烤火到小满。</li>
							</ul>
						</div>
					</div>
					<div class="cl"></div>
				</div>

				<div class="content1_bom">
					
					<div class="content_tit">
						<span>冬至视频</span>
						<a href="">MORE&gt;&gt;</a>
					</div>

					<video controls autoplay>
					  <source src="./image/1.mp4" type="video/mp4">
					</video>
				</div>
			</div>

			<div  class="content2">
				
				<div class="content_tit">
					<span>冬至风俗</span>
					<a href="">MORE&gt;&gt;</a>
				</div>

				<div class="content_imgs">
					<img src="./image/1.jpeg">
					<img src="./image/2.jpeg">
					<img src="./image/3.jpg">
					<img src="./image/4.jpg">
					<img src="./image/5.jpeg">
					<img src="./image/6.jpg">
					<img src="./image/7.jpg">
					<img src="./image/8.jpg">
					<img src="./image/9.png">
					<img src="./image/10.jpg">
				</div>
			</div>
			<div class="cl"></div>
		</div>

五、源码获取

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

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

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

相关文章

误删.idea后的svn菜单找回

最近做开发maven出了问题总是找不到已有的包&#xff0c;最后相信大力出奇迹删除.idea目录重启idea&#xff0c;结果问题没解决&#xff0c;给我svn搞没了。无奈重新研究恢复svn&#xff0c;这里记录一下我成功的方法。 我是之前做过配置&#xff0c;删除.idea后消失的svn相关…

2024湖南消费促进年启动仪式在益阳举行

优化消费环境,激发消费活力。值3月15日消费者权益日,由湖南省商务厅、益阳市人民政府主办,益阳市商务局承办的2024湖南消费促进年(春季)启动仪式暨益阳消费促进系列活动在益阳佳宁娜广场隆重举行。湖南省各市州商务部门领导、各区县市商务主管部门领导、参展协会代表以及100多家…

《算法设计与分析第二版》100行 C语言实现 广度度优先算法 BFS——最短距离

抄录自课本P157页。 #include <stdio.h> #define MAXQ 100 // 队列大小 #define MAxN 10 // 最大迷宫大小 int n8; // 迷宫大小 char Maze [MAxN][MAxN] {{O,X,X,X,X,X,X,X,},{O,O,O,X,O,X,O,X,},{X,X,O,O,O,X,O,X,},{X,X,O,X,O,X,X,X,},…

普通人搞副业,空闲时间做,月入5w+

我是电商珠珠 大家会发现&#xff0c;朱砂越来越火&#xff0c;不仅是因为它好看&#xff0c;而且商家对外扬言可以招财。现在的人对爱情不屑一顾&#xff0c;财神殿里可以长跪不起&#xff0c;人人都想求财&#xff0c;想要在空余时间搞副业赚大钱&#xff0c;但做什么还没有…

掌握 Swagger annotations(注解):完全指南与最佳实践

利用 Swagger 注解增强 API 理解 Swagger 提供的注解集是其框架中定义 API 规范和文档的重要工具。这些注解在代码里标注重要部分&#xff0c;为 Swagger 的解析工作铺路&#xff0c;进而生成详尽的 API 文档。开发者编写的注释能够被转换成直观的文档&#xff0c;并展现API端…

【呼市经开区建设服务项目水、电能耗监测 数采案例】

一、项目背景及需求 项目地点位于内蒙古呼和浩特市&#xff0c;呼市数字经开区建设服务项目。属于企业用能数据采集、能耗监测板块子项目。 针对水、电能耗数据采集&#xff0c;结合现场客观因素制约&#xff0c;数据采集方面存在较大难度。大多数国网电表485接口由于封签限制&…

B009-springcloud alibaba 服务配置 Nacos Config

目录 服务配置中心介绍Nacos Config入门Nacos Config深入配置动态刷新方式一: 硬编码方式方式二: 注解方式(推荐) 配置共享同一个微服务的不同环境之间共享配置不同微服务中间共享配置 nacos的几个概念 服务配置中心介绍 首先我们来看一下,微服务架构下关于配置文件的一些问题…

031—pandas 读取解析实验室数据至DataFrame

前言 某个科研实验室在进行一项物理实现&#xff0c;实验仪器会输出一个 txt 文本的数据&#xff0c;研究人员需要从这个文本中将数据结构化才能进行进行统计分析。 在为个解析和分析过程中&#xff0c;他们选择了 Python 的 pandas 库来完成这些操作。我们今天来完成这这个 t…

一口气看完明朝276年历史

明朝是中国历史上最后一个由汉人建立的大一统封建王朝&#xff0c;建立于公元1368年&#xff0c;亡于公元1644年&#xff0c;国祚276年&#xff0c;传12世16帝。 太祖建国 太祖&#xff08;1368~1398&#xff09; 公元1368年&#xff0c;朱元璋在南京应天府建元称帝&#xff…

Linux 中搭建 主从dns域名解析服务器

CSDN 成就一亿技术人&#xff01; 作者主页&#xff1a;点击&#xff01; Linux专栏&#xff1a;点击&#xff01; CSDN 成就一亿技术人&#xff01; ————前言———— 主从&#xff08;Master-Slave&#xff09;DNS架构是一种用于提高DNS系统可靠性和性能的配置方式。…

兼顾稳定和性价比的跨国企业SD-WAN组网

随着全球业务不断扩张&#xff0c;跨国企业面临着跨域网络的复杂性和不稳定性带来的挑战。不同地区分支机构的数据互通和协作常常受到制约&#xff0c;而在网络问题出现后&#xff0c;排查多方问题导致高昂的部署和运维成本。尽管直连方案在表面上看似省钱&#xff0c;但由于不…

爱恩斯坦棋小游戏使用C语言+ege/easyx实现

目录 1、游戏介绍和规则 2、需要用到的头文件 3、这里我也配上一个ege和easyx的下载链接吧&#xff0c;应该下一个就可以 4、运行结果部分展示 5、需要用到的图片要放在代码同一文件夹下 6、代码地址&#xff08;里面有需要用到的图片&#xff09; 1、游戏介绍和规则 规则如…

few shot vid2vid(Few-shot Video-to-Video Synthesis)论文理解

代码&#xff1a;https://github.com/NVlabs/few-shot-vid2vid 论文&#xff1a;https://arxiv.org/abs/1910.12713

centos虚拟机设置静态IP地址

vim编辑文件 /etc/sysconfig/network-scripts/ifcfg-ens33 重启即可。

kkFileView漏洞总结

0x01 kkFileview存在任意文件读取漏洞 漏洞描述 Keking KkFileview是中国凯京科技&#xff08;Keking&#xff09;公司的一个 Spring-Boot 打造文件文档在线预览项目。Keking kkFileview 存在安全漏洞&#xff0c;该漏洞源于存在通过目录遍历漏洞读取任意文件&#xff0c;可能…

TCP:三次握手四次挥手及相关问题:

连接—三次握手&#xff1a; 流程图&#xff1a; 过程详解&#xff1a; 客户端(connect)连接服务器&#xff08;listen) Client将标志位SYN置为1,随机产生一个值seqx, 并将该数据包发送给Server, Client进入SYN_ SENT状态&#xff0c;等待Server确认。Server收到数据包后由标…

提权,提个damn

阅读须知&#xff1a; 探索者安全团队技术文章仅供参考,未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作,由于传播、利用本公众号所提供的技术和信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者 本人负责&#xff0c;作者不为此承担任何责任,如…

2024蓝桥杯每日一题(递归)

备战2024年蓝桥杯 -- 每日一题 Python大学A组 试题一&#xff1a;有序分数 试题二&#xff1a;正则问题 试题三&#xff1a;带分数 试题四&#xff1a;约数之和 试题五&#xff1a;分形之城 试题一&#xff1a;有序分数 【题目描述】 【输入格…

【sequence进阶 config_db message_2024.03.14】

sequence进阶 sequence的仲裁 多个sequence发送给一个sequencer的情况&#xff0c;使用的两种方式&#xff1a; class virtual_seqence extends uvm_sequence;virtual task body();sub_sequene seq_0;sub_sequene seq_1;//第一种方式p_sequencer.apb_mst_sqr.set_arbitratio…

计算机一级word 文字处理理论+实操试题

计算机一级word 文字处理理论实操试题 单选题&#xff1a; 1、在Word编辑状态下&#xff0c;要将另一文档的内容全部添加在当前文档的当前光标处&#xff0c;应选择的操作是依次单击______。 A.“文件”选项卡和“打开”项 B.“文件”选项卡和“新建”项 C.“插入”选项卡…