📂文章目录
- 二、📚网站介绍
- 三、🔗网站效果
- ▶️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.视频演示
K18JP-守望先锋带表单页(5页)
🧩 2.图片演示
四、💒 网站代码
🧱HTML结构代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>守望先锋</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-----头部开始------->
<div class="top">
<a href="index.html"><img src="images/logo.jpg" /></a>
</div>
<!---nav开始---->
<div class="daohang">
<div id="nav">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="jianjie.html">守望简介</a></li>
<li><a href="yingxiong.html">经典英雄</a></li>
<li><a href="lianxi.html">联系我们</a></li>
<li><a href="huiyuan.html">会员登录</a></li>
</ul>
</div>
</div>
<!---nav结束---->
<!-----banner------->
<div class="banner">
<img src="images/banner.jpg" alt="">
</div>
<!-----头部结束------->
<!-----main开始------->
<div class="main">
<div class="sleft">
<div class="stitle">
<p>守望先锋简介</p>
</div>
<img src="images/left-img.jpg" />
</div>
<div class="sright">
<div class="sbox1">
<div class="wen">
<h1>游戏背景</h1>
<p> 21世纪20年代初，人类设计了由人工智能创造的智能机械（简称为智械），其旨在加强生产和创造世界经济繁荣。然而，令人难以置信的事情发生了，智械变得充满恶意，并开始大量生产军用机器人试图毁灭人类。各国政府未能阻止智能机械的进攻，因此联合国创建了一个国际维和组织，以反抗智能机械。汇集全世界最优秀最精英的组织被命名为"守望先锋"，其将围绕机器人军队展开一场实力不对称的战争。</p>
</div>
<img src="images/ri01.jpg" />
</div>
<div class="sbox2">
<img src="images/ri02.jpg" />
<div class="wen">
<h1>物品道具</h1>
<p>随着玩家不断完成一场又一场的比赛 ，无论输赢玩家都会获得经验值并升级。每次升级之后，玩家都将获得一份补给，其中包括最多4件外观装饰物品或游戏内货币，物品品质被分为白色、蓝色、紫色和金色四种。当玩家完成了一些特殊成就后将获得成就点数以及特殊的成就徽章。玩家可以在成就页面查看玩家的成就以及徽章信息，同时也可以了解玩家自己的玩法和技能水平。玩家可以通过主菜单的浏览生涯概况选项和玩家的朋友分享这些成就，特殊的成就用于解锁特定的物品。</p>
</div>
</div>
</div>
</div>
<!-----main结束------->
<!-----bottom开始------->
<div class="bottom">
<div class=" daoh">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="jianjie.html">守望简介</a></li>
<li><a href="yingxiong.html">经典英雄</a></li>
<li><a href="lianxi.html">联系我们</a></li>
<li><a href="huiyuan.html">会员登录</a></li>
</ul>
</div>
<img src="images/logo2.jpg" />
</div>
<!-----bottom结束------->
</body>
</html>
🏠CSS样式代码
@charset "utf-8";
/* CSS Document */
body {
margin: 0 auto;
font-size: 12px;
font-family: "宋体",arial;
line-height: 22px;
}
.lianxi p {
color: #141414;
height: 40px;
line-height: 40px;
}
.content {
width: 100%;
text-align: center;
height: auto;
overflow: hidden;
margin: 10px 0px;
}
.zhuce {
width: 590px;
height: auto;
overflow: hidden;
margin: 0 auto;
}
.one {
margin: 10px 0
}
.one label {
width: 100px;
float: left;
text-align: right;
height: 20px;
line-height: 40px
}
.one input {
border: 1px solid #ccc;
height: 20px
}
.two {
padding-left: 100px
}
.reda {
color: red
}
.a2 {
width: 100px;
margin-left: 5px;
padding: 2px;
background: #ccc
}
.error {
background: #ccc url(../images/error.gif) no-repeat;
padding-left: 25px;
padding-right: 3px
}
.righta {
background: #ccc url(../images/righta.gif) no-repeat;
padding-left: 25px;
padding-right: 3px
}
.btn {
background: #ffb72f;
width: 50px;
border: none;
padding: 3px;
color: #fff;
}
/*---bottom结束-----*/
.bottom {
width: 1366px;
margin: 0 auto;
margin-top: 20px;
height: 143px;
background: #000000;
}
.bottom img {
float: right;
margin-right: 20px;
margin-top: 20px;
}
.bottom .daoh {
color: #111111;
width: 700px;
float: left;
height: 50px;
margin-top: 50px;
}
.bottom .daoh ul {
padding:0px;
}
.bottom .daoh ul li {
width: 100px;
height: 50px;
float: left;
font-size: 18px;
line-height: 50px;
background: url(../images/jiange.png) right no-repeat;
text-align: center;
}
.bottom .daoh ul li a {
color: #ebba20;
}
/*---bottom结束-----*/
