HTML静态网页成品作业(HTML+CSS)——游戏永劫无间网页(3个页面)

news2024/10/5 22:11:40

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

文章目录

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


一、作品介绍

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

二、作品演示

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

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码

<div id="app" class="wrapper">
			<!-- 头部 -->
			<div class="header">

				<div class="logo">
					<img src="./images/logo.png">
				</div>
				<div class="nav">
					<a href="index.html" class="active">游戏首页</a>
					<a href="tupian.html">精彩图片</a>
					<a href="form.html">问卷表单</a>
				</div>
			</div>

			<div class="banner">
				<img src="./images/banner.jpeg">
			</div>
			<div class="main">

				<h2>游戏背景</h2>
				<p>
					世界本是一团混沌,后来从混沌的中心萌生了一个种子。随着种子的长大,混沌双分,产生了阴阳二气,世界被阴阳二气重构。阴阳二气中孕育了太初时期的两个古神,“阳极真神”金乌和“阴极真神”烛龙。在聚窟洲——世界的中心,原初之种长成了一株连通天地的巨树,名为扶桑,阳神金乌就栖息在它的树冠上,而阴神烛龙则盘踞在巨树的根部。两位古神因为力量本质的不同而不断地交战。每一次的交战都会导致两个古神同归于尽。神战波及下,除被扶桑庇护的聚窟洲外,世界上的所有生命都会灭亡。每次神战后,两个古神消散的肉身也会回归世界,滋养着万物的重生。当阴阳二神再一次的魂魄凝聚、肉身复原后,它们又会重复之前的战争,导致世界一直在永劫之中。
				</p>
				<h2>游戏角色</h2>
				<table border="1">
					<tr>
						<td><img src="./images/1.jpg"></td>
						<td>
							<h4>季沧海</h4>
							<p>
								举杯痛饮,人生尽欢。烈豪这称号的背后,是他洒脱不羁的脾性,也是他遇强则强的豪情。纵然命运之路沉重难行,但他将依旧挥刀向前。
							</p>
						</td>
					</tr>
					<tr>
						<td><img src="./images/2.jpg"></td>
						<td>
							<h4>迦南</h4>
							<p>
								风沙淬炼,让她迅捷如沙漠的黑鹰;古教秘传,又使其虚幻如古城的鬼魅。她是曼妙的刺客,也是权贵的梦魇。
							</p>
						</td>
					</tr>
					<tr>
						<td><img src="./images/3.jpg"></td>
						<td>
							<h4>特木尔</h4>
							<p>
								苍狼的血脉再度长啸之时,草原上的风暴便会肆虐。先祖的传说刻在脑海,伟大的荣光就在眼前。来自草原上的狼,将再度狂奔。
							</p>
						</td>
					</tr>
					<tr>
						<td><img src="./images/4.jpg"></td>
						<td>
							<h4>赤练无明·宁红夜</h4>
							<p>
								西出昆仑的盲剑客,美丽危险的赤练蛇。对于宁红夜这样的强者而言,剧毒早已刻入血脉,利刃则永不离身边。而被遮蔽的双眼,将在宿命来临时再次凝视世界。
							</p>
						</td>
					</tr>
					<tr>
						<td><img src="./images/5.jpg"></td>
						<td>
							<h4>土御门胡桃</h4>
							<p>
								日轮之花,天才阴阳师,继承古老传承的大小姐。为了探寻天地秘密,掌握阴阳术的终极,胡桃离家出走,踏上了她新的旅程。
							</p>
						</td>
					</tr>
				</table>
			</div>
			<!-- 底部 -->
			<div class="footer">
				<div>
					永劫无间 版权所有
				</div>
			</div>
		</div>


五、源码获取

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

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

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

相关文章

初见 Rollup 的十大常见问题

文章目录 初见 Rollup 的十大常见问题1. 超神奇的 Rollup 英文解释&#xff01;2. 为什么 ESM 要比 CommonJS 要好呢&#xff1f;3. 什么是 tree-shaking ?4. 如何使用 Rollup 处理 CommonJS&#xff1f;5. 为什么 node-resolve 不是一个内置功能&#xff1f;6. 为什么在进行代…

