Web大学生网页作业成品——游戏战地介绍设计与实现(HTML+CSS)（4个页面）-CSDN博客

本文链接：https://blog.csdn.net/2501_90365653/article/details/145605068

🎉🎉🎉 常见网页设计作业题材有**汽车、环保、明星、文化、国家、抗疫、景点、人物、体育、植物、公益、图书、节日、游戏、商城、旅游、家乡、学校、电影、动漫、非遗、动物、个人、企业、美食、婚纱、其他**等网页设计题目, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。🎉🎉🎉

一、作品介绍 🔥

🏷️本套采用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>