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

于 2023-12-24 10:06:03 发布
阅读量392 收藏 8
点赞数 6
分类专栏： web网页设计与开发 web期末作业设计网页 文章标签： html css 游戏 课程设计 html5期末大作业 前端 web课程设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46321522/article/details/134872647
版权

👨‍🎓学生HTML静态网页基础水平制作👩‍🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

❤ 【作者主页——🔥获取更多优质源码】

❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】

❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】

# 一、👨‍🎓网站题目 🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。

二、✍️网站描述

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

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

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

三、📚网站介绍

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

📓网站程序方面：计划采用最新的网页编程语言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"></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》萌新速成攻略（一.主界面操作介绍）</a>
								<span>2017-04-18</span>
							</li>
						</ul>
		  			</div>
			  	</div>
			  	<!-- 四张图模块 -->
				  <ul class="entrance">
				  	<li>
				  		<a href="#">
				  			<s class="stopLeft">
				  				<img src="img/a.png">
				  			</s>
				  			<div class="rkName">
				  				<span>新手专区</span>
				  			</div>
							<div class="ljxq">
								<em></em>
								<span>了解详情</span>
							</div>
				  		</a>
				  	</li>
				  	<li class="rk2">
				  		<a href="#">
				  			<s class="stopRight">
				  				<img src="img/b.png">
				  			</s>
				  			<div class="rkName">
				  				<span>MMD模型配布</span>
				  			</div>
				  			<div class="ljxq">
				  				<em></em>
				  				<span>了解详情</span>
				  			</div>
				  		</a>
				  	</li>
				  	<li class="rk3">
				  		<a href="#">
				  			<s class="stopLeft">
				  				<img src="img/c.png">
				  			</s>
				  			<div class="rkName" id="gfsq">
				  				<span>官方社区</span>
				  			</div>
				  			<div class="ljxq">
				  				<em></em>
				  				<span>了解详情</span>
				  			</div>
				  		</a>
				  	</li>
				  	<li class="rk4">
				  		<a href="#">
				  			<s class="stopLeft">
				  				<img src="img/d.png">
				  			</s>
				  			<div class="rkName">
				  				<span>MMD模型配布</span>
				  				<p>80天征服魔都</p>
				  			</div>
				  			<div class="ljxq">
				  				<em></em>
				  				<span>了解详情</span>
				  			</div>
				  		</a>
				  	</li>
				  	<div class="sqPanel">
				  		<div class="shequ gzh_01">
				  			<div class="topShequ">
				  				<div class="qrCode">
				  					<img src="img/qrCode_8cd5dc0.jpg" style="width: 110px; height: 110px;">
				  				</div>
				  			</div>
				  			<p class="sqName">官方公众号</p>
				  		</div>
				  		<div class="shequ">
				  			<div class="topShequ">
				  					<p>QQ群1:434898(已满)</p>
				  					<p>QQ群1:434898(已满)</p>
				  					<p>QQ群1:434898(火爆)</p>
				  					<p>QQ群1:434898(已满)</p>
				  					<p>QQ群1:434898(推荐)</p>
				  					<p>QQ群1:434898(ios)</p>
				  			</div>
				  			<p class="sqName">官方QQ群</p>
				  		</div>
				  		<div class="shequ">
				  			<div class="topShequ">
				  				<a href="#">
				  					<img src="img/9k=.jpg" style="margin-left: 25px;">
				  				</a>
				  			</div>
				  			<p class="sqName">官方微博</p>
				  		</div>
				  		<div class="shequ">
				  			<div class="topShequ">
				  				<a href="#">
				  					<img src="img/lt_97ad62a.jpg"  style="margin-left: 25px;">
				  				</a>
				  			</div>
				  			<p class="sqName">官方论坛</p>
				  		</div>
				  	</div>
				  </ul>
		  </div>

		  <!-- 君王设定预览 -->
		  <div class="module module04 wbox g-animEle2" id="hero">
		  	<h1></h1>
		  	<div class="panel">
		  	    <!-- 7张图片上面介绍模块 -->
		  		<ul class="TxtInfoList coverInfo">
		  			<li class="on">
		  				<div class="heroName">
		  					<img src="img/mz2_6395213.png">
		  				</div>
		  				<div class="heroInfo">
		  					<div class="heroTc">
		  						<em></em>
		  						<span class="heroVoice play"></span>
		  						<s class="fg_line"></s>
		  						<div class="heroTcBox">
		  							<div class="tempWrap">
		  								<div class="heroTcBd" style="width: 1188px;position: relative; overflow: hidden; padding: 0px; margin: 0px;">
		  									<p class="clone" style="float: left; width: 386px">命汝为我献上最纯净的处女之血……没有的话，鸭血豆腐也行。</p>
		  									<p style="float: left; width: 386px">命汝为我献上最纯净的处女之血……没有的话，鸭血豆腐也行。</p>
		  									<p class="clone" style="float: left; width: 386px">命汝为我献上最纯净的处女之血……没有的话，鸭血豆腐也行。</p>
		  								</div>
		  							</div>
		  						</div>
		  					</div>
		  					<div class="wgtj">
		  						<span>
		  							<s></s>
		  						</span>
		  					</div>
		  					<p>【迷之液体】看起来相当优雅的高脚杯，但里面装的可能是麻辣烫。</p>
		  					<p>【夜巡的棘翼】身为月下古堡恶魔君王的双翼，同时保留了瓦拉几亚守护者的特征。</p>
		  				</div>
		  			</li>

		  			<li>
		  				<div class="heroName">
		  					<img src="img/jWwt2bscet1FZHutdtYlvtv0XjQo0tPrgo9oAAAAASUVORK5CYII=.png">
		  				</div>
		  				<div class="heroInfo">
		  					<div class="heroTc">
		  						<em></em>
		  						<span class="heroVoice play"></span>
		  						<s class="fg_line"></s>
		  						<div class="heroTcBox">
	  								<div class="heroTcBd">
	  									<p>日本王？我要成为的可是天下人。</p>
	  								</div>
		  						</div>
		  					</div>
		  					<div class="wgtj">
		  						<span>
		  							<s></s>
		  						</span>
		  					</div>
		  					<p>【狩物佛钉】关白行“天下刀狩”时，向全国发出刀狩令，征得无数名刀，在京都东山大佛殿熔炼出了这柄“佛钉”。</p>
		  					<p>【日轮】关白背后的日轮是丰国大明神的象征，代表烁烁日光。</p>
		  					<p>【家纹·五七桐】丰臣家的源流，来历可疑，但关白本人非常喜爱。</p>
		  				</div>
		  			</li>

		  			<li class="gtzy">
		  				<div class="heroName">
		  					<img src="img/mz3_9406ed1.png">
		  				</div>
		  				<div class="heroInfo">
		  					<div class="heroTc">
		  						<em></em>
		  						<span class="heroVoice play"></span>
		  						<s class="fg_line"></s>
		  						<div class="heroTcBox">
	  								<div class="heroTcBd">
	  									<p>帝国的闪电再次击落</p>
	  								</div>
		  						</div>
		  			
		  							<s></s>
		  						</span>
		  					</div>
		  					<p>【虹旗-五族共和】中华民国的国旗，破损程度相当严重。</p>
		  					<p>【龙旗-五族至尊】中华帝国的国旗，被作为主武器使用。</p>
		  				</div>
		  			</li>

		  			<li>
		  				<div class="heroName">
		  					<img src="img/fdasgasdg.png">
		  				</div>
		  				<div class="heroInfo">
		  					<div class="heroTc">
		  						<em></em>
		  						<span class="heroVoice play"></span>
		  						<s class="fg_line"></s>
		  						<div class="heroTcBox">
	  								<div class="heroTcBd">
	  									<p>位面的稳定并非常态。我将用星光清洗宇宙深处的黑暗。</p>
	  								</div>
		  						</div>
		  					</div>
		  					<div class="wgtj">
		  						<span>
		  							<s></s>
		  						</span>
		  					</div>
		  					<p>【深空金杖-恒星提灯】昭示天体运行的金属权杖，龙之塑形盘绕于星图轨迹周围，蕴含白昼与星夜之力。</p>
		  					<p>【太空堡垒-云台阁】君临天下的战争兵器，以最纯净的星光清洗宇宙深空的不稳杂音。</p>
		  				</div>
		  			</li>

		  			<li>
		  				<div class="heroName">
		  					<img src="img/Bxuo389BHGOpAAAAAElFTkSuQmCC.png">
		  				</div>
		  				<div class="heroInfo">
		  					<div class="heroTc">
		  						<em></em>
		  						<span class="heroVoice play"></span>
		  						<s class="fg_line"></s>
		  						<div class="heroTcBox">
	  								<div class="heroTcBd">
	  									<p>怎么，男生就不能做皇帝了吗？</p>
	  								</div>
		  						</div>
		  					</div>
		  					<div class="wgtj">
		  						<span>
		  							<s></s>
		  						</span>
		  					</div>
		  					<p>【天子剑】透明的剑身是王权能力的宿体，承载着咒符“则天文字”。</p>
		  					<p>【则天文字】目前已探明的文字包括“星之文字·〇”、“国之文字·圀”、“神皇之名·瞾”。分别象征恒星的能量、国土的幻景、以及神皇的未来——“五十六亿七千万岁后，于桫椤树下成无上等正觉。”</p>
		  				</div>
		  			</li>

		  			<li>
		  				<div class="heroName">
		  					<img src="img/5AtYNYPt6rTk28BgMRWiAI8B9wAAAAASUVORK5CYII=.png">
		  				</div>
		  				<div class="heroInfo">
		  					<div class="heroTc">
		  						<em></em>
		  						<span class="heroVoice play"></span>
		  						<s class="fg_line"></s>
		  						<div class="heroTcBox">
	  								<div class="heroTcBd">
	  									<p>和我一起，让魔都的舞台沸腾起来吧！</p>
	  								</div>
		  						</div>
		  					</div>
		  					<div class="wgtj">
		  						<span>
		  							<s></s>
		  						</span>
		  					</div>
		  					<p>【重瞳】偶像之王眼中的音符状花纹，歌姬力UP！</p>
		  					<p>【衣装·蝶❤花】Liyuyu在某支PV中的服饰。大量使用了蝶翼与花瓣的元素。</p>
		  					<p>【音响系统·金鲤】只是普通的装饰！和鲤鱼王绝对没有任何关系！是李煜王，不是鲤鱼王！</p>
		  				</div>
		  			</li>

		  		</ul>
		  	</div>
		  	<div class="switchTx">
		  		<a href="#">更多少女皇帝</a>
		  	</div>
		  	<!-- 7张少女图片区 -->
		  	<ul class="txList">
		  		<li class="firstPin page0 coverTx on" style="display: list-item;">
		  			<a href="#">
		  				<img src="img/yZ9v8AAgyKDAWp+G0AAAAASUVORK5CYII=.png">
		  				<b class="cover"></b>
		  			</a>
		  		</li>
		  		<li class="page0 coverTx" style="display: list-item;">
		  			<a href="#">
		  				<img src="img/BWR+ZFwjmiK0AAAAAElFTkSuQmCC.png">
		  				<b class="cover"></b>
		  			</a>
		  		</li>
		  		<li class="page0 coverTx" style="display: list-item;">
		  			<a href="#">
		  				<img src="img/AOHk8QOrIsHxAAAAAElFTkSuQmCC.png">
		  				<b class="cover"></b>
		  			</a>
		  		</li>
		  		<li class="page0 coverTx" style="display: list-item;">
		  			<a href="#">
		  				<img src="img/HK7aXjP8AlG3FAff443oAAAAASUVORK5CYII=.png">
		  				<b class="cover"></b>
		  			</a>
		  		</li>
		  		<li class="page0 coverTx" style="display: list-item;">
		  			<a href="#">
		  				<img src="img/wAM2oRWCYMlrgAAAABJRU5ErkJggg==.png">
		  				<b class="cover"></b>
		  			</a>
		  		</li>
		  		<li class="page0 coverTx" style="display: list-item;">
		  			<a href="#">
		  				<img src="img/a6wGtnJd6HsTGgM9zudF2D9r6PvAirnX+EVZwr85eaLAAAAAElFTkSuQmCC.png">
		  				<b class="cover"></b>
		  			</a>
		  		</li>
		  		<li class="page0 coverTx" style="display: list-item;">
		  			<a href="#">
		  				<img src="img/BQHsWWpkqF0JAAAAAElFTkSuQmCC.png">
		  				<b class="cover"></b>
		  			</a>
		  		</li>
		  	</ul>
			<!-- 背景图片模块 -->
		  	<ul class="sectList">
		  		<li class="xs02 on">
		  			<img class="coverRw" src="img/SB8Wz+NTR10iGlCm9aeQU51fX+l9X97n4yKfifFqwAAAABJRU5ErkJggg==.png">
		  		</li>
		  		<li class="xs01">
		  			<img class="coverRw" src="img/yx1_5d7f635.png">
		  		</li>
		  		<li class="xs03">
		  			<img class="coverRw" src="img/F1k2jL0+j97Zw0XBKLQoXboS0e2b6X9UyVXkKsNHqAAAAABJRU5ErkJggg==.png">
		  		</li>
		  		<li class="xs04">
		  			<img class="coverRw" src="img/pv6Ob4KfTgx37AAAAAElFTkSuQmCC.png">
		  		</li>
		  		<li class="xs05">
		  			<img class="coverRw" src="img/yx5_c069ff3.png">
		  		</li>
		  		<li class="xs06">
		  			<img class="coverRw" src="img/SrysLQj2Er7X3bn+q18851AAAAAAElFTkSuQmCC.png">
		  		</li>
		  		<li class="xs07">
		  			<img class="coverRw" src="img/3XQyaKbanq51dLYrkWXX6QCXhNL3RPR18iQNm6w7TBm5pMOpmAAAAABJRU5ErkJggg==.png">
		  		</li>
		  	</ul>
		  	<!-- 文字图片 -->
		  	<ul class="linesList coverTxt">
		  		<li class="line02 on">
		  			<img src="img/wOIa3U5CCKAZwAAAABJRU5ErkJggg==.png">
		  		</li>
		  		<li class="line01">
		  			<img src="img/hht0K9t1eJZaOlvJpAAAAAElFTkSuQmCC.png">
		  		</li>
		  		<li class="line03">
		  			<img src="img/CzAAFtElHnadl1wAAAAASUVORK5CYII=.png">
		  		</li>
		  		<li class="line04">
		  			<img src="img/afggsdsad.png">
		  		</li>
		  		<li class="line05">
		  			<img src="img/LVDRkx0oAAAAASUVORK5CYII=.png">
		  		</li>
		  		<li class="line06">
		  			<img src="img/NoAAAAAElFTkSuQmCC.png">
		  		</li>
		  		<li class="line07">
		  			<img src="img/wApIuFanWny2gAAAABJRU5ErkJggg==.png">
		  		</li>
		  	</ul>
		  </div>
		  <!-- 游戏特色 -->
		  <div class="module module05 wbox g-animEle2" id="yxts">
		  	<h1></h1>
		  	<ul class="shuffling">
		  		<li class="ul-li1 on">
		  			<b></b>
		  			<a href="#"></a>
		  		</li>
		  		<li class="ul-li2">
		  			<b></b>
		  			<a href="#"></a>
		  		</li>
		  		<li class="ul-li3">
		  			<b></b>
		  			<a href="#"></a>
		  		</li>
		  		<li class="ul-li4">
		  			<b></b>
		  			<a href="#"></a>
		  		</li>
		  		<li class="ul-li5">
		  			<b></b>
		  			<a href="#"></a>
		  		</li>
		  	</ul>
		  </div>
		  <!-- 同人作品 -->
		  <div class="module module06 wbox g-animEle2" id="trzp">
		  	<h1></h1>
		  	<ul class="playHd">
		  		<p class="lineLeft"></p>
		  		<p class="lineRight"></p>
		  		<a href="#" class="trMore fanMore">
		  			<div class="lines">
		  				<span class="lt"></span>
		  				<span class="lr"></span>
		  				<span class="lb"></span>
		  				<span class="ll"></span>
		  			</div>
		  		</a>
		  		<li class="on mmdZp">MMD作品<s></s></li>
		  		<li class="mmdMx">MMD模型配布<s></s></li>
		  		<li class="cvjZp">CV剧作品<s></s></li>
		  		<li class="mhZp">漫画作品<s></s></li>
		  		<li class="bqbXz">表情包下载</li>
		  	</ul>
		  	<div class="playBd">
		  	  
		  								</div>
		  							</a>
		  						</li>
		  						<li>
		  							<a href="#">
		  								<img src="img/28b60458-ff57-4fbd-ab8c-2f5081ab96ab.jpg">
		  								<s></s>
		  								<div class="showBox">
		  									<em></em>
		  									<p>秦王嬴政◈最凶LUPIN-萌王 MMD</p>
		  									<div class="bVideo">
		  										<span></span>
		  									</div>
		  					>
		  						</div>
		  					</a>
		  				</li>
		  				<li>
		  					<a href="#">
		  						<img src="img/y2_1b69393.jpg">
		  						<s></s>
		  						<div class="showBox">
		  							<span class="playVideo yhsp" data-video="video/2b7333be6087d61cfa2925b9d2d9e7feqt.mp4"></span>
		  							<p>守护魔都 性感宣誓</p>
		  						</div>
		  					</a>
		  				</li>
		  				<li>
		  					<a href="#">
		  						<img src="img/y3_56ec6b7.jpg">
		  						<s></s>
		  						<div class="showBox">
		  							<span class="playVideo yhsp yhsp3" data-video="video/2b7333be6087d61cfa2925b9d2d9e7feqt.mp4"></span>
		  							<p>英雄各自为战 君王永不独行</p>
		  						</div>
		  					</a>
		  				</li>
		  			</ul>
		  			<!-- 作战实录 -->
		  			<ul class="bVodeo_ul" style="display: none;">
		  				<li>
		  					<a href="#">
		  						<img src="img/z1_0cdd28f.jpg">
		  						<s></s>
		  						<div class="showBox bVideo">
		  							<span class="yhsp"></span>
		  							<p>从零开始做皇帝之拿皇炮打日本王</p>
		  						</div>
		  					</a>
		  				</li>
		  				<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〕Ｍ-RPG 0428 号</span>
		    		</div>
		    	</div>
		    </div>
    </div>

	
