HTML静态网页成品作业(HTML+CSS+JS)——和平精英介绍设计制作(4个页面)

news2025/6/18 15:19:04

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

文章目录

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


一、作品介绍

🏷️本套采用HTML+CSS,使用Javacsript代码实现图片轮播,共有4个页面

二、作品演示

在这里插入图片描述

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

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码


<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	<link rel="stylesheet" href="./style.css">
</head>
<body>
	<style>
	</style>
	<div id="wrapper">
		<header>和平精英</header>
		<nav>
			<a href="index.html">
				<span class="a1">游戏首页</span>
			</a>
			<a href="page1.html">
				<span class="a1">角色设定</span></a>
			<a href="page2.html">
				<span class="a1">游戏图集</span></a>
			<a href="page3.html">
				<span class="a1">游戏视频</span></a>
		</nav>
		<section class="banner">
			<img data-index="1" src="./image/banner1.jpeg" class="active" alt="">
			<img data-index="2" src="./image/banner2.jpg" alt="">
			<img data-index="3" src="./image/banner3.jpg" alt="">
		</section>
		
		
		<main>
			<dl id="yxjj" class="box">
				<dt>游戏简介</dt>
				<dd>
					<img src="./image/yxjj.png" style="float: right;margin-left: 10px;" alt="" width="400">
					<p>和平精英是一款由腾讯光子工作室群自研打造的反恐军事竞赛体验手游。游戏中,玩家可以在不同的拟真场景里,通过完成搜集侦查、组队合作、战术分工、掩护救援等,在百人军事竞技中获得最后的胜利。</p>
					<p>游戏和平精英是一款射击类的游戏,在这款游戏当中可以体验杀敌人的快感,通过击杀敌人最后取得胜利,就可以得到很高的分数,得到的分数可以用来提升段位,分数越高段位越高,并且上升段位也会获得游戏当中相应的奖励,人物在到达战场以后是不携带任何东西的,需要在战场当中寻找并获取自己需要的物资,然后用自己获得的物资去攻击对方。</p>
					<p>在进入游戏以后,首先需要设置形象和名字,设置完以后就可以选择自己喜欢的模式进入,进入模式,在等待飞机期间,可以打开下方的地图选项,然后在地图当中标记出自己想到达的地点,能在飞机飞行的时候就可以沿着航线到达想去的地点,到达战场以后一定要快速的找到建筑物,因为只有建筑物里面才有相应的物资,在搜索物资的过程中,一定要注意这边情况,一旦遇到敌人立即击毙敌人。</p>
				</dd>
			</dl>
			<div class="line"></div>
			<dl id="yxpj" class="box">
				<dt>游戏评价</dt>
				<dd>
					<p>《和平精英》作为光子工作室群潜心研发的游戏,制作团队发挥在射击、战术竞技等游戏品类中积累的技术经验,为玩家构建了一个百人同场竞技的游戏世界。游戏十分注重玩家的沉浸式体验,游戏在道具方面也进行逼真的模拟设计。</p>
					<p>《和平精英》不仅搭载虚幻引擎4研发,也充分优化了游戏基础性能,最终呈现出完美游戏画质。多张超大实景地图,将玩家引入拟真竞技训练场。与此同时,《和平精英》还使用了真实的3D音效,同时支持游戏内高保真实时语音。无论是游戏内的细节渲染,还是流畅的画面切换。</p>
					<img src="./image/yxpj.jpeg" width="100%" alt="">
				</dd>
			</dl>
		</main>
	</div>
	<script src="./js/script.js"></script>
</body>
</html>

五、源码获取

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

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

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

相关文章

基于机器学习的网络入侵检测与特征选择及随机森林分类器性能评估(NSL-KDD数据集)

简介 本文将详细介绍如何利用Python和相关机器学习库对NSL-KDD数据集进行预处理&#xff0c;特征选择&#xff0c;并通过随机森林算法构建网络入侵检测模型。同时&#xff0c;还将展示如何计算并可视化模型的ROC曲线以评估其性能。 首先&#xff0c;我们导入了必要的库&#…

【机器学习】在Python中进行K-Means聚类和层次聚类

Python中聚类算法API的使用指南 聚类分析是数据分析中一种常见的无监督学习方法&#xff0c;通过将相似的对象分组在一起&#xff0c;我们能够识别出数据集中的自然分群。本文将介绍如何使用Python中的聚类算法接口&#xff0c;KMeans和层次聚类方法。 K-Means 聚类 K-Means…

保姆级讲解字符串函数(上篇)

目录 字符分类函数 导图 函数介绍 1.getchar 2. isupper 和 islower 字符转换函数&#xff1a;&#xff08;toupper , tolower&#xff09; 与 putchar 字符串函数 导图 string函数的使用和模拟实现 string的使用 求字符串长度 字符串的比较 string函数的模拟实现…

苍穹外卖-day01

苍穹外卖-day01 目录 苍穹外卖-day01课程内容1. 软件开发整体介绍1.1 软件开发流程1.2 角色分工1.3 软件环境 2. 苍穹外卖项目介绍2.1 项目介绍2.2 产品原型2.3 技术选型 3. 开发环境搭建3.1 前端环境搭建3.2 后端环境搭建3.2.1 熟悉项目结构3.2.2 Git版本控制3.2.3 数据库环境…

【考研数学】129高分学姐二战经验+资料分享

21年数学三87分 22年数学三129分 可以说这两年该踩的雷我都踩了、该做的题我都做了。 进来看看是什么使我突然醒悟让我数学提分40多分的叭。 李林的880题我也做过&#xff0c;先来说说这本书的优缺点以及适用人群吧。 习题优点 李林老师的880题难度适中&#xff0c;很贴近…

013 Linux_互斥

