HTML静态网页作业成品(HTML+CSS)——穿越火线网页设计制作(4个页面)

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

---

一、作品介绍

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

二、作品演示

1、首页

2、子页1

3、子页2

4、子页3

三、代码目录

四、网站代码

HTML部分代码

	<nav>
		<a href="index.html">游戏首页</a>
		<a href="zhenying.html">阵营背景</a>
		<a href="ditu.html">经典地图</a>
		<a href="juese.html">角色介绍</a>
	</nav>
	<section>
		<img src="./images/1.jpeg" alt="">
	</section>
	<main>
		<table>
			<tr>
				<td>
					<img src="./images/2.jpeg" alt="" class="jjimg">
				</td>
				<td>
					<p>
						《穿越火线》（CrossFire，简称CF）是由Smile Gate开发，中国内地由腾讯游戏代理运营的一款第一人称射击游戏。
					</p>
					<p>
						游戏讲述了全球两大佣兵集团Global Risk和Black List间的对决。游戏中有团队竞技模式、战队赛、爆破模式、幽灵模式等多种模式。引进了“缺人补充”形式的即时加入系统。
					</p>
					<p>
						2016年11月，《穿越火线》荣登2016中国泛娱乐指数盛典“中国IP价值榜游戏榜top10”。 2019年3月4号，穿越火线入选2019年世界电子竞技大赛正式比赛项目。2020年12月6日，情久俱乐部获得CFS2020世界总决赛冠军。 2021年12月5日，AG电子竞技俱乐部获得CFS2021世界总决赛冠军奖杯。
					</p>
				</td>
			</tr>
		</table>

CSS部分代码

* {
	padding: 0;
	margin: 0;
}
body {
	background-color: #000;
	
}


nav {
	width: 1000px;
	margin: 0 auto;
	height: 48px;
	background-color: #284358;
}
nav a {
	text-align: center;
	width: 250px;
	display: inline-block;
	text-decoration: none;
	line-height: 48px;
	height: 48px;
	float: left;
	color: #fff;
}
nav a:hover {
	color: #000;
	background-color: #fff;
}
section {
	width: 1000px;
	margin: 0 auto;
}
section img {
	width: 100%;
}

五、源码获取

🥇1、 ~ 关注我，点赞博文~ 每天带你涨知识!
🎁2、看到这里了就[点赞+好评+收藏]三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
💙3、源码获取公众号，点点下方公众号进行获取吧! 网页搜索编号:E0138