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.想要获取本文源码,点击前往吧

相关推荐
fruge6 分钟前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
As977_36 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891138 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾39 分钟前
前端基础-html-注册界面
前端·算法·html
我要洋人死3 小时前
导航栏及下拉菜单的实现
前端·css·css3
半盏茶香4 小时前
【C语言】分支和循环详解(下)猜数字游戏
c语言·开发语言·c++·算法·游戏
PandaQue11 小时前
《怪物猎人:荒野》游戏可以键鼠直连吗
游戏
小白白一枚11114 小时前
css实现div被图片撑开
前端·css
@蒙面大虾15 小时前
CSS综合练习——懒羊羊网页设计
前端·css
顾菁寒15 小时前
WEB第二次作业
前端·css·html