HTML静态网页作业(HTML+CSS+JS)——游戏平台主题网页设计制作(29个页面)

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

---

一、作品介绍

🏷️本套采用DIV+CSS布局，使用Javacsript代码，共有29个页面。
🏷️其中有图片轮播，滚动到顶部，下拉菜单，表单验证，css动画 等多种效果

二、作品演示

1、首页

2、游戏中心页

3、游戏详情页

4、资讯列表页

5、资讯详情页

5、会员中心页

三、代码目录

四、网站部分代码

	<div class="top top80">
		<div class="header ">
			<div class="w">
				<a href="index.html">
					<img src="./images/logo.png" alt="">
				</a>
				<div class="nav">
					<div class="nav_item">
						<a href="index.html">首页</a>
					</div>
					<div class="nav_item has_nav">
						<a href="youxi.html">游戏中心</a>
						
						<div class="sub_nav">
							<a href="youxi.html#js">角色扮演</a>
							<a href="youxi.html#ty">体育竞速</a>
							<a href="youxi.html#dz">动作冒险</a>
						</div>
					</div>
					<div class="nav_item">
						<a href="xiazai.html">下载中心</a>
					</div>
					<div class="nav_item">
						<a href="zixun.html">资讯中心</a>
					</div>
					<div class="nav_item has_nav">
						<a href="jijing.html">游戏集锦</a>
						<div class="sub_nav">
							<a href="zhibo.html">直播中心</a>
							<a href="shipin.html">游戏视频</a>
							<a href="jingcai.html">精彩瞬间</a>
						</div>
					</div>
				</div>
				
				<div class="nav_lr">
					<a href="login.html">登录</a>
					<span>/</span>
					<a href="regist.html">注册</a>
				</div>
			</div>
		</div>
	</div>
	<div class="top_imgs">
		<img src="./images/banner_1.png" alt="" class="top_img">
		<img src="./images/banner_2.jpeg" alt="" class="top_img">
		<img src="./images/banner_3.jpeg" alt="" class="top_img">
	</div>
	
	<div class="main">
		<div class="w main_item pb1">
			<h2 class="main_tit">热门游戏</h2>
			
			<div class="glist">
				<a class="gitem" href="./game_dldl.html">
					<div class="gitem_img"><img src="./images/g1.jpeg" alt=""></div>
					<div class="gitem_name">斗罗大陆：魂师对决</div>
				</a>
				<a class="gitem" href="./game_wzry.html">
					<div class="gitem_img"><img src="./images/g2.jpeg" alt=""></div>
					<div class="gitem_name">王者荣耀</div>
				</a>
				<a class="gitem" href="./game_hyrz.html">
					<div class="gitem_img"><img src="./images/g3.jpeg" alt=""></div>
					<div class="gitem_name">火影忍者</div>
				</a>
				<a class="gitem" href="game_hpjy.html">
					<div class="gitem_img"><img src="./images/g4.jpeg" alt=""></div>
					<div class="gitem_name">和平精英</div>
				</a>
				<a class="gitem" href="game_ppkdc.html">
					<div class="gitem_img"><img src="./images/g5.jpeg" alt=""></div>
					<div class="gitem_name">跑跑卡丁车</div>
				</a>
				<a class="gitem" href="game_tymy.html">
					<div class="gitem_img"><img src="./images/g6.jpeg" alt=""></div>
					<div class="gitem_name">天涯明月刀</div>
				</a>
				<a class="gitem" href="game_wmsj.html">
					<div class="gitem_img"><img src="./images/g12.jpeg" alt=""></div>
					<div class="gitem_name">完美世界</div>
				</a>
				<a class="gitem" href="game_qqfc.html">
					<div class="gitem_img"><img src="./images/g8.jpeg" alt=""></div>
					<div class="gitem_name">QQ飞车</div>
				</a>
			</div>
			
			<div class="more">
				<a href="youxi.html" class="show_more">查看更多</a>
			</div>
		</div>
		
		
		<div class="main_item bg1">
			<div class="w pb1">
				<h2 class="main_tit">游戏资讯</h2>
				<div class="nlist">
					<a class="nitem" href="zixun_info1.html">
						<div class="nitem_img"><img src="./images/n1.png" alt=""></div>
						<div class="nitem_name">pbe美测服加速器免费 LOLpbe免费好用的加速器推荐</div>
						<div class="nitem_date">2023-04-20</div>
					</a>
					<a class="nitem" href="zixun_info2.html">
						<div class="nitem_img"><img src="./images/n2.webp" alt=""></div>
						<div class="nitem_name">《不羁联盟》在发售后将获得长期支持</div>
						<div class="nitem_date">2023-04-20</div>
					</a>
					<a class="nitem" href="zixun_info3.html">
						<div class="nitem_img"><img src="./images/n3.png" alt=""></div>
						<div class="nitem_name">策略手游止戈武将马超如何搭配阵容 策略手游止戈武将马超厉害吗</div>
						<div class="nitem_date">2023-04-20</div>
					</a>
				</div>
			
				<div class="more">
					<a href="zixun.html" class="show_more show_more1">查看更多</a>
				</div>
			</div>
		</div>
		
	</div>

五、源码获取

🥇 ~ 关注我，点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
💙2.查看更多页面或想要获取本文源码，点击前往吧