Web大学生网页作业成品——哈利波特霍格沃茨魔法学院设计与实现(HTML+CSS)（3个页面）

爱码网页成品

于 2025-04-20 14:04:12 发布

阅读量287

点赞数 3

分类专栏： HTML网页成品学生网页静态网页成品文章标签：前端 html css

本文链接：https://blog.csdn.net/yxhxhxbxvbchsw/article/details/147365007

版权

HTML网页成品同时被 3 个专栏收录

181 篇文章

订阅专栏

学生网页

181 篇文章

订阅专栏

静态网页成品

181 篇文章

订阅专栏

🎉🎉🎉 常见网页设计作业题材有**汽车、环保、明星、文化、国家、抗疫、景点、人物、体育、植物、公益、图书、节日、游戏、商城、旅游、家乡、学校、电影、动漫、非遗、动物、个人、企业、美食、婚纱、其他**等网页设计题目, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。🎉🎉🎉

一、作品介绍 🔥

🏷️本套采用HTML+CSS，未使用Javacsript代码，共有3个页面。

二、作品演示 ☁️

在这里插入图片描述

三、代码目录 🏠

在这里插入图片描述

四、网站代码 👿

HTML部分代码


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./css/style.css">
	</head>
	<body>
		<div class="wrapper">
			<div class="header">
				<a href="index.html">
					<img src="./images/logo.png" alt="">
					<span>霍格沃茨魔法学院</span>
				</a>
				<ul>
					<li class="active"><a href="">首页</a></li>
					<li><a href="huanjing.html">校园环境</a></li>
					<li><a href="xueyuan.html">四大学院</a></li>
				</ul>
			</div>
			
			<div class="banner">
				<img src="./images/banner.jpeg" alt="">
			</div>

			<div class="main">
				<h2 class="title">学院简介</h2>
				<p>
					<img src="./images/1.jpeg" alt="" class="frimg1">
					霍格沃茨魔法学院（Hogwarts School of Witchcraft and
					Wizardry），简称“霍格沃茨”（Hogwarts），位于苏格兰高地，是J.K.罗琳所著的魔幻小说《哈利·波特》《神奇动物在哪里》等及其衍生相关作品中的公立魔法学校。它接受来自英国和爱尔兰的魔法学生入学，由魔法部资助。
				</p>
				<p>
					霍格沃茨学院是公元990年左右创办的。被认为是魔法世界中最好的魔法机构之一，尽管还有其他著名的魔法学校：例如布斯巴顿魔法学校和德姆斯特朗魔法学校。创办者是当时最伟大的四位巫师：戈德里克·格兰芬多、萨拉查·斯莱特林、罗伊纳·拉文克劳、赫尔加·赫奇帕奇。学校的四个学院就是以他们的名字命名的。四个学院皆有其代表颜色与动物。
					在每学年的开学宴会之前，一年级新生都会轮流上台戴上分院帽进行分院，分院帽会根据你的性格和品质来判断你该属于哪一个学院。
				</p>
				<p>
					具有魔法能力的孩子在出生时就会被考虑录取，并在十一岁时通过猫头鹰收到由霍格沃茨寄来的录取通知书。然而，如果这个孩子是麻瓜出身或像哈利波特这样对魔法世界一无所知的混血儿，学校的工作人员会拜访孩子和家人，告诉他们魔法世界的遗产和存在。学校的确切位置永远无法被发现，因为它被渲染为不可标绘。在麻瓜们看来，这所学校就像是一座废弃的古老城堡。同样，大多数魔法学校的地点都被保护起来，以防止他们的教学方式被泄露，同时也保护学生和学校本身不受任何伤害。
				</p>
				<h2 class="title">学院创始人</h2>
				<div class="main_img1">
					<img src="./images/2.jpg" alt="">
				</div>
			</div>
			
			<div class="footer">
				欢迎来到霍格沃茨魔法学院
			</div>
		</div>
	</body>
</html>