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

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

文章目录


一、作品介绍

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

二、作品演示




三、代码目录

四、网站代码

HTML部分代码

c 复制代码
<!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>

五、源码获取

🥇 ~ 关注我,点赞博文~ 每天带你涨知识!

🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。

💙2.想要获取本文源码,点击前往吧

相关推荐
我爱李星璇4 分钟前
HTML常用表格与标签
前端·html
想自律的露西西★1 小时前
用el-scrollbar实现滚动条,拖动滚动条可以滚动,但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5
螺旋天光极锐斩空闪壹式!2 小时前
自制游戏:监狱逃亡
c++·游戏
彪8252 小时前
第十章 JavaScript的应用 习题
javascript·css·ecmascript·html5
天晟科技2 小时前
GameFi的前景:游戏与金融的未来交汇点
游戏·金融·区块链
旧林8433 小时前
第八章 利用CSS制作导航菜单
前端·css
懷淰メ4 小时前
PyQt飞机大战游戏(附下载地址)
开发语言·python·qt·游戏·pyqt·游戏开发·pyqt5
asleep7015 小时前
第8章利用CSS制作导航菜单
前端·css
/**书香门第*/8 小时前
Cocos creator 3.8 支持的动画 7
学习·游戏·游戏引擎·游戏程序·cocos2d
猫爪笔记9 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html