目录
欢迎来到我的优快云主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：
5000+网页案例完整代码，主题涵盖30+种类型:
一、网页简介
本实例应用html+css，div+css布局，代码简单。适用于大学生网页课程作业设计。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共包含6个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>欢迎来到海贼王基地，喜欢海贼王的朋友都可以来我们网站参观</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<center>
<div class="top">
<div id="page">
<!--欢迎开始-->
<div class="huanying">
<p>您好，欢迎来到海贼王基地！</p>
<span><a href="jieshao.html" >海贼王介绍</a> </span>
</div>
<!--欢迎结束-->
<!--头部开始-->
<div class="head">
<div class="headA"><img src="images/flashA.jpg" width="700" height="120" /></div>
<div class="headB">
</div>
</div>
<!--头部结束-->
<div class="clearit"></div>
<div class="hSpace10"></div>
<!--中部开始-->
<div class="content">
<!--左部分开始-->
<div class="content_l">
<ul>
<li><a href="index.html">海贼王首页</a></li>
<li><a href="jieshao.html">漫画简介</a></li>
<li><a href="zuozhe.html">作者介绍</a></li>
<li><a href="juese.html">漫画角色介绍</a></li>
<li><a href="xinwen.html">最近新闻</a></li>
<li><a href="tupian.html">漫画赏析</a></li>
</ul>
<div class="hSpace10"></div>
<div class="zuo"><img src="images/zuo.jpg" /></div>
</div>
<!--左部分结束-->
<!--右部分开始-->
<div class="content_r">
<!--左尾部开始-->
<div class="l_weibu">
<!--介绍开始-->
<div class="jieshao">
<div class="jieshaoA">
<h4>漫画简介</h4>
</div>
<div class="clearit"></div>
<p> 《one piece》（中译《海贼王》/海盗路飞）是尾田荣一郎在《周刊少年JUMP》上连载的漫画。“ONE PIECE”在故事中为“一个大秘宝”之意。传说中‘海贼王’哥尔·D·罗杰在死前说出他留下了具有财富、名声、力量世界第一的宝藏“ONE PIECE”，许多人为了争夺“ONE PIECE”，争相出海，许多海贼开始树立霸权，而形成了“大海贼时代”。十年后，蒙其·D·路飞为了要实现与因救他而断臂的四皇‘红发’香克斯的约定而出海，在遥远的路途上找寻着志同道合的伙伴，一起进入“伟大航道”，目标：当上“海贼王”。
</p>
<p> 故事讲述了主人公路飞立志成为海盗王，为了寻找传说中的秘宝ONE PIECE而展开的凶险无比同时也波澜壮阔的冒险故事。草帽小子路飞带领船员从东海启程经伟大航道到新世界，一路历经各种艰难挫折，不断朝伟大航路的终点站迈进。</p>
</div>
<!--介绍结束-->
</div>
<!--左尾部结束-->
<!--右尾部开始-->
<div class="r_weibu">
<!--动态开始-->
<div class="hSpace5"></div>
<div class="xundao">
<img src="images/xundao.jpg" />
</div>
<!--动态结束-->
<div class="hSpace5"></div>
<!--介绍开始-->
<div class="mingxing">
<div class="jieshaoA">
<h4>最近新闻</h4>
</div>
<div class="clearit"></div>
<ul>
<li><a href="xinwen.html"> [新闻] 艾斯不死之理由!!</a></li>
<li><a href="xinwen.html"> [新闻] 收集各集的细节分析第十人</a></li>
<li><a href="xinwen.html"> [新闻] 海贼645话分析 鱼人岛和诺亚的命运</a></li>
<li><a href="xinwen.html"> [新闻] 奇功绝技之Hancoke</a></li>
<li><a href="xinwen.html"> [新闻] 草帽物语丨OP644：鱼人岛黑暗面的吞噬</a></li>
</ul>
</div>
<!--介绍结束-->
</div>
<!--右尾部结束-->
<div class="hSpace10"></div>
<!--推荐开始-->
<div class="tuijian">
<div class="tuijianA">
<h4>漫画赏析</h4>
</div>
<div class="tuijianB">
<a href="images/tu1.jpg" target="_blank"><img src="images/tu1.jpg" border="0" /></a>
<a href="images/tu2.jpg" target="_blank"><img src="images/tu2.jpg" border="0" /></a>
<a href="images/tu3.jpg" target="_blank"><img src="images/tu3.jpg" border="0" /></a>
<a href="images/tu4.jpg" target="_blank"><img src="images/tu4.jpg" border="0" /></a>
</marquee>
<div class="clearit"></div>
</div>
</div>
<!--推荐结束-->
</div>
<!--右部分结束-->
<div class="clearit"></div>
<div class="hSpace10"></div>
<div class="adA">
<img src="images/adB.jpg" />
</div>
<div class="hSpace10"></div>
<div class="hSpace10"></div>
</div>
<!--中部结束-->
</div>
</div>
</center>
</body>
</html>
...
2.CSS
代码如下（节选示例）：
/* CSS Document */
body,
ul,
ol,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
table,
td,
img,
div {
margin: 0;
padding: 0;
border: 0;
}
* {
margin: 0;
padding: 0;
border: 0;
}
body {
font-family: "宋体";
font-size: 12px;
color: #000000;
line-height: 20px;
text-align: left;
background: #2b020a;
}
td,
th {
font-family: "宋体";
font-size: 12px;
color: #000000;
}
a {
color: #000000;
}
A:link {
TEXT-DECORATION: none;
}
A:visited {
TEXT-DECORATION: none;
}
A:hover {
text-decoration: underline;
}
ul,
li {
list-style-type: none;
}
li a:hover {
text-decoration: underline;
}
object {
margin: 0;
padding: 0;
border: 0;
}
.clearit {
clear: both;
}
.hSpace1 {
height: 1px;
line-height: 1px;
overflow: hidden;
clear: both;
}
.hSpace5 {
height: 5px;
line-height: 5px;
overflow: hidden;
clear: both;
}
.hSpace10 {
height: 10px;
line-height: 10px;
overflow: hidden;
clear: both;
}
.hSpace5F {
height: 5px;
line-height: 5px;
background: #FFFFFF;
overflow: hidden;
clear: both;
}
.p5 {
padding: 5px;
}
.borderU {
border-right: 1px solid #75819e;
border-left: 1px solid #75819e;
border-bottom: 1px solid #75819e;
}
.borderU_p5 {
border-right: 1px solid #75819e;
border-left: 1px solid #75819e;
border-bottom: 1px solid #75819e;
padding: 5px;
}
.borderH {
border-right: 1px solid #75819e;
border-left: 1px solid #75819e;
}
.borderH_p5 {
border-right: 1px solid #75819e;
border-left: 1px solid #75819e;
padding: 5px;
}
.line_X {
background: url("images/lineX.gif") repeat-x;
overflow: hidden;
line-height: 1px;
}
#page {
width: 970px;
margin: 0 auto;
background: #d9d9d9
}
.top {
width: 100%;
padding-top: 300px;
background: url("images/top.jpg") no-repeat top center;
}
.head {
width: 970px;
margin: 0 auto;
}
.headA {
width: 700px;
height: 120px;
float: left;
}
.headB {
width: 270px;
height: 120px;
float: left;
background: url("images/headB.jpg") no-repeat;
}
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流👇🏻👇🏻👇🏻
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
