HTML静态网页成品作业(HTML+CSS)——游戏阴阳师介绍网页(4个页面)

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

文章目录

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


一、作品介绍

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

二、作品演示

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

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>阴阳师</title>
	<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
	<div class="wrapper">
		<!-- 头部 -->
		<div class="header">
			
			<div class="logo">
				<img src="./images/logo.jpeg">
			</div>
			<div class="nav">
				<a href="index.html" class="active">游戏首页</a>
				<a href="tupian.html" >精彩图片</a>
				<a href="pingjia.html" >游戏评价</a>
				<a href="login.html">我要登录</a>
			</div>
		</div>

		<div class="banner">
			<img src="./images/banner.jpg">
		</div>
		<div class="main">
			
			<h2>游戏背景</h2>
			<p>
				故事发生在人鬼共生的年代,原本属于阴界的魑魅魍魉,潜藏在人类的恐慌中伺机而动,阳界的秩序岌岌可危。幸而世间有着一群懂得观星测位、画符念咒,还可以跨越阴阳两界,甚至支配灵体的异能者,他们正各尽所能,为了维护阴阳两界的平衡赌上性命战斗并被世人尊称为“阴阳师”  。
			</p>
			<h2>游戏角色</h2>
			<table border="1" >
				<tr>
					<td><img src="./images/1.png"></td>
					<td>
						<h4>晴明</h4>
						<p>
							平安时代强大的阴阳师,性格冷峻飘逸。拥有忠诚的守护式神——小白,并先后认识了神乐、源博雅和八百比丘尼三位伙伴。
						</p>
					</td>
				</tr>
				<tr>
					<td><img src="./images/2.png"></td>
					<td>
						<h4>神乐</h4>
						<p>
							源氏的后代,性格单纯善良,具备通灵能力,被晴明遇到带回庭院。
						</p>
					</td>
				</tr>
				<tr>
					<td><img src="./images/3.png"></td>
					<td>
						<h4>源博雅</h4>
						<p>
							平安时代贵族,是皇室之后,同时也是一名武士。性格孤傲爽直,善用大弓,其弓箭具有射杀妖怪之力。从小桀骜不驯,喜欢冒险与挑战。遇到晴明和神乐之后,便经常光顾庭院。
						</p>
					</td>
				</tr>
				<tr>
					<td><img src="./images/4.png"></td>
					<td>
						<h4>八百比丘尼</h4>
						<p>
							误食人鱼肉不老不死,已活了几百年的神秘巫师。占卜到晴明是命中注定可以帮助其解除诅咒之人,便居住在凤凰林中等待晴明,后来便一直留在庭院。
						</p>
					</td>
				</tr>
			</table>
		</div>
		<!-- 底部 -->
		<div class="footer">
			<div>
				阴阳师 版权所有
			</div>
		</div>

	</div>
</body>
</html>


五、源码获取

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

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

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

相关文章

ChatGPT成知名度最高生成式AI产品,使用频率却不高

5月29日&#xff0c;牛津大学、路透社新闻研究所联合发布了一份生成式AI&#xff08;AIGC&#xff09;调查报告。 在今年3月28日—4月30日对美国、英国、法国、日本、丹麦和阿根廷的大约12,217人进行了调查&#xff0c;深度调研他们对生成式AI产品的应用情况。 结果显示&…

真实测评:9款电脑加密软件最新排名

2024年已经过半&#xff0c;电脑加密软件市场发生了很多变化&#xff0c;根据资料汇总&#xff0c;一些电脑加密软件排名也发生了变化&#xff0c;下面是最近的排名。 1、安企神&#xff1a; 可以试试7天的免费试用&#xff0c;用过之后就回不去了 试用版https://work.weix…

总负债20.79亿,银行借款在增加,经营所得现金在减少,累计亏损在增加,易点云披露其风险(四)

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 全文共二十五章&#xff0c;总计6万字。 由于篇幅所限&#xff0c;分为&#xff08;一&#xff09;到&#xff08;五&#xff09;篇发布。 本文为《负债20.79亿,银行借款在增加,经营所得现金在减少,易点云披露风险》&am…

区间预测 | Matlab实现DNN-KDE深度神经网络结合核密度估计多置信区间多变量回归区间预测

区间预测 | Matlab实现DNN-KDE深度神经网络结合核密度估计多置信区间多变量回归区间预测 目录 区间预测 | Matlab实现DNN-KDE深度神经网络结合核密度估计多置信区间多变量回归区间预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现DNN-KDE深度神经网络结合…

Cobaltstrike渗透测试框架

Cobaltstrike简介 cobalt strike&#xff08;简称CS&#xff09;是一款团队作战渗透测试神器&#xff0c;分为客户端及服务端&#xff0c;一个服务端可以对应多个客户 端&#xff0c;一个客户端可以连接多个服务端&#xff0c;可被团队进行分布式协团操作. 和MSF关系 metas…

IEnumerable 、 IEnumerator,yield return

