一、📚作品介绍
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
二、🔗作品效果
▶️视频演示
https://live.csdn.net/v/embed/240072
(title-K18JP-守望先锋带表单页(5页))]
🧩 截图演示
05.png
04.png
03.png
02.png
01.png
三、💒 作品代码
🧱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结束-----*/
四、🎁更多源码
【干货分享】自学编程的小伙伴可以前往我的 gitee 仓库（持续更新中...）
📕【web学习指南】从web基础、计算机基础到前端常用框架的教程，涵盖前端大部分必备知识（学习指南 + 技术文章 + 资源分享）
