个⼈设计web前端⼤作业~响应式游戏⽹站源码
（HTML+CSS+Bootstrap）cssmarginpadding
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">
php解密平台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 -->
bootstrap代码47 </nav>
48 <!-- Swiper -->
49 <div class="swiper-container">
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>
html个人网页完整代码div+css122 <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>
linux版软件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"/>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论