网络协议,OSI,简单通信,IP和mac地址

认识协议 1.讲故事 2004年&#xff0c;小明因为给他爹打电话&#xff08;座机&#xff09;费用太贵&#xff0c;所以约定一种信号&#xff0c;响一次是报平安&#xff0c;响两次是要钱&#xff0c;响三次才需要接通。 2.概念 协议&#xff1a;是一种约定&#xff0c;这种约…

如何实现电脑监视员工的电脑屏幕?六个方法偷偷分享给你

实现电脑监视员工的电脑屏幕&#xff0c;通常需要借助专业的监控软件或系统&#xff0c;这些工具旨在帮助企业管理者监督员工的工作状态&#xff0c;确保工作效率&#xff0c;同时保护公司资产和数据安全。以下是几种常见的实现方式。 1. 使用专业的远程监控软件 安企神软件&a…

kaggle竞赛实战10——特征优化

特征优化思路&#xff1a; 在完成常规流程后&#xff0c;如果不知道怎么办&#xff0c;可以针对文本or时间序列特征进行进一步处理 首先&#xff0c;我们注意到&#xff0c;每一笔信用卡的交易记录都有交易时间&#xff0c;而对于时间字段和文本字段&#xff0c;普通的批量创…

解决用Three.js实现嘴型和语音同步时只能播放部分部位的问题 Three.js同时渲染播放多个组件变形动画的方法

前言 参考这篇文章ThreeJSChatGPT 实现前端3D数字人AI互动&#xff0c;前面搭后端、训练模型组内小伙伴都没有什么问题&#xff0c;到前端的时候&#xff0c;脸部就出问题了。看我是怎么解决的。 好文章啊&#xff0c;可惜百度前几个都找不到&#xff0c;o(╥﹏╥)o 问题情况 …

【C++】环境搭建及基本工作流程

C 当你需要写性能良好的代码时&#xff0c;C仍是不二选择 如果你想访问硬件、如果你想对硬件进行控制&#xff0c;C仍是首选。 所有的游戏引擎都是用C编写的&#xff0c;因为C可以直接控制硬件。 原理&#xff1a; C代码-->编译器编译comple-->目标平台的机器码-->放…

[算法刷题—二分法]寻找插入位置

题目展示: 本道题本身并不是很难,主要是学习和分析二分查找插入位置的方法。 首先大体上分为两种情况: 一.target在待查找的数组之中,返回对应值的下标索引。 二.target不在待查找的数组之中&#xff0c;需要返回target插入位置的索引(原数组有序) 第一种情况不难&#xff…

视图-什么是(VIEW)?怎么创建(CREATE VIEW)?怎么删除(DROP)?怎么用(SELECT/INSERT/UPDATE/DELETE)?

一、引言 之前对数据库的操作都是针对基本关系表&#xff0c;操作都是在数据库的全局逻辑模式上进行的&#xff0c;而在实际的数据库系统中&#xff0c;可能用户只关心或只被允许使用数据库中的某些基本关系表或基本关系表中的某些属性列&#xff0c;这些数据构成了数据库的外…

基于SVD的点云配准(下)

