个⼈设计web前端⼤作业~响应式游戏⽹站源码
（HTML+CSS+Bootstrap）
HTML期末⼤作业课程设计游戏主题html5⽹页~响应式游戏⽹站(HTML+CSS+Bootstrap) ~个⼈设计web前端⼤作业
临近期末, 你还在为HTML结课作业,⽼师的作业要求感到头⼤？HTML⽹页作业⽆从下⼿？⽹页要求的总数量太多？没有合适的模板？等等⼀系列问题。你想要解决的问题，在这篇博⽂中基本都能满⾜你的需求~
原始HTML+CSS页⾯设计, web⼤学⽣⽹页设计作业，~这是⼀个不错的⽹页制作，画⾯精明，⾮常适合初学者学习使⽤。
作品介绍
关于HTML⽹页设计期末课程⼤作业实现，⼤作业A+⽔平 ~， ⿊⾊响应式的游戏⽹站模板。适合：⾓⾊游戏，单击游戏、⽹络游戏等类型⽹站。这个基于定制模板有6个独特的⾸页以及总20+HTML页⾯。
此作品为学⽣个⼈主页⽹页设计题材，代码为简单学⽣⽔平 html+css 布局制作，作品下载后可使⽤任意HTML编辑软件(例如：DW、HBuilder、NotePAD, Vscode 所有编辑器均可使⽤)
⽹页作品布局⽅⾯：⽹页布局整体为LOGO、导航、轮播图、主体内容布局。⼦页⾯多种布局，兴趣爱好内容使⽤图⽚列表布局，成绩页⾯插⼊了表格，使⽤图⽚对齐⽅式设置了左对齐。
⽹页作品技术⽅⾯：使⽤CSS制作了⽹页背景图、⿏标经过及选中导航变⾊效果、下划线等。 ⾸页制作了留⾔表单，同时简单使⽤JavaScript制作了表单判断(提交时表单不能为空)
空)
⽂章⽬录
⼆、代码⽬录
三、代码实现
1<!DOCTYPE html>
2<html>
3 <head>
4  <meta charset="utf-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
7  <title>动漫官⽹-⾸页</title>
8  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
9  <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
10  <link rel="stylesheet" type="text/css" href="css/style.css"/>
11  <link rel="stylesheet" type="text/css" href="css/animate.min.css">
12 </head>
13 <body>
14  <!--顶部-->
15  <nav class="navbar navbar-default navbar-fixed-top">
16      <div class="container-fluid wrap">
17        <!-- Brand and toggle get grouped for better mobile display -->
18        <div class="navbar-header">
18        <div class="navbar-header">
19          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded=
20            <span class="sr-only">Toggle navigation</span>
21            <span class="icon-bar"></span>
22            <span class="icon-bar"></span>
23            <span class="icon-bar"></span>
24          </button>
25          <!--logo-->
26          <a class="navbar-brand" href="#">
27          <img src="img/logo.png" alt=""/>
28          </a>
29        </div>
30        <!-- Collect the nav links, forms, and other content for toggling -->
31        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
32          <!--<ul class="language navbar-right">
33            <li><a href="#" class="active">中</a></li>
34            <li>|</li>
35            <li><a href="#">EN</a></li>
36          </ul>-->
37          <ul class="nav navbar-nav main-nav  navbar-right">
波多野结衣最新作品
38            <li class="active"><a href="index.html">⾸页</a></li>
39            <li><a href="worksShow.html">作品展⽰</a></li>
40            <li><a href="recruit.html">招贤纳⼠</a></li>
41            <li><a href="contract.html"></a></li>
42            <li><a href="about.html">关于公司</a></li>
43            <li class="lang"><a class="active">中</a>|<a href="en_index.html">EN</a></li>
44          </ul>
45        </div><!-- /.navbar-collapse -->
46      </div><!-- /.container-fluid -->
47    </nav>
48  <!-- Swiper -->
49    <div class="swiper-container">
张云雷被极限挑战p成卡通人
50      <div class="swiper-wrapper">
51        <div class="swiper-slide" ></div>
52        <div class="swiper-slide" ></div>
53        <div class="swiper-slide" ></div>
54        <div class="swiper-slide" ></div>
55        <div class="swiper-slide" ></div>
56      </div>
57      <!-- Add Pagination -->
58      <div class="swiper-pagination swiper-pagination-white"></div>
59      <!-- Add Arrows -->
60      <div class="swiper-button-next swiper-button-white"></div>
61      <div class="swiper-button-prev swiper-button-white"></div>
62    </div>
63  <!--多图轮播-->
64  <div class="lunbo">
草原姑娘
65    <div class="title wow bounceInUp">我们参与的项⽬</div>
66    <div class="picScroll">
67    <ul>
68      <li>
69      <a target="_blank" href="###">
70        <img _src="img/lunbo1.png" src="img/lunbo1.png" />
71        <div class="img-text">⼤型海战战场“潜龙之渊”上线，全民开战！</div>
72      </a>
73      </li>
74      <li>
75      <a target="_blank" href="###">
76        <img _src="img/lunbo2.png" src="img/lunbo2.png" />
77        <div class="img-text">天⼑嘲天宫《⼀⼈之战》视频⾸发同名专辑上架QQ⾳乐</div>
78      </a>
79      </li>
80      <li>
81      <a target="_blank" href="###"><img _src="img/lunbo3.png" src="img/lunbo3.png" />
82        <div class="img-text">懒⼈攻略如何刷完⼀周胜负令</div>
83      </a>
83      </a>
84      </li>
85      <li>
86      <a target="_blank" href="###"><img _src="img/lunbo4.png" src="img/lunbo4.png" />
87        <div class="img-text">《王者荣耀》魔性H5上线，五军对决等你来战</div>
88      </a>海阔天空简谱
89      </li>
90      <li>
91      <a target="_blank" href="###"><img _src="img/lunbo5.png" src="img/lunbo5.png" />
92        <div class="img-text">超⾼期待！玩家Coser作品获《绝地求⽣全军出击》官⽅点赞</div>
93      </a>
94      </li>
强心脏崔始源
95      <li>
96      <a target="_blank" href="###"><img _src="img/lunbo6.png" src="img/lunbo6.png" />
97        <div class="img-text">揭幕战RNGvsIG LPL春季赛1⽉15⽇正式开赛</div>
98      </a>
99      </li>
100    </ul>
101    <a class="prev" href="javascript:void(0)"></a>
102    <a class="next" href="javascript:void(0)"></a>
103    </div>
104    <a href="###"><div class="more">更多作品</div></a>
105  </div>
106  <!--关于我们-->
107  <div class="aboutUs">
108    <div class="wrap">
109    <div class="title wow bounceInUp">关于我们</div>
110    <div class="text wow slideInDown">
111      <span class="ccf0f32">⼴州袁动动漫设计有限公司(YD ART)，致⼒于CG美术概念设计及三维影视游戏视觉开发制作</span>
112      <span>其团队现由创办⼈袁杰联合著名CG艺术家肖壮悦以及XRCGTEAM(<a href="am">am</a>)成员和各游戏113      <span>为国内外众多项⽬提供优质概念设计、原画设定、美宣插画、次世代3D、GUI、动作特效等外包服务。</span>
114      <span>曾参与《星际争霸》《上古卷轴》《英雄联盟》《战神》《三国⽆双》《梦幻西游》《LOC》《⿁吹灯》《长城》等国内外⼤型游戏影视项⽬视觉美115    </div>
116    <div class="row">
117      <div class="col-xs-6 col-sm-3">
118        <div class="">
119        <h3 class="timer count-title" id="count-number" data-to="150" data-speed="1500"></h3>员⼯
吉克隽逸微博
120        </div>
121      </div>
122      <div class="col-xs-6 col-sm-3">
123        <div class="">
124        <h3 class="timer count-title" id="count-number" data-to="100" data-speed="1500"></h3>客户
125        </div>
126      </div>
127      <div class="col-xs-6 col-sm-3">
128        <div class="">
129        <h3 class="timer count-title" id="count-number" data-to="200" data-speed="1500"></h3>项⽬
130        </div>
131      </div>
132      <div class="col-xs-6 col-sm-3">
133        <div class="">
134        <h3 class="timer count-title" id="count-number" data-to="6" data-speed="1500"></h3>周年
135        </div>
136      </div>
137    </div>
138    </div>
139  </div>
140  <!--他们信任我们-->
141  <div class="believe">
142    <div class="wrap">
143    <div class="title wow bounceInUp">他们信任我们</div>
144    <div class="partnerList">
145    <ul>
146      <a href="###">
147      <li>
148        <img src="img/about_01.jpg"/>