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

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

文章目录


一、作品介绍

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

二、作品演示





三、代码目录

四、网站代码

HTML部分代码

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

相关推荐
苏打水com2 小时前
第十九篇:Day55-57 前端工程化进阶——从“手动低效”到“工程化高效”(对标职场“规模化”需求)
前端·css·vue·html
TE-茶叶蛋3 小时前
html5-qrcode扫码功能
前端·html·html5
2501_906467633 小时前
HTML5结合Vue3实现百万文件分块上传的思路是什么?
前端·html·html5·vue上传解决方案·vue断点续传·vue分片上传下载·vue分块上传下载
kirinlau3 小时前
vue3+vite+scss项目使用tailwindcss
前端·css·scss
阿贾克斯的黎明3 小时前
现代前端的魔法标签:HTML5 语义化标签全解析
前端·html·html5
composurext5 小时前
录音切片上传
前端·javascript·css
我命由我123455 小时前
Python Flask 开发:在 Flask 中返回字符串时,浏览器将其作为 HTML 解析
服务器·开发语言·后端·python·flask·html·学习方法
狮子座的男孩5 小时前
html+css基础:07、css2的复合选择器_伪类选择器(概念、动态伪类、结构伪类(核心)、否定伪类、UI伪类、目标伪类、语言伪类)及伪元素选择器
前端·css·经验分享·html·伪类选择器·伪元素选择器·结构伪类
听风吟丶5 小时前
Spring Boot 自动配置深度解析:原理、实战与源码追踪
前端·bootstrap·html