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

news2024/11/26 17:26:49

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

文章目录

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

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

相关文章

【Android】使用EventBus进行线程间通讯

EventBus 简介 EventBus&#xff1a;github EventBus是Android和Java的发布/订阅事件总线。 简化组件之间的通信 解耦事件发送者和接收者 在 Activities, Fragments, background threads中表现良好 避免复杂且容易出错的依赖关系和生命周期问题 Publisher使用post发出…

界面控件Telerik UI for WPF中文教程 - 用RadSvgImage升级应用程序UI

Telerik UI for WPF拥有超过100个控件来创建美观、高性能的桌面应用程序&#xff0c;同时还能快速构建企业级办公WPF应用程序。UI for WPF支持MVVM、触摸等&#xff0c;创建的应用程序可靠且结构良好&#xff0c;非常容易维护&#xff0c;其直观的API将无缝地集成Visual Studio…

IIS漏洞

IIS7.5解析漏洞 安装IIS7.5 安装完成之后直接访问浏览器&#xff1a; 安装phpstudy for IIS 安装这个的目的是方便&#xff0c;不用自己去配置 解压开傻瓜式安装即可。然后查看探针&#xff1a; 漏洞原理 IIS7/7.5在Fast-CGI运行模式下,在一个文件路径(/shell.jpg)后面加上/…

Linux日志服务rsyslog深度解析(上)

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《Linux &#xff1a;从菜鸟到飞鸟的逆袭》&#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、日志在Linux系统中的作用 2、rsyslog历史背景 …

postgresql常用命令#postgresql认证

PostgreSQL 是一个功能强大的开源关系数据库管理系统&#xff0c;提供了一系列命令行工具来管理和操作数据库。以下是一些常用的 PostgreSQL 命令&#xff0c;涵盖数据库和用户管理、数据操作以及查询和维护等方面。 #PostgreSQL培训 #postgresql认证 #postgreSQL考试 #PG考试…

微信小程序多端框架打包后发布到APP Store

IPA 上架 App Store 生成 iOS 证书和 Provisioning Profile iOS 开发者账号缴/续费的发票查看和获取 个人开发者把小程序发布到 App Store 5个步骤&#xff08;保姆级教程&#xff09; 一、参数的设置、证书的生成、生成profile文件 微信小程序多端应用Donut IOS相关的参数…

基于springboot实现农产品直卖平台系统项目【项目源码+论文说明】

基于springboot实现农产品直卖平台系统的设计演示 摘要 计算机网络发展到现在已经好几十年了&#xff0c;在理论上面已经有了很丰富的基础&#xff0c;并且在现实生活中也到处都在使用&#xff0c;可以说&#xff0c;经过几十年的发展&#xff0c;互联网技术已经把地域信息的隔…

C语言 RTC时间(年月日时分秒) 和 时间戳 互相转换

一、介绍 在C语言中&#xff0c;将年月日时分秒转换为时间戳&#xff08;Unix时间戳&#xff0c;即从1970年1月1日00:00:00 UTC到现在的秒数&#xff09;通常需要使用struct tm结构体和timegm或mktime函数。&#xff08;注意&#xff0c;mktime函数假设struct tm是本地时间&…

【会议征稿,SPIE独立出版】第三届智能机械与人机交互技术学术会议(IHCIT 2024,7月5-7)

由北京航空航天大学指导&#xff0c;北京航空航天大学自动化科学与电气工程学院主办&#xff0c;AEIC学术交流中心承办的第三届智能机械与人机交互技术学术会议&#xff08;IHCIT 2024&#xff09;将定于2024年7月5-7日于中国杭州召开。 大会面向基础与前沿、学科与产业&#x…

传输协议TCP-原理部分

传输控制协议TCP&#xff08;Transmission Control Protocol&#xff09;一种基于连接的可靠的稳定的无重复的传输协议。 1、TCP头部信息 TCP协议头部信息如下&#xff1a; 一共占用20个字节 16位源端口号&#xff1a;发送进程的主机端口16位目的端口号&#xff1a;接收主机…

