HTML静态网页成品作业(HTML+CSS)—— 节日端午节介绍网页(5个页面)

news2025/1/18 3:55:11

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

文章目录

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


一、作品介绍

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

二、作品演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>端午节</title>
	<link rel="stylesheet" href="./css/style.css">
</head>
<body>
	<div class="wrapper">
		<div class="banner">
			<img src="./images/banner.jpg" alt="">
		</div>
		<div class="nav">
			<a href="index.html">首页</a>
			<a href="qiyuan.html">节日起源</a>
			<a href="chuanshuo.html">端午传说</a>
			<a href="xisu.html">民间习俗</a>
			<a href="liuyan.html">在线留言</a>
		</div>
		
		<div class="main">
			<p>
				<img src="./images/1.jpeg" alt="" align="right" class="ml1" width="260">
				端午节,又称端阳节、龙舟节、重午节、重五节、天中节等,是汉族的传统节日 ,日期在每年农历五月初五,是集拜神祭祖、祈福辟邪、欢庆娱乐和饮食为一体的民俗大节。端午节源于自然天象崇拜,由上古时代祭龙演变而来。仲夏端午,苍龙七宿飞升于正南中央,处在全年最“中正”之位,正如《易经·乾卦》第五爻:“飞龙在天”。端午是“飞龙在天”吉祥日,龙及龙舟文化始终贯穿在端午节的传承历史中。
			</p>
			<p>
				端午节是流行于中国以及汉字文化圈诸国的传统文化节日,传说战国时期的楚国诗人屈原在五月初五跳汨罗江自尽,后人亦将端午节作为纪念屈原的节日;也有纪念伍子胥、曹娥及介子推等说法。端午节的起源涵盖了古老星象文化、人文哲学等方面内容,蕴含着深邃丰厚的文化内涵,在传承发展中杂糅了多种民俗为一体,各地因地域文化不同而又存在着习俗内容或细节上的差异。
			</p>
			<p>
				端午节与春节、清明节、中秋节并称为中国四大传统节日。端午文化在世界上影响广泛,世界上一些国家和地区也有庆贺端午的活动。20065月,国务院将其列入首批国家级非物质文化遗产名录;自2008年起,被列为国家法定节假日。20099月,联合国教科文组织正式批准将其列入《人类非物质文化遗产代表作名录》,端午节成为中国首个入选世界非遗的节日。
			</p>
			<div class="main_img">
				<img src="./images/2.jpg" alt="">
			</div>
		</div>
		
		
		<div class="footer">
			端午节快乐
		</div>
	</div>
</body>
</html>	

五、源码获取

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

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

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

相关文章

从 URL 中获取数据并创建列表解析

当我们从 URL 中获取数据时&#xff0c;可能你通常会使用 Python 的 requests 库来发送 HTTP 请求&#xff0c;并使用 json() 方法来解析 JSON 数据。下面是一个简单的示例&#xff0c;演示如何从 URL 获取数据并创建一个列表解析&#xff0c;希望可以帮助大家。 1、问题背景 …

嵌入式学习——4——C++中的动态内存分配和回收(堆区)

1、内存的分配与回收 C语言中使用的是malloc和free函数进行动态内存分配和回收的。 C中依然可以使用上述的两个函数来完成动态内存分配和回收的。 C也给用户提供了两个关键字new、delete来完成动态内存分配和回收的 单个分配、回收 //在堆区申请了int类型的大小空间&#xff0c…

四川汇聚荣聚荣科技有限公司综合实力怎么样?

在科技日新月异的今天&#xff0c;企业的综合实力成为衡量其市场竞争力的重要指标。四川汇聚荣聚荣科技有限公司作为一家在行业内具有一定影响力的企业&#xff0c;其综合实力如何&#xff0c;自然成为外界关注的焦点。以下将从多个维度深入分析该公司的实力。 一、公司概况与核…

ChatGPT制作一个简单的客服机器人

包含功能&#xff1a; MVP&#xff08;最简可行产品&#xff09;版本的客服机器人应该聚焦于核心功能&#xff0c;以快速上线和测试用户反馈为目标。以下是一个简化的版本&#xff1a; 自动问答&#xff08;FAQ&#xff09;功能&#xff1a; 支持回答常见问题&#xff0c;例如…

一键分割视频并生成M3U8格式:高效管理视频内容,畅享流畅播放新体验

视频内容已成为我们日常生活和工作中的重要组成部分。无论是个人分享生活点滴&#xff0c;还是企业宣传产品与服务&#xff0c;视频都以其直观、生动的形式&#xff0c;吸引着我们的眼球。然而&#xff0c;随着视频内容的不断增多&#xff0c;如何高效、便捷地管理这些视频&…

虚幻引擎5 Gameplay框架(四)

Gameplay重要类及重要功能使用方法&#xff08;三&#xff09; 虚幻的委托机制 虚幻委托之间的区别序列化就是是否可以在蓝图中执行 多播与单播的创建 制作功能&#xff1a;使用多播与单播将血条与血量进行实时更新首先新建一个单播与一个多播委托 实例化这两个委托的标签…