自定义迭代类 》》》using System.Collections; using System.Collections; using System.Runtime.CompilerServices;namespace ConsoleApp1 {// 可迭代对象 标记此类可迭代 继承IEnumerable 类是可以迭代public class SpecificEnumerable : IEnumerable{private readonly …

首搭第五代DM技术,秦L DM-i正式上市,仅售9.98万元起

5月28日&#xff0c;比亚迪王朝重磅新车秦L DM-i在西安震撼上市&#xff0c;首搭第五代DM技术&#xff0c;百公里亏电油耗达到划时代的2.9L&#xff0c;“一箱油”满油满电综合续航达2100公里&#xff0c;引领中级&#xff0c;创下了百公里油耗的历史新低&#xff0c;开创油耗2…

第一讲:单片机STC89C52+RA8889驱动控制彩屏(源码公开)

51单片机驱动控制彩屏系列讲座 第一讲&#xff1a;单片机STC89C52RA8889驱动控制彩屏&#xff08;源码公开&#xff09; 单片机通过SPI与RA8889进行通信&#xff0c;由于单片机是5V&#xff0c;RA8889是3.3V,故需要进行电平转换&#xff0c;有现成的模组TXS0108E等可以采用。…

vue+element-ui时间级联动态表单,新增行,删除行,表单验证

需求背景: 需要实现配置一种时间去执行定时任务,可能是每年一次,每月一次,每周一次,每天一次四种情况,最少配置一条,最多配置五条。年,月,周,日,时分秒是级联关系。点击提交,整体表单校验。 效果图 代码实现,具体看里面的注释 完整代码 <template><e…

如何实现数据的正确拆分?

我们知道在传统的单块架构中&#xff0c;一个系统中只存在一个独立的服务和数据库实例。 上图中的系统架构实现起来比较简单&#xff0c;但是扩展性和伸缩性都比较差。因此&#xff0c;越来越多的系统开始采用了微服务架构。在微服务架构中&#xff0c;一个系统被拆分成多个服务…

数据大屏方案 : 实现数据可视化的关键一环_光点科技

在数字时代的浪潮中&#xff0c;数据已经成为企业决策和操作的重要基础。因此&#xff0c;“数据大屏方案”逐渐成为业界关注的焦点。这类方案通过将复杂的数据集合以直观的形式展现出来&#xff0c;帮助决策者快速把握信息&#xff0c;做出更加明智的决策。 数据大屏的定义及作…

基于异构图的大规模微服务系统性能问题诊断

简介&#xff1a;本文介绍由南开大学、清华大学、腾讯、国家超级计算天津中心共同合作的论文&#xff1a;基于异构图的大规模微服务系统性能问题诊断。该论文已被IEEE Transactions on Services Computing期刊录用 论文标题&#xff1a;Diagnosing Performance Issues for Lar…

有限元之抛物型方程初边值问题解法

目录 一、原方程的变分形式 二、有限元法进行空间半离散 三、差分法进行时间全离散 四、相关量的数值计算 五、编程时的说明 六、算例实现 6.1 C代码 6.2 计算结果 本节我们将采用有限元法联合差分法来数值求解抛物型方程的初边值问题&#xff1a; 其中常数。 一、原方…

达梦数据库安装手册

首先了解达梦数据库相关内容&#xff1a; 达梦在线服务平台 下载windows版本开发版&#xff0c;将下载的文件解压。进行安装 2、安装流程&#xff0c;默认选择下一步。 3、安装引导&#xff0c;默认下一步&#xff0c;安装实例可以进行修改 4、最后一步记录一下创建的摘要 …

六西格玛项目课题决策权归属:谁来做主更明智?

在实施六西格玛的过程中&#xff0c;一个关键的问题摆在了我们面前&#xff1a;应该由谁决定六西格玛的项目课题&#xff1f;这个问题不仅关系到项目能否顺利实施&#xff0c;更直接影响到企业整体绩效的提升。深圳天行健企业管理咨询公司解析如下&#xff1a; 首先&#xff0…

基于Java实现的图书管理系统

前言&#xff1a;该图书管理系统实现了查找、添加、删除、显示、借阅、归还等功能&#xff0c;分为两个用户群体&#xff1a;管理者和普通用户。使用了类与对象&#xff0c;封装继承多态&#xff0c;抽象类和接口等Java基础知识。 一.思路 面向对象三部曲&#xff1a;找对象&…

JavaDS-学习数据结构之如果从零开始手搓顺序表,顺带学习自定义异常怎么用!

前言 笔者开始学习数据结构了,虽然笔者已经会用了,不管是C 中的stl亦或是Java 中的集合,为了算法比赛多少都突击过,但只知其然而不知其所以然,还是会限制发展的,因此,笔者写下这篇博客.内容是手搓一个顺序表.顺带加一点异常的使用,大伙看个乐子就好了.有错误直接私信喷我就好了…

【AI赋能】香橙派OrangePi AIpro初体验

【AI赋能】香橙派OrangePi AIpro初体验 1、初识香橙派1.1、仪式感开箱1.2、OrangePi AIpro(8T)介绍 2、上电开机2.1、开机2.2、串口调试2.2.1 两种方式登录2.2.2 相关信息 2.3、启动系统2.4、网络配置 3、连接摄像头4、目标检测4.1、Jupyter Lab模式4.2、 目标检测测试4.2.1 视…

花钱学谢宁DOE培训,投入产出比到底如何?

在当今这个快速发展的时代&#xff0c;无论是职场人士还是创业者&#xff0c;都渴望通过不断学习来提升自我能力&#xff0c;以便在竞争激烈的市场中脱颖而出。其中&#xff0c;谢宁DOE培训因其独特的理念和方法&#xff0c;吸引了众多求学者的目光。然而&#xff0c;面对不菲的…

多条文本转二维码怎么做?一键批量建码的使用技巧

怎么快速的制作多条文本信息的二维码&#xff1f;随着二维码的广泛使用&#xff0c;现在很多内容都可以通过生成二维码扫码的方式来获取信息&#xff0c;其他文本二维码就是比较常用的一种类型。那么当需要将多条不同的文本内容每条单独生成二维码时&#xff0c;有什么方法可以…