点云配准及特征提取详细解读 本篇博客将介绍一个用于点云配准的 C++ 代码示例,该示例使用 PCL(Point Cloud Library)库来处理和配准两个点云数据集。我们将逐步解析代码的关键部分,并解释每个步骤的作用。 代码说明 代码的整体结构及其主要功能: int main(int argc, ch…

Vue 状态管理:从Vuex到Pinia,Vue 3官方推荐的状态管理库深度解析

大家好&#xff0c;我是前端宝哥。 在编程界有句老话&#xff1a;“命名和缓存失效是世上两大难题。” 我得说&#xff0c;在现代Web应用的状态管理上&#xff0c;这难题得排第三&#xff01; 今天&#xff0c;咱们来深挖一下Vue的状态管理之道&#xff0c;并介绍一个超直观的解…

汽车IVI中控开发入门及进阶(二十八):视频SERDES芯片

前言: SerDes不是很常见,SerDes是将Ser和Des两种产品组合在一起的名称。Ser是Serializer或“并串转换器”的缩写,Des是Deserializer或“串并转换器”的简写。 Serdes是不是必须的?上一节介绍了camera,上上节也研究了video decoder,那么带摄像头的应用应该具体选哪个方案…

从踢足球到数字孪生

前言 贵州“村超”的火热现象是一个多方面因素共同作用的结果,它不仅是一场体育赛事,更是一个文化现象,反映了时代的精神和人民的情感诉求,同时也推动了乡村振兴和地区发展。足球的魅力是多方面的,它不仅仅是一项运动,更是一种全球性的文化现象。 简单规则下的无限变化:…

MySQL数据操作与查询- select 数据查询

一、select 选择列表 1、select基本结构 select 字段列表 from 表名 where 条件表达式 说明&#xff1a; &#xff08;1&#xff09; 必须的子句只有 select 子句和 from 子句。 &#xff08;2&#xff09;where 子句用于对查询结果进行过滤。 2、选择&#xff08;查询&am…

【会议征稿,IEEE出版】第六届物联网、自动化和人工智能国际学术会议(IoTAAI 2024,7月26-28)

第六届物联网、自动化和人工智能国际会议&#xff08;IoTAAI 2024&#xff09;将于2024年07月26-28日在中国广州召开。 会议旨在拓展国际科技学术交流渠道&#xff0c;搭建学术资源共享平台&#xff0c;促进全球范围内的科技创新&#xff0c;提升中外学术合作。会议还鼓励不同领…

再谈软件设计中的抽象思维(下),从FizzBuzz到规则引擎

作为《程序员的底层思维》出版两年之后的再回顾&#xff0c;在上一篇《再谈软件设计中的抽象思维&#xff08;上&#xff09;&#xff0c;从封装变化开始》中&#xff0c;我介绍了抽象设计的本质是发现变化点&#xff0c;结合问题域&#xff0c;提炼共性&#xff0c;沉淀领域知…

Golang | Leetcode Golang题解之第151题反转字符串中的单词

题目&#xff1a; 题解&#xff1a; import ("fmt" )func reverseWords(s string) string {//1.使用双指针删除冗余的空格slowIndex, fastIndex : 0, 0b : []byte(s)//删除头部冗余空格for len(b) > 0 && fastIndex < len(b) && b[fastIndex]…

建造者模式(大话设计模式)C/C++版本

建造者模式 C 参考&#xff1a;https://www.cnblogs.com/Galesaur-wcy/p/15907863.html #include <iostream> #include <vector> #include <algorithm> #include <string> using namespace std;// Product Class&#xff0c;产品类&#xff0c;由多个…

【Java】Object类中的toString、equals方法

Object类 所有类都直接或间接的继承自Object类&#xff0c;Object类是所有Java类的根基类。 也就意味着所有的Java对象都拥有Object类的属性和方法。 如果在类的声明中未使用extends关键字指明其父类&#xff0c;则默认继承Object类。 toString()方法 【1】Object类的toStr…

植物大战僵尸杂交版 v2.0.88 mac版 Plants vs. Zombies 杂交版下载

特别注意&#xff1a;该游戏最低系统要求为macOS Sonoma 14.X&#xff0c;低于此系统版本的请勿下载&#xff01; 游戏介绍 植物大战僵尸杂交版是由B站UP主“潜艇伟伟迷”制作的一款结合了《植物大战僵尸》原有元素与创新玩法的游戏。这款游戏以其独特的“杂交”植物概念在B站…

【TypeScript】泛型工具

跟着 小满zs 学 ts&#xff1a;学习TypeScript24&#xff08;TS进阶用法-泛型工具&#xff09;_ts泛型工具-CSDN博客 Partial 所有属性可选的意思Required 所有属性必选的意思Pick 提取部分属性Exclude 排除部分属性emit 排除部分属性并且返回新的类型 Partial 属性变为可选。…