0
点赞
收藏
分享

微信扫一扫

期末作业代码网页设计代码 游戏网页网站设计——卡通的萌王游戏网页(13页) HTML+CSS+JavaScript

书坊尚 2022-04-24 阅读 56

文章目录

一、作品展示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、文件目录

在这里插入图片描述

三、代码实现

<!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"></span>
			  						<span class="ll"></span>
			  					</div>
			  				</a>
			  			</div>
			  		</div>
					<!-- 新闻列表 -->
		  			<div class="newsBd" style="width: 4088px; position: relative; overflow: hidden; padding: 0px; margin: 0px;">
		  				<!--最新-->
						<ul style="float: left; width: 584px;">
							<li class="placedTop">
								<a href="" target="" title="">感谢不屏蔽 感谢每一份热爱</a>
							</li>
							<li>
								<a href="#" target="" title=""><em>[新闻]</em>感谢不屏蔽  感谢每一份热爱</a>
								<span>2017-12-01</span>
							</li>
				            <li>
								<a href="#" target="" title=""><em>[新闻]</em>草原上的奇妙少女 《萌王EX》全新英雄天罚之主曝光</a>
								<span>2017-11-16</span>
							</li>
				            <li>
								<a href="#" target="" title=""><em>[新闻]</em>军队王者来袭! 《萌王EX》首批名将单位曝光</a>
								<span>2017-10-27</span>
							</li>
				            <li>
								<a href="#" target="" title=""><em>[新闻]</em>强力女子天团登场! 《萌王EX》全新军队原画欣赏</a>
								<span>2017-10-12</span>
							</li>
				            <li>
								<a href="#" target="" title=""><em>[新闻]</em>全新英雄加入! 《萌王EX》少女皇帝末路宗师曝光</a>
								<span>2017-09-27</span>
							</li>
						</ul>
						<!--新闻-->
						<ul style="float: left; width: 584px;">
							<li class="placedTop">
								<a href="" target="" title="">感谢不屏蔽 感谢每一份热爱</a>
							</li>
							<li>
								<a href="#" target="" title=""><em>[新闻]</em>感谢不屏蔽  感谢每一份热爱</a>
								<span>2017-12-01</span>
							</li>
							<li>
								<a href="#" target="" title=""><em>[新闻]</em>草原上的奇妙少女 《萌王EX》全新英雄天罚之主曝光</a>
								<span>2017-11-16</span>
							</li>
							<li>
								<a href="#" target="" title=""><em>[新闻]</em>军队王者来袭! 《萌王EX》首批名将单位曝光</a>
								<span>2017-10-27</span>
							</li>
							<li>
								<a href="#" target="" title=""><em>[新闻]</em>强力女子天团登场! 《萌王EX》全新军队原画欣赏</a>
								<span>2017-10-12</span>
							</li>
							<li>
								<a href="#" target="" title=""><em>[新闻]</em>全新英雄加入! 《萌王EX》少女皇帝末路宗师曝光</a>
								<span>2017-09-27</span>
							</li>
						</ul>
						<!--公告-->
						<ul style="float: left; width: 584px;">
							<li class="placedTop">
								<a href="" target="" title="">《萌王ex》2017年4月20日测试结束公告</a>
							</li>
							<li>
								<a href="#" target="" title="《萌王ex》2017年4月20日测试结束公告"><em>[公告]</em>《萌王ex》2017年4月20日测试结束公告</a>
								<span>2017-05-05</span>
							</li>
							<li>
								<a href="#" target="" title="《萌王ex》2017年4月20日测试活动公告"><em>[公告]</em>《萌王ex》2017年4月20日测试活动公告</a>
								<span>2017-04-28</span>
							</li>
							<li>
								<a href="#" target="" title="《萌王ex》2017年4月20日测试相关事项说明"><em>[公告]</em>《萌王ex》2017年4月20日测试相关事项说明</a>
								<span>2017-04-19</span>
							</li>
							<li>
								<a href="#" target="" title="《萌王ex》2017年4月20日测试开服公告"><em>[公告]</em>《萌王ex》2017年4月20日测试开服公告</a>
								<span>2017-04-19</span>
							</li>
							<li>
								<a href="#" target="" title="【暴打开发组,dalao教做人】活动获奖公告"><em>[公告]</em>【暴打开发组,dalao教做人】活动获奖公告</a>
								<span>2016-11-29</span>
							</li>
						</ul>
						<!--活动-->
						<ul style="float: left; width: 584px;">
							<li class="placedTop">
								<a href="#" target="" title="">关注《萌王EX》双微赢专属君王礼赞</a>
							</li>
							<li>
								<a href="#" target="" title=""><em>[活动]</em>关注《萌王EX》双微赢专属君王礼赞</a>
								<span>2016-11-16</span>
							</li>
							<li>
								<a href="#" target="" title=""><em>[活动]</em>首测官方论坛新位面福利活动公告</a>
								<span>2016-11-16</span>
							</li>
							<li>
								<a href="#" target="" title=""><em>[活动]</em>萌动首测少女皇帝的六大馈赠福利活动公告</a>
								<span>2016-11-16</span>
							</li>
							<li>
								<a href="#" target="" title=""><em>[活动]</em>【限时活动】暴打开发组,dalao教做人</a>
								<span>2016-11-16</span>
							</li>
						</ul>
						<!--攻略-->
						<ul style="float: left; width: 584px;">
							<li class="placedTop">
								<a href="" target="" title="">《萌王EX》少女皇帝英雄上手攻略</a>
							</li>
							<li>
								<a href="#" target="" title=""><em>[攻略]</em>《萌王EX》少女皇帝英雄上手攻略</a>
								<span>2017-04-18</span>
							</li>
							<li>
								<a href="#" target="" title=""><em>[攻略]</em>《萌王EX》萌新速成攻略(三 特色玩法介绍)</a>
								<span>2017-04-18</span>
							</li>
							<li>
								<a href="#" target="" title=""><em>[攻略]</em>《萌王EX》特色使魔玩法上手攻略</a>
								<span>2017-04-18</span>
							</li>
							<li>
								<a href="#" target="" title=""><em>[攻略]</em>《萌王EX》萌新速成攻略(二.君王使魔介绍)</a>
								<span>2017-04-18</span>
							</li>
							<li>
								<a href="#" target="" title=""><em>[攻略]</em>《萌王EX》萌新速成攻略(
		  				<li>
		  					<a href="#">
		  						<img src="img/z2_2aca4fb.jpg">
		  						<s></s>
		  						<div class="showBox bVideo">
		  							<span class="yhsp"></span>
		  							<p>从零开始做皇帝之斯大林司机飙车实录</p>
		  						</div>
		  					</a>
		  				</li>
		  				<li>
		  					<a href="#">
		  						<img src="img/z3_60edf22.jpg">
		  						<s></s>
		  						<div class="showBox bVideo">
		  							<span class="yhsp"></span>
		  							<p>从零开始做皇帝之王莽内战解析微操细节</p>
		  						</div>
		  					</a>
		  				</li>
		  				<li>
		  					<a href="#">
		  						<img src="img/z4_fc37ccf.jpg">
		  						<s></s>
		  						<div class="showBox bVideo">
		  							<span class="yhsp"></span>
		  							<p>萌王EX前置兵线rush战术和天降城市流战术解析</p>
		  						</div>
		  					</a>
		  				</li>
		  			</ul>
		  		</div>
		  	</div>
		  </div>
		  <!-- 悬浮 -->
		  <a href="javascript:;" class="gzh_off"></a>
		  <div class="slideBox">
		  	<a href="javascript:;" class="gzh_close"></a>
		  	<div class="wbCode">
		  		<img src="img/qrCode_8cd5dc0.jpg">
		  	</div>
		  	<p>关注官微赢胖次伞</p>
		  </div>
		  <!-- 底部 -->
		    <div class="NIE-copyRight">
		    	<div class="nie-copyRight-new-inner">
		    		<div class="nie-cn-part1">
		    			<span class="nie-cn-logo">
		    				<a href="#" class="01"><img src="img/netease.1.png"></a>
		    				<a href="#" class="02"><img src="img/nie.1.png"></a>
		    			</span>
		    			<span class="nie-cn-nav">
		    				<i class="nie-cn-nav-i1">
		    					<a href="#">公司简介</a> - 
		    					<a href="#">客户服务</a> - 
		    					<a href="#">相关法律</a> - 
		    					<a href="#">网易游戏</a> - 
		    					<a href="#">联系我们</a> - 
		    					<a href="#">商务合作</a> - 
		    					<a href="#">加入我们</a> 
		    				</i><br>
		    				<i class="nie-cn-nav-i2"> 
		    				 	网易公司版权所有 ©1997-2018 
		    				 	<a href="#" class="nie-cn-guardianship">点击查看家长监护工程</a>
		    				</i>
		    			</span>
		    		</div>
		    		<div class="nie-cn-part2">
		    			<P>本游戏适合16岁以上的玩家进入。</P>
		    			<P>积极健康的游戏心态是健康游戏的开端,本游戏故事情节设置紧凑,请您合理控制游戏时间,避免沉溺游戏影响生活,注意自我保护,防范网络陷阱。</P>
		    			<span>《网络文化经营许可证》</span>
		    			<span>浙网文[2016]0155-055号</span>
		    			<span>新广出审[2016]3458号</span>
		    			<span>ISBN 978-7-7979-1932-6</span>
		    			<span>文网游备字〔2017〕M-RPG 0428 号</span>
		    		</div>
		    	</div>
		    </div>
    </div>

	
</body>
</html>



举报

相关推荐

0 条评论