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

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

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • 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="con">
		<div class="banner">
			<img src="./images/banner.jpeg" alt="">
		</div>
		
		<ul class="nav">
			<li><a href="index.html">首页</a></li>
			<li><a href="chuanshuo.html">典故传说</a></li>
			<li><a href="yiyi.html">历史意义</a></li>
			<li><a href="liwu.html">常送礼物</a></li>
			<li><a href="liuyan.html">在线留言</a></li>
		</ul>
		
		
		<div class="box">
			<div class="box-l">
				<img src="./images/i1.jpg" alt="">
			</div>
			<div class="box-r">
				<h2>母亲节</h2>
				<p>母亲节(Mother's Day),是一个感谢母亲的节日。现代的母亲节起源于美国,是每年5月的第二个星期日。母亲们在这一天通常会收到礼物,康乃馨被视为献给母亲的花,而中国的母亲花是萱草花,又叫忘忧草。</p>
			</div>
		</div>
		<div class="box">
			<div class="box-r">
				<h2>节日起源</h2>
				<p>母亲节起源于希腊,古希腊人在这一天向希腊神话中的众神之母赫拉致敬。在17世纪中叶,母亲节流传到英国,英国人把封斋期的第四个星期天作为母亲节。在这一天里,出门在外的儿女们将回到家中,给他们的母亲带上一些小礼物。</p>
			</div>
			<div class="box-l">
				<img src="./images/i2.jpg" alt="">
			</div>
		</div>
		
		<div class="box2">
			<h2>母亲节图片</h2>
			<div class="tus">
				<img src="./images/t1.jpeg" alt="">
				<img src="./images/t2.jpeg" alt="">
				<img src="./images/t3.jpeg" alt="">
			</div>
		</div>
		
		<div class="footer">
			母亲节 ©版权所有
		</div>
	</div>
</body>
</html>

五、源码获取

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

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

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

相关文章

2024年3月电子学会青少年软件编程 中小学生Python编程等级考试二级真题解析(判断题)

2024年3月Python编程等级考试二级真题解析 判断题&#xff08;共10题&#xff0c;每题2分&#xff0c;共20分&#xff09; 26、元组中的元素可以是不同的数据类型 答案&#xff1a;对 考点分析&#xff1a;考查元元组相关知识&#xff0c;元组里面的元素是可以出现不同的数据…

流程设计的基本步骤

背景 公司为什么要流程&#xff0c;已经有专门章节进行阐述&#xff1b; 什么是流程&#xff0c;已经有专门章节进行专门阐述&#xff1b; 那么接下来这个章节讨论&#xff0c;流程设计的基本步骤&#xff0c;那么谁来设计流程呢&#xff0c;让一个部门的员工来设计一份流程…

30字以内免费翻译维吾尔语,汉维翻译工具推荐,维吾尔文字母OCR识别神器《维汉翻译通》App!

维吾尔文OCR文字识别 《维汉翻译通》App内置的OCR技术&#xff0c;能够快速识别图片中的文字和字母&#xff0c;无论是路标、菜单还是书籍&#xff0c;都能迅速转换为用户所需的语言&#xff0c;让语言障碍不再是问题。针对维吾尔语更是进行了专门的优化&#xff0c;即便是手写…

vue3+electron搭建桌面软件

vue3electron开发桌面软件 最近有个小项目, 客户希望像打开 网易云音乐 那么简单的运行起来系统. 前端用 Vue 会比较快一些, 因此决定使用 electron 结合 Vue3 的方式来完成该项目. 然而, 在实施过程中发现没有完整的博客能够记录从创建到打包的流程, 摸索一番之后, 随即梳理…

Android 14 系统启动流程 之 启动init进程、启动Zygote进程

Android 14 系统启动流程 之 启动init进程、启动Zygote进程 废话不多说&#xff0c;先上图&#xff0c;不清楚的可以在评论区留言。

C#下WinForm多语种切换

这是应一个网友要求写的&#xff0c;希望对你有所帮助。本文将介绍如何在一个WinForm应用程序中实现多语种切换。通过一个简单的示例&#xff0c;你将了解到如何使用资源文件管理不同语言的文本&#xff0c;并通过用户界面实现语言切换。 创建WinForm项目 打开Visual Studio&a…

ACL原理和基础配置

ACL&#xff08;Access Control List&#xff0c;访问控制列表&#xff09;是一种用于控制网络设备或操作系统上资源访问权限的方法。ACL能够基于规则和条件来允许或拒绝对资源的访问。 标准ACL&#xff08;Standard ACL&#xff09;&#xff1a;基于源IP地址来进行流量过滤&a…

实现一个vue js小算法 选择不同的时间段 不交叉

以上图片选择了时间段 现在需要判断 当前选择的时间段 不能够是 有交叉的所以现在需要循环判断 //判断时间段是否重叠交叉 export function areIntervalsNonOverlapping(intervals:any) {// 辅助函数&#xff1a;将时间字符串转换为从当天午夜开始计算的分钟数function conver…

视频格式转换avi格式怎么弄?分享视频转换方法

视频格式转换avi格式怎么弄&#xff1f;AVI作为一种广泛支持的视频格式&#xff0c;能够在多种设备和播放器上顺畅播放&#xff0c;确保我们的视频内容能够无障碍地分享给朋友或上传至各大平台。其次&#xff0c;AVI格式通常具有较好的兼容性&#xff0c;能够避免格式转换过程中…

Coursera耶鲁大学金融课程:Financial Markets 笔记Week 01

Financial Markets 本文是学习 https://www.coursera.org/learn/financial-markets-global这门课的学习笔记 这门课的老师是耶鲁大学的Robert Shiller https://en.wikipedia.org/wiki/Robert_J._Shiller Robert James Shiller (born March 29, 1946)[4] is an American econ…

React+TS前台项目实战(七)-- 全局常用组件Select封装

文章目录 前言Select组件1. 功能分析2. 代码详细注释说明3. 使用方式4. 效果展示&#xff08;1&#xff09;鼠标移入效果&#xff08;2&#xff09;下拉框打开效果&#xff08;3&#xff09;回调输出 总结 前言 今天这篇主要讲全局select组件封装&#xff0c;可根据UI设计师要…

力扣148. 排序链表

给你链表的头结点 head &#xff0c;请将其按 升序 排列并返回 排序后的链表 。 示例 1&#xff1a; 输入&#xff1a;head [4,2,1,3] 输出&#xff1a;[1,2,3,4] 示例 2&#xff1a; 输入&#xff1a;head [-1,5,3,4,0] 输出&#xff1a;[-1,0,3,4,5] 示例 3&…

谷粒商城实战(036 k8s集群学习2-集群的安装)

Java项目《谷粒商城》架构师级Java项目实战&#xff0c;对标阿里P6-P7&#xff0c;全网最强 总时长 104:45:00 共408P 此文章包含第343p-第p345的内容 k8s 集群安装 kubectl --》命令行操作 要进入服务器 而且对一些不懂代码的产品经理和运维人员不太友好 所以我们使用可视化…

私域引流宝PHP源码 以及搭建教程

私域引流宝PHP源码 以及搭建教程

怎么防止源代码泄露?9种方法教会你!

怎么防止源代码泄露&#xff1f;首先要了解员工可以通过哪些方式将源代码传输出去&#xff01; 物理方法&#xff1a; — 网线直连&#xff0c;即把网线从墙上插头拔下来&#xff0c;然后和一个非受控电脑直连; — winPE启动&#xff0c;通过光盘或U盘的winPE启动&#xff0c;甚…

夏日炎炎 水域守护:北斗守护安全防线——为生命撑起智能保护伞

随着夏季的来临&#xff0c;炎热的天气让许多人纷纷寻求水的清凉。清凉的河流与广阔的海域成为了不少人消暑降温的向往之地。然而&#xff0c;私自下河、下海的行为却暗藏着巨大的安全隐患&#xff0c;每年夏季溺水事故频发&#xff0c;给无数家庭带来不可挽回的悲痛。为有效遏…

高考志愿填报,如何分析自己的优势特长?

据不完全统计&#xff0c;80%的高三学生&#xff0c;不清楚自己要报什么专业&#xff0c;以及将来从事哪种职业&#xff1f;有的人则是完全听从父母的安排&#xff0c;有人听老师的建议&#xff0c;有人追热门&#xff0c;有人查什么专业可以拿高薪.... 而现实就是&#xff1a…

构建汛期智慧水利新生态:EasyCVR视频汇聚监控综合管理方案解析

一、项目背景与目标 随着我国水利事业的不断发展&#xff0c;水利设施的管理与维护工作愈发重要。随着夏季汛期的到来&#xff0c;水利管理工作面临着巨大的挑战。为确保水利设施的安全运行&#xff0c;及时应对可能出现的汛情&#xff0c;建设一套高效、智能的视频监控可视化…

k8s之kubelet证书时间过期升级

1.查看当前证书时间 # kubeadm alpha certs renew kubelet Kubeadm experimental sub-commands kubeadm是一个用于引导Kubernetes集群的工具&#xff0c;它提供了许多命令和子命令来管理集群的一生周期。过去&#xff0c;某些功能被标记为实验性的&#xff0c;并通过kubeadm a…

【电子信息工程专业课】学习记录

数字信号处理 离散时间信号与系统 周期延拓 一个连续时间信号经过理想采样后&#xff0c;其频谱将沿着频率轴以采样频率Ωs 2π / T 为间隔而重复。 混频 各周期的延拓分量产生频谱交替的现象 奈奎斯特采样定理 fs > 2fh Z变换 收敛域&#xff1a;使任意给定序列x(n)的Z变…