🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

📂文章目录

  • 二、📚网站介绍
  • 三、🔗网站效果
    • ▶️1.视频演示
    • 🧩 2.图片演示
  • 四、💒 网站代码
    • 🧱HTML结构代码
    • 🏠CSS样式代码
  • 五、🎁更多源码

二、📚网站介绍

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

📓网站程序方面：计划采用最新的网页编程语言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代码）。

三、🔗网站效果

▶️1.视频演示

H21XY 游戏资讯 bootstrap网页

🧩 2.图片演示







四、💒 网站代码

🧱HTML结构代码


<!DOCTYPE HTML>
<html>
<head>

<script src="js/jquery.min.js"></script>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- jQuery (necessary JavaScript plugins) -->
<script src="js/bootstrap.js"></script>
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Adventure Gaming  Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

<script src="js/jquery.min.js"></script>

</head>
<body>
<!-- header -->
<div class="header">
	<div class="container">
		<div class="headr-left">
			<div class="social">							
				   <a ><i class="facebook"></i></a>
				   <a ><i class="twitter"></i></a>
				   <a ><i class="gplus"></i></a>	
				   <a ><i class="pin"></i></a>	
				   <a ><i class="youtube"></i></a>	
			</div>
			<div class="search">
				<form>
					<input type="submit" value="">
					<input type="text" value="" placeholder="搜索......">					 
				</form>
			</div>
			<div class="clearfix"></div>
		</div>

</div>
<!-- footer -->
<div class="footer">
	<div class="container">
		<div class="footer-grids">
			<div class="col-md-3 ftr-info">
				<h3>关于我们</h3>
				<p>但是票据的软喉。但是喉咙的可行性是从电线末端开始的一个悲伤的电线床。恐惧的颤抖，是代价的构成。</p>
			</div>
			<div class="col-md-3 ftr-grid">
				<h3>类别</h3>
				<ul class="ftr-list">
					<li><a >行动</a></li>
					<li><a >赛车</a></li>
					<li><a >冒险</a></li>
					<li><a >模拟</a></li>
					<li><a >自行车</a></li>
				</ul>				 
			</div>
			<div class="col-md-3 ftr-grid">
				<h3>平台</h3>
				<ul class="ftr-list">
					<li><a >个人电脑</a></li>
					<li><a>Ps4</a></li>
					<li><a >XBOX 360</a></li>					 
					<li><a >一机</a></li>
					<li><a>PSP</a></li>
				</ul>				 
			</div>
			<div class="col-md-3 ftr-grid">
				<h3>信息</h3>
				<ul class="ftr-list">	
					<li><a >联系我们</a></li>
					<li><a">愿望</a></li>
					<li><a>站点地图</a></li>
					<li><a>条款和条件</a></li>					 
				</ul>				 
			</div>		
			<div class="clearfix"></div>
		</div>
	</div>
</div>
<!---->
<div class="copywrite">
	<div class="container">
		<p> © 2020 冒险游戏。保留所有权利 |  <a >由W3layouts设计</a></p>
	</div>
</div>
<!---->
</body>
</html>

🏠CSS样式代码




.header{
	background:#69d2e8;
	padding:1em 0;
}
.headr-left{
	float:left;
	width:65%;
}
.social{
	float:left;
}
.social i {
width: 33px;
height: 33px;
background: url('../images/social.png') no-repeat 0px 0px;
display: inline-block;
margin:0 5px;
}
a i.facebook:hover,a i.twitter:hover,a i.gplus:hover,a i.pin:hover,a i.youtube:hover{
	opacity:0.8;
}
a i.facebook{
background-position:-5px -6px;
}
a i.twitter{
background-position:-46px -7px;
}
a i.gplus{
background-position:-92px -8px;
}
a i.pin{
background-position:-135px -8px;
}
a i.youtube{
background-position:-180px -9px;
}
.search {
  position: relative;
  float: left;
  width:40%;
  margin-left:10em;
}
.search input[type="text"] {
  padding: 6px 10px 6px 0px;
  outline: none;
  color: #fff;
  background: none;
  border: none;
  width: 88%;
  position: relative;
  font-size: 0.9em;
  -webkit-appearance: none;
  margin-left: 3em;
}
.search input[type="submit"] {
  background: url('../images/search1.png') no-repeat 0px 1px;
  border: none;
  cursor: pointer;
  width: 24px;
  outline: none;
  position: absolute;
  height: 24px;
  top: 3px;
  left: 8px;
}

五、🎁更多源码

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

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!

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

更多推荐

游戏静态HTML网页作业作品 大学生游戏介绍网页设计制作成品 简单DIV CSS布局网站