目录
一、网页简介
二、网页文件
三、网页效果
四、代码展示
1.html
2.CSS
五、总结
1.简洁实用
2.使用方便
3.整体性好
4.形象突出
5.交互式强
欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：
仙女网页设计-CSDN博客
5000+网页案例完整代码，主题涵盖30+种类型:
一、网页简介
本实例应用html5+css3，div+css布局，代码精简，适用于大学生网页课程作业设计。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共包含5个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.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>
...
2.CSS
代码如下（节选示例）：
@charset "utf-8";
/* CSS Document */
body {
margin: 0 auto;
font-size: 12px;
font-family: "宋体",arial;
line-height: 22px;
}
div,p,input,ul,li,h1,h2,h3,h4,h5,h6,dl,dt,dd {
height: auto;
margin: 0;
; padding: 0;
vertical-align: middle;
}
li {
list-style: none;
}
img {
border: 0;
margin: 0;
padding: 0;
}
a {
color: #333;
text-decoration: none;
}
a:link {
color: #333;
}
a:hover {
color: #629705;
text-decoration: none;
overflow: hidden;
}
/*---网页开始-----*/
/*---top开始-----*/
.top {
height: 110px;
width: 1366px;
margin: 0 auto;
text-align: center;
}
.ban {
height: 224px;
width: 1366px;
margin: 0 auto;
margin-bottom: 10px;
}
/*---top结束-----*/
/*---导航----*/
.daohang {
width: 1366px;
height: 50px;
margin: 0 auto;
background: #000000;
}
#nav {
width: 1170px;
height: 50px;
line-height: 50px;
font-family: "微软雅黑";
margin: 0 auto;
}
#nav ul {
margin: 0 auto;
}
#nav li {
float: left;
width: 230px;
text-align: center;
color: #FFF;
}
#nav a {
width: 230px;
height: 50px;
display: block;
font-size: 24px;
float: left;
color: #ebba20;
text-align: center;
}
.banner {
width: 1366px;
height: 400px;
margin: 0 auto;
margin-bottom: 10px;
}
.main {
width: 1366px;
min-height: 590px;
height: auto;
overflow: hidden;
margin: 0 auto;
}
.sleft {
width: 380px;
height: 570px;
float: left;
margin-right: 15px;
}
.sleft .stitle {
width: 370px;
padding-left: 10px;
height: 76px;
padding-top: 20px;
background: #f8f8f8;
margin-bottom: 5px;
}
.sleft .stitle p {
font-size: 18px;
color: #3c3c3c;
}
.sright {
width: 921px;
padding: 25px;
height: 540px;
float: left;
background: #f8f8f8
}
.sright .box1 {
width: 921px;
height: 250px;
}
.sright .box1 img {
width: 440px;
height: 248px;
float: right;
margin-left: 30px;
}
.sbox1 .wen {
width: 450px;
float: left;
margin-right: 20px;
}
.sbox1 h1 {
color: #3c3c3c;
font-size: 24px;
width: 100%;
margin-bottom: 20px;
}
.sbox1 p {
display: block;
font-size: 16px;
width: 100%;
line-height: 27px;
}
.sright .sbox2 {
width: 921px;
height: 257px;
margin-top: 30px;
}
.sright .sbox2 img {
width: 447px;
height: 253px;
float: left;
margin-right: 30px;
}
.sbox2 .wen {
width: 440px;
float: left;
}
.sbox2 h1 {
color: #3c3c3c;
font-size: 24px;
width: 100%;
margin-bottom: 20px;
}
.sbox2 p {
display: block;
font-size: 16px;
width: 100%;
line-height: 27px;
}
.left {
width: 380px;
height: 570px;
float: left;
margin-right: 15px;
}
.left .title {
width: 370px;
padding-left: 10px;
height: 56px;
padding-top: 40px;
background: #f8f8f8;
margin-bottom: 5px;
}
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
仙女网页设计-CSDN博客
Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流👇🏻👇🏻👇🏻