6.5 作业

设计一个Per类&#xff0c;类中包含私有成员:姓名、年龄、指针成员身高、体重&#xff0c;再设计一个Stu类&#xff0c;类中包含私有成员:成绩、Per类对象p1&#xff0c;设计这两个类的构造函数、析构函数。 #include <iostream>using namespace std; class Stu { privat…

低温测控芯片迎来突破性进展!

为支持大规模超导量子计算机的开发&#xff0c;日本最大的公共研究机构之一国家先进工业科学与技术研究所 (AIST) 的研究人员与横滨国立大学、东北大学&#xff08;日本国立大学之一&#xff09;和NEC公司合作&#xff0c;提出并成功演示了一种可在低温下控制许多量子比特的超导…

CSAPP Lab08——Proxy Lab完成思路

蓝色的思念 突然演变成了阳光的夏天 空气中的温暖不会很遥远 ——被风吹过的夏天 完整代码见&#xff1a;CSAPP/proxylab-handout at main SnowLegend-star/CSAPP (github.com) Q&#xff1a;计算机网络中port的作用是什么&#xff1f; A&#xff1a;在计算机网络中&#xff…

下载安装Grafana 监控mysql和Linux主机

下载地址:https://grafana.com/grafana/download [rootlocalhost ~]# wget https://dl.grafana.com/oss/release/grafana-7.2.0- 1.x86_64.rpm 安装 [rootlocalhost ~]# yum install grafana-7.2.0-1.x86_64.rpm -y启动服务 [rootlocalhost ~]# systemctl enable --now grafa…

AST 在前端开发中的应用与实践:从代码分析到自动化转换

抽象语法树&#xff08;AST&#xff0c;Abstract Syntax Tree&#xff09;在前端开发中有着广泛的应用。它是编译器和工具链的核心组件&#xff0c;使得代码分析、转换、优化等操作成为可能。在前端开发中&#xff0c;AST 主要用于代码编译和转译、代码优化、代码分析、代码格式…

C语言数字全排列生成器

前言 从0开始记录我的学习历程&#xff0c;我会尽我所能&#xff0c;写出最最大白话的文章&#xff0c;希望能够帮到你&#xff0c;谢谢。 提示&#xff1a;文章作者为初学者&#xff0c;有问题请评论指正&#xff0c;感谢。 这个代码的功能是生成并打印出从1到N的所有整数的…

Allegro-开店指南

开店指南 Allegro企业账户注册流程 Allegro注册流程分成两个主要阶段: 第一创建您的账户&#xff0c;第二激活您账户的销售功能。完成两个阶段&#xff0c;才能在Allegro进行销售。 中国企业应该入驻Business account&#xff08;企业账户&#xff09;。 第二阶段&#xff…

nginx中配置ssl证书(宝塔面板)

首先申请一个SSL证书&#xff0c;这里我申请的joyssl的免费证书。提交订单申请后&#xff0c;按照页面提示在域名解析中将CNAME和记录值配置好。 比如我用的阿里云&#xff0c; 这是好后&#xff0c;需要等几分钟&#xff0c;然后域名检验成功。 然后点击joyssl的左侧菜单的“证…

【新书上市】图像画质算法与底层视觉技术

图书主页&#xff1a;https://book.douban.com/subject/36895899/ 购买链接&#xff1a;https://item.jd.com/10105601481762.html 内容介绍 本书主要介绍了图像画质相关的各类底层视觉任务及其相关算法&#xff0c;重点讲解了去噪、超分辨率、去雾、高动态范围、图像合成与图…

conflicting types for 错误问题

操作系统真象还原中&#xff0c;第十一章出现的问题&#xff1a; 怎样编译都会出现一个conflicting types for ’xxx‘的错误 出现这个错误的原因&#xff1a; 头文件声明和定义参数稍有不同 头文件中声明 void Hanlder(const char * buf); 在定义时写作 void Hanlder(char…

双指针法 ( 三数之和 )

题目 &#xff1a;给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三元组。 注意&#xff1a;答案中不可以包含重复…

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

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

Amazon云计算AWS(一)

目录 一、基础存储架构Dynamo&#xff08;一&#xff09;Dynamo概况&#xff08;二&#xff09;Dynamo架构的主要技术 二、弹性计算云EC2&#xff08;一&#xff09;EC2的基本架构&#xff08;二&#xff09;EC2的关键技术&#xff08;三&#xff09;EC2的安全及容错机制 提供的…

NXP i.MX8系列平台开发讲解 - 3.14 Linux 之Power Supply子系统(二)

专栏文章目录传送门&#xff1a;返回专栏目录 Hi, 我是你们的老朋友&#xff0c;主要专注于嵌入式软件开发&#xff0c;有兴趣不要忘记点击关注【码思途远】 目录 1. 前言 2. 芯片简介 2. 系统原理设计 2. 设备树相关 本文实操是基于Android11 系统下i.MX8MQ环境下&#x…