HTML CSS游戏官网网页模板——卡通的萌王游戏网页(13个页面)

最新推荐文章于 2024-09-18 09:34:52 发布

Q__365392777

最新推荐文章于 2024-09-18 09:34:52 发布

阅读量862

点赞数

文章标签： html css 游戏

本文链接：https://blog.csdn.net/Q__365392777/article/details/126302837

版权

这是一个包含13个页面的游戏官网网页模板，设计风格卡通，涵盖Div+CSS、鼠标特效、导航栏、多媒体元素等。模板适用于游戏网站、电竞、游戏介绍等场景，包含页头、导航、内容板块和页脚，结构清晰，代码兼容主流浏览器。提供了HTML结构代码和CSS样式代码，适合学习和实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、👨‍🎓网站题目

🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。

二、✍️网站描述

⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。

🏅 一套A+的网页应该包含 (具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
所有页面相互超链接，可到三级页面，有5-10个页面组成。
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
菜单美观、醒目，二级菜单可正常弹出与跳转。
要有JS特效，如定时切换和手动切换图片轮播。
页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。。
页面清爽、美观、大方，不雷同。。
不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

四、🌐网站效果

在这里插入图片描述

五、🔧 网站代码

🧱HTML结构代码



<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>萌王EX首页</title>
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="css/animation.css">

	<script src="js/jquery-1.8.3.min.js"></script>
	<script src="js/js.js"></script>
	<script src="js/tiaozhuan.js"></script>
</head>
<body>

    <div class="main">
    	<!-- 顶部导航 -->
			<div class="topnav wbox">
			<ul>
				<li><a href="index.html">首页</a></li>
				<li class="zxzx">
					<a href="#">最新资讯</a>
					<div class="nav_ls hidden">
						<a href="news-message.html">新闻资讯</a>
						<a href="#">最新公告</a>
						<a href="#">热门活动</a>
					</div>
				</li>
				<li class="yxsd">
					<a href="#">游戏设定</a>
					<div class="nav_ls hidden">
						<a href="fiction.html">官方世界观小说</a>
						<a href="snhd.html">少女皇帝</a>
						<a href="smqj.html">使魔群集</a>
						<a href="tswf.html">圣冠系统</a>
						<a href="tswf.html">宝石系统</a>
					</div>
				</li>
				<li class="trzp">
					<a href="#">同人作品</a>
					<div class="nav_ls hidden" id="trzp_nav">
							<a href="tongren.html">MMD作品</a>
							<a href="tongren.html">CV剧作品</a>
							<a href="tongren.html">漫画作品</a>
							<a href="#" style="display: none"></a>
							<a href="tongren.html">表情包下载</a>
							<a href="javascript:;">MMD模型配布</a>
					</div>
				</li>
				<li class="logo">
					<img src="img/logo.png" alt="">
				</li>
				<li class="glzl">
					<a href="#">攻略资料</a>
					<div class="nav_ls hidden">
						<a href="xsrm.html">新手专区</a>
						<a href="javascript:;">游戏攻略</a>
						<a href="javascript:;">KFZ有约</a>
					</div>
				</li>
				<li class="yhzq">
					<a href="#">音画专区</a>
					<div class="nav_ls hidden">
						<a href="index.html#yhZone">宣传视频</a>
						<a href="index.html#yhZone">作战实录</a>
						<a href="index.html#yhZone">精美壁纸</a>
						<a href="index.html#yhZone">游戏截图</a>
					</div>
				</li>
				<li class="lt">
					<a href="#">论坛</a>
				</li>
				<li class="gzh">
					<a href="#">公众号</a>
					<div class="topQrCode">
						<img src="img/qrCode_8cd5dc0.jpg">
					</div>
				</li>
			</ul>
		</div>
		  <!-- title -->
		  <div id="dowebok" class="title">
			   <img src="img/slogan_0fbda3d.png" class="mySlideUp">
		  </div>
		  <!-- 内容 -->
		  <div class="content mySlideUp2" id="content">
		  	<div class="ewm_dw">
		  		<div class="ewm">
		  			<img src="img/qrCode_8cd5dc0.jpg">
		  		</div>
		  		<div class="dw">
		  			<a href="#" class="apple"></a>
		  			<a href="#" class="android"></a>
		  		</div>
		  	</div>
		  		<a href="#" class="icon_logo">
		  			<img src="img/icon_56aca49.png" alt="">
		  		</a>
		  		<a href="#" class="video">
		  			<span></span>
		  			<em></em>
		  		</a>
		  		<a href="#" class="yuyue"></a>
		  </div>
		  <!-- 游戏资讯 -->
		  <div class="game_news">
		  		<h2></h2>
			  	<div class="game_banner">
			  		<div class="middle_right">
					    <div id="lunbobox">
					        <div id="toleft">
					            &lt;</div>
					                <div class="lunbo">
					                    <a href="#"><img src="img/1af6f2bb-e1e3-493f-ae08-4b64a71dcc21.jpg"></a>
					                    <a href="#"><img src="img/06dd3b9c-97b3-4385-a659-6ec57ff751b2.jpg"></a>
					                </div>
					                <div id="toright">&gt;</div>
					                <ul>
					                    <li></li>
					                    <li></li>
					                </ul>
					                <span></span>
					        </div>
					    </div>
			  	</div>
			  	<div class="news_list">
			  		<div class="newMenu">
			  			<div class="newsHd" id="news_title">
			  				<a href="#" class="on">
			  					<s></s>
			  					<span>最新</span>
			  				</a>
			  				<a href="#">
			  					<s></s>
			  					<span>新闻</span>
			  				</a>
			  				<a href="#">
			  					<s></s>
			  					<span>公告</span>
			  				</a>
			  				<a href="#">
			  					<s></s>
			  					<span>活动</span>
			  				</a>
			  				<a href="#">
			  					<s></s>
			  					<span>攻略</span>
			  				</a>
			  			</div>
			  			<div class="newsMore">
			  				<a href="#">
			  					<div class="lines">
			  						<span class="lt"></span>
			  						<span class="lr"></span>
			  						<span class="lb">

最低0.47元/天解锁文章