前言 本文将会向你介绍互斥的概念&#xff0c;如何加锁与解锁&#xff0c;互斥锁的底层原理是什么 线程ID及其地址空间布局 每个线程拥有独立的线程上下文&#xff1a;一个唯一的整数线程ID, 独立的栈和栈指针&#xff0c;程序计数器&#xff0c;通用的寄存器和条件码。 和其…

基于springboot实现大学外卖管理系统项目【项目源码+论文说明】

基于springboot实现大学外卖管理系统演示 摘要 如今&#xff0c;信息化不断的高速发展&#xff0c;社会也跟着不断进步&#xff0c;现今的社会&#xff0c;各种工作都离不开信息化技术&#xff0c;更离不开电脑的管理。信息化技术也越来越渗透到各小型的企业和公司中&#xff…

pytorch(九)卷积神经网络

文章目录 卷积神经网络全连接神经网络与卷积神经网络的区别概念性知识mnist数据集(卷积神经网络) GoogLeNetInception 残差网络ResNet残差块结构 卷积神经网络 全连接神经网络与卷积神经网络的区别 全连接神经网络是一种最为基础的前馈神经网络&#xff0c;他的每一个神经元都…

AndroidStudio跑马灯实现

在activity_main.xml中编写如下代码&#xff1a; <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_h…

【考研数学】打基础,张宇《30讲》还是武忠祥《基础篇》?

张宇的30讲还是不太适合零基础的考研党去听...因为宇哥整体节奏较快&#xff0c;如果目标分较高&#xff0c;有一定的基础还是建议的 身边真的很多130-140的大佬都是跟着张宇从头到尾&#xff0c;张宇老师的习题册非常适合基础扎实&#xff0c;想冲刺高分的考研党 我是属于基…

R语言的数据类型与数据结构:向量、列表、矩阵、数据框及操作方法

R语言的数据类型与数据结构&#xff1a;向量、列表、矩阵、数据框及操作方法 介绍向量列表矩阵数据框 介绍 R语言拥有丰富的数据类型和数据结构&#xff0c;以满足各类数据处理和分析的需求。本文将分享R语言中的数据类型&#xff0c;包括向量、列表、矩阵、数据框等&#xff…

Skywalking官方的实战模拟项目Live-Demo

Skywalking 官方的实战模拟项目Live-Demo Live-Demo 是 Skywalking 官方的实战模拟项目&#xff0c;其中包含4个子模块项目 projectA访问projectB、projectC两个SpringBoot项目 projectB访问本地的H2数据库 projectC访问www.baidu.com并同时向一台Kafka消息队列写入数据 proje…

VSCODE解决git合并过程中的冲突问题;error: failed to push some refs to

1&#xff1a;异常现象 推送有冲突的git修改到远端的时候&#xff0c;会有如下提示 git.exe push --progress “origin” master:master To http://gitlab.xxx.com/dujunqiu/test.git ! [rejected] master -> master (fetch first) error: failed to push some refs to ‘…

解决“ModuleNotFoundError: No module named ‘RPi._GPIO‘”

背景描述 树莓派4B Ubuntu20.04 Python3.9安装RPi.GPIO后无法使用 解决办法 使用sudo pip3 install RPi.GPIO --upgrade尝试更新&#xff0c;发生红字报错&#xff0c;提示在编译过程中缺少Python开发头文件&#xff08;Python.h&#xff09;&#xff0c;因此应该先安装他&…

短视频矩阵系统--抖去推---年后技术还能迭代更新开发运营吗?

短视频矩阵系统#短视频矩阵系统已经开发3年&#xff0c;年后这个市场还能继续搞吗&#xff1f;目前市面上开发短视频账号矩阵系统的源头公司已经不多了吧&#xff0c;或者说都已经被市场被官方平台的政策影响的不做了吧&#xff0c;做了3年多的矩阵系统开发到现在真的是心里没有…

excel 动态列导出

excel动态列&#xff0c;只好用poi来写了&#xff0c;也并不复杂&#xff0c;一样就这个件事情抽像为几步&#xff0c;就是套路了&#xff0c;开发效率就上去了。 1 准备空模板 导出操作与excel模板的导出一样&#xff0c;可以参考excel导出标准化 2 自定义SheetWriteHandler …

TI IWR6843ISK ROS驱动程序搭建

1、设备准备 1.1 硬件设备 1&#xff09;TI IWR 6843 ISK 1块 2&#xff09;Micro USB 数据线 1条 1.2 系统环境 1&#xff09;VMware Workstation 15 Player 虚拟机 2&#xff09;Ubuntu18.04 并安装有 ROS1 系统 如若没有安装 ROS 系统&#xff0c;可通过如下指令进行…

HTML 02

1.列表 布局内容排列整齐的区域 (1)无序列表 写法&#xff1a; <ul><li>列表条目1</li><li>列表条目2</li><li>列表条目3</li></ul> 浏览器中显示&#xff1a; 注意&#xff1a; ul标签里只能包裹li标签 li标签里可以包…

算法学习系列(四十):贡献法

目录 引言概念一、孤独的照片二、牛的基因学三、字串分值 引言 关于这个贡献法考的不是很多&#xff0c;主要题型是出现在需要枚举每一个组合这类题&#xff0c;出现的次数较多。没有固定的模板&#xff0c;就是一种思想&#xff0c;跟贪心一样&#xff0c;每个题都是不一样的…

探讨系统测试的最佳实践与思维模式!

这是测试活动过程详解系列的最后一篇文章。之前的想法&#xff0c;是对测试过程各重要环节进行拆解&#xff0c;然后介绍这个环节重点要做的事情&#xff0c;为什么要做这些事&#xff0c;以及注意事项。 前面几篇文章分别介绍了单元测试、集成测试、回归测试阶段要解决的问题…