564. 海贼王动漫主题网页大学生期末大作业 Web前端网页制作 html5+css

一、网页概述

二、网页文件

三、网页效果

欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！

说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！

奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！

我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！

非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！

一、网页概述

本实例应用html5+css，div+css布局，代码简单，带设计报告。适用于大学生网页课程作业设计；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页共包含9个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>海贼王</title>
<style type="text/css">
@import"修饰.css";
</style>
</head>
<body>
<p style="text-align: center;">
<img src="素材/顶部长图.jpg" width="80%" height="300px" border="1">
</p>
<table style="color: white;" width = "80%" height = "50%" border = "1" cellspacing = "0" align = "center" >
<tr>
       <th bgcolor="DarkRed">
<a href="网站首页.html " style="color: white;" class="abc">网站首页</a>
</th>
<th bgcolor="DarkRed">
<a href="TV版目录.html " style="color: white;" class="abc">TV版目录</a>
</th>
<th bgcolor="DarkRed">
<a href="角色资料.html " style="color: white;" class="abc">角色资料</a>
</th>
<th bgcolor="DarkRed">
<a href="精选壁纸.html " style="color: white;" class="abc">精选壁纸</a>
</th>
           <th bgcolor="DarkRed">
<a href="衍生作品.html " style="color: white;" class="abc">衍生作品</a>
</th>
<th bgcolor="DarkRed">
<a href="果实大全.html " style="color: white;" class="abc">果实大全</a>
</th>
           <th bgcolor="DarkRed">
<a href="海贼论坛.html " style="color: white;" class="abc">海贼论坛</a>
</th>
<th bgcolor="DarkRed">
<a href="关于我们.html " style="color: white;" class="abc">关于我们</a>
</th>
</tr>
</table>
<div class="div11"><font color="white" size="7">海贼王</font></div>

<p class="p" style="font-size: 20px; color:white">
<img src="素材/首页.jpg" width = "30%" height = "50%" class="img"></img>
  基本简介
<br></br>
    《海贼王》是日本漫画家尾田荣一郎的作品，描述的是一个名叫路飞的少年想成为海贼王，
因误食了香克斯收藏的恶魔果实，变成了橡胶人的故事。恶魔果实使路飞永远不能游泳，
但他始终没有改变成为海贼王的理想“找到传说中哥尔•D•罗杰的秘宝，并且成为海贼王”开始了冒险之旅。
<br></br><br></br>
  剧情简介
<br></br>
    财富、名声、权力，曾经拥有世界上一切的“海贼王”哥尔·D·罗杰，在临死前留下了一句话，
让全世界的人们，趋之若鹜，奔向大海：“想要我的财宝吗？想要的话可以给你，去伟大的航道找吧！
我把一切都放在那里了！”于是所有的人们开始起航，趋之若鹜的奔向大海，世界迎来了“大海贼时代”
</p>
<div class="div12"></div>

<br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br>
<br></br><br></br><br></br>

<div class="div12"><font color="white" size="7">原声资料</font></div>
<br></br><br></br>
<div class="div12"><font color="white" size="5">OP 片头曲</font></div>
<br></br>
<table style="color: white;" width = "80%" height = "50%" border = "1" cellspacing = "0" align = "center" >
<tr>
       <th bgcolor="DarkRed">序号</th>
           <th bgcolor="DarkRed">集数</th>
           <th bgcolor="DarkRed">歌名</th>
           <th bgcolor="DarkRed">主唱</th>
       </tr>

<tr>
       <td>OP1</td>
           <td>1～47</td>
           <td>ウィーアー!（WE ARE！）</td>
<td>北谷洋</td>
</tr>

<tr>
       <td>OP2</td>
           <td>48～115</td>
           <td>Believe</td>
<td>Folder5</td>
</tr>

<tr>
       <td>OP3</td>
           <td>116～168</td>
           <td>ヒカリヘ（向着阳光)</td>
<td>The Babystars</td>
</tr>

<tr>
       <td>OP4</td>
           <td>169～206</td>
           <td>BON VOYAGE!（一路顺风)</td>
<td>BON-BON BLANCO </td>
</tr>

<tr>
       <td>OP5</td>
           <td>207～263</td>
           <td>ココロのちず（心之航海图)</td>
<td>BOYSTYLE </td>
</tr>

<tr>
       <td>OP6</td>
           <td>264～278</td>
           <td>BRAND NEW WORLD</td>
<td>D-51 </td>
</tr>

...

2.CSS

代码如下（节选示例）：

body
{
background-image: url("素材/背景.jpg");
background-size: 100%;
background-attachment: fixed;
}

.abc{text-decoration: none;}

.p
{
width: 1240px;
position: absolute;
left: 140px;
top: 440px;
}

.p2
{
width: 800px;
position: absolute;
left: 140px;
top: 440px;
}

.img
{
float:left;
margin:0px 0px 15px 20px;
}

.div11
{
position: absolute;
left: 160px;
top: 390px;
}

.div12
{
position: absolute;
left: 160px;
}

.div21
{
position: absolute;
left: 160px;
}

.img21
{
position: absolute;
left: 160px;
top: 800px;
}

.p3 {
width: 1240px;
height: 800px;
position: absolute;
left: 140px;
top: 440px;
}
.img3 {
float:left;
margin:0px 0px 15px 20px;
}

.p32 {
width: 1240px;
height: 800px;
position: absolute;
left: 140px;
top: 900px;
}
.img32 {
float:left;
margin:0px 0px 15px 20px;
}

.p33 {
width: 1240px;
height: 800px;
position: absolute;
left: 140px;
top: 1360px;
}
.img33 {
float:left;
margin:0px 0px 15px 20px;
}

.p34 {
width: 1240px;
height: 800px;
position: absolute;
left: 140px;
top: 1820px;
}
.img34 {
float:left;
margin:0px 0px 15px 20px;
}

.p35 {
width: 1240px;
height: 800px;
position: absolute;
left: 140px;
top: 2280px;
}
.img35 {
float:left;
margin:0px 0px 15px 20px;
}

.p36 {
width: 1240px;
height: 800px;
position: absolute;
left: 140px;
top: 2740px;
}
.img36 {
float:left;
margin:0px 0px 15px 20px;
}

.a31
{
position: absolute;
left: 160px;
top: 3220px;
text-decoration: none;
}

...

五、总结

设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:

1.简洁实用

尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；

2.使用方便

要满足使用者的要求，网页适合使用，显示出其功能美；

3.整体性好

围绕一个统一的目标设计，强调整体的功能性；

4.形象突出

尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。

5.交互式强

发挥网络的优势，想方设法使每个使用者都参与到其中来。

六、更多推荐

【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!

您的支持是我创作的动力！看到这里就【点赞收藏博文】，Thanks！

更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。