</body>
</html>

💒CSS样式代码

/* 指定当前css文件, 编码格式是utf-8 */
@charset "UTF-8";


/* 清除默认的外边距和内边距 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
  margin: 0;
  padding: 0;
}

/* 清除默认的边框 */
fieldset, img, input, button, textarea {
  border: none;
  padding: 0;
  margin: 0;
  outline-style: none;
}


ul, ol {
  list-style: none;
}

input {
  font-family: "SimSun", "宋体";
}

select, input, textarea {
  font-size: 12px;
  margin: 0;
}

textarea {
  resize: none;
}

img {
  border: 0;
  /* 可以防止 img 下边出现缝隙问题 */
  vertical-align: middle;
}

table {
  border-collapse: collapse;
}

body {
  /* 将整个页面的字体, 默认重置 */
  font: 12px/18px Microsoft YaHei, Arial, Verdana, "SimSun";
  color: #666;
  background: #fff;
}

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* 兼容 IE 67 */
.clearfix {
  *zoom: 1;
}

a {
  color: #666;
  text-decoration: none;
}


h1, h2, h3, h4, h5, h6 {
  text-decoration: none;
  font-weight: normal;
  font-size: 100%;  
}

/* 废物利用 */
s, i, em {
  font-style: normal;
  text-decoration: none;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.w {
  width: 1200px;
  margin: 0 auto;
}

/*.br::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  background: #666;
  position: absolute;
  right: 0px;
  top: 8px;
}*/

六、🥇 如何让学习不再盲目

很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习 。

七、🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

3.

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥

web领域优质创作者-网页设计
关注
  • 6
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
简单的html+css动漫网页制作 dw简单的动漫网页制作
qq_365392777
04-21 8508
网页效果 共10个页面 # 代码实现 <!doctype html> <html> <head> <meta charset="utf-8"> <title>愤怒的小鸟网</title> <link rel="stylesheet" type="text/css" href="css/common.css"/> </head> <body> <div class="container"&
卡通动漫风格HTML5模板是一款粉色大气的HTML5动漫企业网站模板。_html网站模板_网页源码移动端前端_H5模板.rar
08-05
卡通动漫风格HTML5模板是一款粉色大气的HTML5动漫企业网站模板。_html网站模板_网页源码移动端前端_H5模板.rar
HTML创意动画代码
qq_52108058的博客
02-25 1万+
这个代码使用了 Canvas 技术，创建了一个随机生成的气泡背景并且让气泡动态漂浮，形成了一个很有趣的效果。你可以在这个基础上尝试进行一些自己的创意，比如修改气泡的数量、大小、颜色，以及运动的方式等等。 这个代码使用了 CSS 的动画和阴影特效，让页面中的文字在红、橙、黄、绿、蓝五种颜色之间不断变化，形成了一个很有趣的效果。你可以在这个基础上尝试进行一些自己的创意，比如修改文字的大小、样式、颜色，以及变化的频率和方式等等。 该示例中，我们使用了 transform-style: preserve-3d 属性
【HTML】HTML网页设计----动漫网站设计
coding加油站
08-20 1万+
html网页设计，html动漫网站，html，css作业，期末课程设计
用HTML+CSS做一个漂亮简单的个人网页——动漫网页【火影忍者】1个页面
最新发布
qq3200628753的博客
12-07 891
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】 文章目录🌰一、网页介绍📖一、网页效果🌌二、代码展示😈1.HTML代码结构 🧱2.C
html+css网站模板网页设计源码-html个人网页设计模板.zip
05-10
html+css网站模板网页设计源码-html个人网页设计模板
一个简单的HTML网页——传统节日春节网页(HTML+CSS)
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
制作一个简单HTML游戏网页（HTML+CSS）仿龙之谷网络游戏官网
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
制作一个简单HTML个人网页网页——人物介绍梵高（HTML+CSS）
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
动漫商城网站HTML代码
01-27
简易的动漫商城网站，总共有四个网站页面和一个登陆页面。
html网页模版 动漫
05-16
html htmlhtml htmlhtml htmlhtml htmlhtml htmlhtml htmlhtml htmlhtml htmlhtml htmlhtml htmlhtml htmlhtml htmlhtml html
关于动漫的HTML网页制作（共五页有五种风格）
04-13
关于动漫的HTML网页制作，，大作业A+水平！！主要特色：附带音效，五个网页五种风格。每个都有不同的美感~ 随着动漫产业，动漫文化的不断发展，动漫已经从过去的低年龄层向全民动漫方向发展， 动漫产业链逐步完善，喜欢动漫的爱好者越来越多。当然市场需求量也在不断增长，越来越多的动漫爱好者在这一领域能希望得到更多动漫资源，获得更多的一些能满足他们各种爱好的资源集中地，而画漫翩翩网则包含了动漫和动漫论坛，满足了广大动漫迷的需求，逐渐形成了动漫一种文化特色存在。
web网页设计期末课程大作业~超高仿英雄联盟LOL游戏官网设计与实现(HTML+CSS+JavaScript)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
06-23 2万+
仿英雄联盟LOL游戏官网设计与实现(HTML+CSS+JavaScript) 关于HTML期末网页制作，大作业A+水平 ~游戏网页作业HTML+CSS+JavaScript实现，共有游戏首页 等页面! 原始HTML+CSS+JS页面设计，可以学习学习，大学网页设计作业，~这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 此次课程设计的题目是网页规划与设计(html+css+js+image+video+audio)确定每个页面将使用的页面布局技术（如结合使用CSS及表格、DIV、框架等技术），完成
【HTML】HTML网页设计---海贼王动漫网页设计
coding加油站
08-25 8493
html作业，html5作业，期末作业，前端作业，网页作业，海贼王
HTML期末学生大作业-宫崎骏动漫网站11个页面html+css+javascript
学生期末作业
12-14 2309
【代码】HTML期末学生大作业-宫崎骏动漫网站11个页面html+css+javascript。
HTML+CSS完成的动画页面
XXX51129的博客
10-19 2923
本网页为html+css完成的页面，仅为学习交流之用。页面非常粗糙，有不足之处请谅解。 另：页面为一个，不可跳转。 1、HTML页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
Html5动画代码
MissGentlemen的博客
11-29 7911
.div1{ width: 60px; height: 60px; border: 1px solid red; background-color: aqua; } .div1:hover{ transform: scale(2) rotate(30deg);; } .div2{ width: 60px; height: 60px; border: 1px solid
关于动漫的HTML网页设计作业——动漫网页(刀剑神域6个页面)
热门推荐
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-06 2万+
关于动漫的HTML网页设计作业——动漫网页(刀剑神域6个页面) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 1.网页作品简介方面 ：日本动漫网页(6个页面)网站模板。喜欢的可以下载，文章页支持手机PC响应式布局。主
html5期末大作业:商城网页设计——仿京东商城网页端模板(8页面) html+css+javascr
11-17
作为HTML5期末大作业的一部分，我设计了一个商城网页，仿照京东商城的网页端模板，一共设计了8个页面。这个网页是用HTML、CSS和JavaScript来完成的。 首先，我设计了一个主页，用来展示商城的一些热门商品和促销...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

web领域优质创作者-网页设计

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值