HTML CSS游戏官网网页模板——卡通的萌王游戏网页(13个页面)
文章目录
- 一、网站题目
- 二、✍️网站描述
- 三、网站介绍
- 四、网站效果
- 五、 网站代码
-
- HTML结构代码
- CSS样式代码
- 六、 如何让学习不再盲目
- 七、更多干货
- 【获取方式】
一、网站题目
游戏官网、⛹️游戏网站、️电竞游戏、游戏介绍、等网站的设计与制作。
二、✍️网站描述
⭐ 网页中包含：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>
<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">
<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">>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-01span>
li>
<li>
<a href="#" target="" title=""><em>[新闻]em>草原上的奇妙少女 《萌王EX》全新英雄天罚之主曝光a>
<span>2017-11-16span>
li>
<li>
<a href="#" target="" title=""><em>[新闻]em>军队王者来袭！ 《萌王EX》首批名将单位曝光a>
<span>2017-10-27span>
li>
<li>
<a href="#" target="" title=""><em>[新闻]em>强力女子天团登场！ 《萌王EX》全新军队原画欣赏a>
<span>2017-10-12span>
li>
<li>
<a href="#" target="" title=""><em>[新闻]em>全新英雄加入！ 《萌王EX》少女皇帝末路宗师曝光a>
<span>2017-09-27span>
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-01span>
li>
<li>
<a href="#" target="" title=""><em>[新闻]em>草原上的奇妙少女 《萌王EX》全新英雄天罚之主曝光a>
<span>2017-11-16span>
li>
<li>
<a href="#" target="" title=""><em>[新闻]em>军队王者来袭！ 《萌王EX》首批名将单位曝光a>
<span>2017-10-27span>
li>
<li>
<a href="#" target="" title=""><em>[新闻]em>强力女子天团登场！ 《萌王EX》全新军队原画欣赏a>
<span>2017-10-12span>
li>
<li>
<a href="#" target="" title=""><em>[新闻]em>全新英雄加入！ 《萌王EX》少女皇帝末路宗师曝光a>
<span>2017-09-27span>
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-05span>
li>
<li>
<a href="#" target="" title="《萌王ex》2017年4月20日测试活动公告"><em>[公告]em>《萌王ex》2017年4月20日测试活动公告a>
<span>2017-04-28span>
li>
<li>
<a href="#" target="" title="《萌王ex》2017年4月20日测试相关事项说明"><em>[公告]em>《萌王ex》2017年4月20日测试相关事项说明a>
<span>2017-04-19span>
li>
<li>
<a href="#" target="" title="《萌王ex》2017年4月20日测试开服公告"><em>[公告]em>《萌王ex》2017年4月20日测试开服公告a>
<span>2017-04-19span>
li>
<li>
<a href="#" target="" title="【暴打开发组，dalao教做人】活动获奖公告"><em>[公告]em>【暴打开发组，dalao教做人】活动获奖公告a>
<span>2016-11-29span>
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-16span>
li>
<li>
<a href="#" target="" title=""><em>[活动]em>首测官方论坛新位面福利活动公告a>
<span>2016-11-16span>
li>
<li>
<a href="#" target="" title=""><em>[活动]em>萌动首测少女皇帝的六大馈赠福利活动公告a>
<span>2016-11-16span>
li>
<li>
<a href="#" target="" title=""><em>[活动]em>【限时活动】暴打开发组，dalao教做人a>
<span>2016-11-16span>
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-18span>
li>
<li>
<a href="#" target="" title=""><em>[攻略]em>《萌王EX》萌新速成攻略（三 特色玩法介绍）a>
<span>2017-04-18span>
li>
<li>
<a href="#" target="" title=""><em>[攻略]em>《萌王EX》特色使魔玩法上手攻略a>
<span>2017-04-18span>
li>
<li>
<a href="#" target="" title=""><em>[攻略]em>《萌王EX》萌新速成攻略（二.君王使魔介绍）a>
<span>2017-04-18span>
li>
<li>
<a href="#" target="" title=""><em>[攻略]em>《萌王EX》萌新速成攻略（一.主界面操作介绍）a>
<span>2017-04-18span>
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>