HTML静态网页成品作业(HTML+CSS)——游戏战地介绍设计制作(4个页面)

崽子爱码

已于 2024-03-13 07:53:05 修改

阅读量1.2k

点赞数 19

分类专栏： html网页设计与制作学生HTML个人网页作业作品静态网页文章标签： html css 游戏

于 2024-03-12 07:58:19 首次发布

本文链接：https://blog.csdn.net/weixin_42283461/article/details/136640359

版权

html网页设计与制作同时被 3 个专栏收录

118 篇文章 21 订阅

订阅专栏

静态网页

115 篇文章 0 订阅

订阅专栏

学生HTML个人网页作业作品

89 篇文章 17 订阅

订阅专栏

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

一、作品介绍

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

二、作品演示

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>战地</title>
	<link rel="stylesheet" type="text/css" href="./css/1.css">
	
	<style>
	</style>
</head>
<body>
	<div id="content">
		<!-- 头部 -->
		<header id="header">
			<div id="logo">
				战地
			</div>
			<nav id="nav">
				<a href="index.html" class="nav_link on">游戏首页</a>
				<a href="tedian.html" class="nav_link">游戏特点</a>
				<a href="pingjia.html" class="nav_link">游戏评价</a>
				<a href="ganshou.html" class="nav_link">游戏感受</a>
			</nav>
		</header>

		<div id="midimg">
			<div id="midimg_box">
				<img src="./images/midimg.jpg">
				<img src="./images/midimga.jpeg">
				<img src="./images/midimgb.jpg">
				<img src="./images/midimgc.jpg">
				<img src="./images/midimgd.jpeg">
			</div>
		</div>
		<main id="main">
			
			<h2>游戏介绍</h2>
			<p>
				《战地》是EA DICE开发的军事题材射击游戏系列。战地系列的首作《战地1942》于2002年上市。截至2018年，战地系列共有17款游戏产品公布。最新作称作《战地2042》已于2021年11月19日正式发售，登陆PC、PS5和Xbox S,Xbox X等平台。
			</p>
			<p>
				战地系列游戏以大规模的载具和步兵在大地图上协同作战为品牌卖点，注重游戏娱乐性的同时兼顾一定程度上的真实性。战地系列历来是网络游戏，有一些产品同时设计了作为附加模式的单机游戏。部分战地系列游戏的扩展功能比较完善，第三方团体可以制作各种各样的模组满足玩家不同的需要。传统的战地系列游戏主攻PC平台；自2005年起，开发组也逐渐重视起游戏机平台。
			</p>
			<h2>战地系列</h2>
			<style>
			</style>
			<div id="xilie">
				<div class="xilie_box has">
					<div class="xilie_box_img">
						<div class="xilie_box_img_bg"></div>
						<img src="./images/zhandi1.jpg" alt="">
					</div>
					<div class="xilie_box_info">
						<h4>战地2042</h4>
						<p>
							《战地2042》（Battlefield 2042）是一款由EA DICE工作室（EA Digital Illusions CE）开发制作、EA（美国艺电）出版发行的第一人称射击游戏。于2021年10月23日发售。本作将带领玩家重返该系列标志性的全面战争。走进因失序而面目全非的近未来世界，在小队队友和尖端武器的帮助下，适应并征服瞬息万变的战场。
						</p>
					</div>
				</div>
				<div class="xilie_box">
					<div class="xilie_box_img">
						<div class="xilie_box_img_bg"></div>
						<img src="./images/zhandi2.jpg" alt="">
					</div>
					<div class="xilie_box_info">
						
							<h4>战地5</h4>
							<p>
								《战地5》（英文名：Battlefield 5）是一款由EA DICE工作室（EA Digital Illusions CE）开发制作、EA（美国艺电）出版发行的第一人称射击游戏。游戏采用了寒霜引擎，展现了更强大的3D细节效果，把动画、环境破坏、光照、地图和音效提升到一个新的高度。
							</p>
					</div>
				</div>
				<div class="xilie_box">
					<div class="xilie_box_img">
						<div class="xilie_box_img_bg"></div>
						<img src="./images/zhandi3.jpg" alt="">
					</div>
					<div class="xilie_box_info">
						<h4>战地1</h4>
						<p>
							《战地1》（Battlefield 1）是一款由EA DICE工作室（EA Digital Illusions CE）开发制作、EA（美国艺电）出版发行的第一人称射击游戏。
						</p>
					</div>
				</div>
				<div class="xilie_box">
					<div class="xilie_box_img">
						<div class="xilie_box_img_bg"></div>
						<img src="./images/zhandi4.jpg" alt="">
					</div>
					<div class="xilie_box_info">
						
							<h4>战地：硬仗</h4>
							<p>
								《战地：硬仗》由《死亡空间》团队打造，本作乃《战地》系列首款非军事题材的FPS作品，将于2015初登陆PC、本世代主机以及次世代主机平台。
							</p>
					</div>
				</div>
				<div class="xilie_box">
					<div class="xilie_box_img">
						<div class="xilie_box_img_bg"></div>
						<img src="./images/zhandi5.jpg" alt="">
					</div>
					<div class="xilie_box_info">
						<h4>战地3</h4>
						<p>
							《战地3》（Battlefield 3）是战地系列的第11款作品，是真正意义的《战地2》的续作。《战地3》主打PC平台，PC平台支持64人同台对战，固定翼战斗机、匍匐等元素亦将回归。
						</p>
					</div>
				</div>
			</div>
			
			<script>
				// 获取 所有得系列 
				var xilie_box = document.querySelectorAll('.xilie_box');
				// 为每个系列加入 鼠标移入事件
				for (var i = 0; i < xilie_box.length; i++) {
					xilie_box[i].onmouseenter = function(){
						//如果当前 鼠标移入得不是 已显示
						if(!this.classList.contains('has')) {
							//将当前显示得隐藏
							document.querySelector('.xilie_box.has').classList.remove('has');
							//再显示鼠标移入得这个
							this.classList.add('has');
						}
					}
				}
			</script>
			
			<img src="./images/zhandi_jieshao.png" alt="" style="width: 100%;margin-top: 20px;">
		</main>
		<!-- 底部 -->
		<footer id="footer">
				战地 版权所有
		</footer>

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