ComfyUI 完全入门:AI抠图/去除背景/更换图片背景/更换视频背景

本文继续给大家分享ComfyUI的基本使用技巧&#xff1a;抠图&#xff0c;或者说去除背景。抠图是处理图片的一项常见工作&#xff0c;是设计师们的基本能力&#xff0c;现在有了AI&#xff0c;抠图的效率也得到了极大的提升。最近看到有小伙伴通过AI抠图赚了外国人1000美刀&…

中职电子应用技术专业教学解决方案

前言 在21世纪的信息时代&#xff0c;电子技术作为科技进步的基石&#xff0c;其重要性不言而喻。随着产业的快速发展&#xff0c;对中职电子应用技术专业人才的需求日益增长&#xff0c;不仅要求学生掌握扎实的专业技能&#xff0c;还强调其实践能力与创新能力的培养。为应对这…

Spring-Security(一)-源码分析及认证流程

Spring Security & Oauth2系列&#xff1a; Spring Security&#xff08;一&#xff09; 源码分析及认证流程 Spring Security&#xff08;二&#xff09;OAuth2认证详解及自定义异常处理 文章目录 1、Spring Security 概述1.1 Spring Security项目核心模块 1.2 Spring S…

小猪APP分发:高效的APP托管服务分发平台

有没有遇到过这样的尴尬&#xff1f;辛辛苦苦开发了一个APP&#xff0c;却在托管和分发环节卡壳。想想看&#xff0c;花了那么多时间精力开发的APP&#xff0c;却因为分发不顺利而影响用户体验&#xff0c;实在是让人抓狂。而小猪APP分发就成了你最好的选择。 APP封装分发www.…

LabVIEW如何确保步进电机的长期稳定运行

步进电机因其良好的定位精度和控制性&#xff0c;在自动化设备中得到了广泛应用。然而&#xff0c;长期稳定运行对于任何电机系统都是一个重要的挑战。LabVIEW作为一款强大的图形化编程语言&#xff0c;通过其灵活的控制算法和实时监控能力&#xff0c;为步进电机的稳定运行提供…

探索Adobe XD:高效UI设计软件的中文入门教程

在这个数字化世界里&#xff0c;创意设计不仅是为了吸引观众的注意&#xff0c;也是用户体验的核心部分。强大的设计工具可以帮助设计师创造出明亮的视觉效果&#xff0c;从而提高用户体验。 一、Adobe XD是什么&#xff1f; Adobe XD是一家知名软件公司 Adobe Systems 用户体…

数据加密验签机的工作原理

数据加密验签机&#xff0c;作为网络安全领域的关键设备&#xff0c;其重要性不言而喻。以下是对数据加密验签机的详细介绍&#xff1a; 一、引言 在数字化时代&#xff0c;数据的机密性、完整性和真实性是企业和个人都极为关注的问题。数据加密验签机&#xff0c;正是为了解决…

17.1 命令行-输入与输出、命令行参数、命令行标志

1. 输入与输出 命令行程序被设计为在终端运行。在图形用户界面(GUI)问世以前的年代&#xff0c;命令行程序是与计算机交互的唯一方式。 即便是在图形用户界面大行其道的当今&#xff0c;对程序员和系统管理员来说&#xff0c;命令行程序依然是一种流行而实用的与底层操作系统…

Amazon云计算AWS(二)

目录 三、简单存储服务S3&#xff08;一&#xff09;S3的基本概念和操作&#xff08;二&#xff09;S3的数据一致性模型&#xff08;三&#xff09;S3的安全措施 四、非关系型数据库服务SimpleDB和DynamoDB&#xff08;一&#xff09;非关系型数据库与传统关系数据库的比较&…

【WPF编程宝典】第8讲:形状、画刷和变换

本讲介绍了WPF中的基本形状&#xff0c;包括矩形、椭圆形、直线、折线、多边形、点划线等。还介绍四类画刷的使用。介绍了形状的旋转及移动等变化&#xff0c;元素的旋转及移动等。最后介绍了透明。 1.形状 WPF支持的形状有&#xff1a;Rectangle&#xff0c;Ellipse&#xff…