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

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

文章目录

一、作品介绍
二、作品演示
三、代码目录
四、网站代码
- 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>