web网页设计期末课程大作业——海贼王大学生HTML网页 ...

至天使 · 发表于 2022-12-30 16:57:51

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

<hr/>⚽精彩专栏推荐
❤ 【作者主页—— 获取更多优质源码】 ❤ 【web前端期末大作业—— 毕设项目精品实战案例(1000套)】
<hr/>@TOC
一、网页介绍

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。
2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。
<hr/>一、网页效果

在这里插入图片描述

在这里插入图片描述

<hr/>二、代码展示

<hr/>1.HTML代码结构

代码如下（示例）：以下仅展示部分代码供参考~
<!doctype html>
<html>
<head>
<meta charset=&#34;utf-8&#34;>
<title>海贼王网站</title>
<style type=&#34;text/css&#34;>
.one{
position:relative;
}
form{
float:right;
margin-right:600px;
margin-top:52px;
}
.one1{
position:absolute;
left:15px;
top:275px;
}
.two{
position:relative;
color:#FFF;
z-index:100;
}
.two1{
position:absolute;
left:300px;
top:5px;
font-size:32px;

}
a{margin-right:140px;}
a:link{color:#FFF;
text-decoration:none;
}
a:hover{text-decoration:underline;}
.four{
height:400px;
width:1600px;
background-color:#FC3;
position:relative;
}
.four1{
left:40px;
position:absolute;
top:10px;
text-align:center;
}
.four2{
left:350px;
top:100px;
position:absolute;
font-size:28px;
}
.five{
position:relative;
height:380px;
width:1600px;
background-color:#FF9;
}
.five1{
position:absolute;
left:20px;
top:20px;
}
.five2{
position:absolute;
left:380px;
top:20px;
}
.five3{
position:absolute;
left:740px;
top:20px;
}

#back-to-top{ position: fixed; bottom: 50px; right: 30px; }
#address{text-align:center;
background-color:#39F;
height:70px;
margin-top:-15px;
width:1600px;
}

</script>
<style>
BODY {
HEIGHT: 3600px;
}
#goTopBtn {
POSITION: fixed; TEXT-ALIGN: center; LINE-HEIGHT: 30px; WIDTH: 30px; BOTTOM: 35px; HEIGHT: 33px; FONT-SIZE: 12px; CURSOR: pointer; RIGHT: 0px; _position: absolute; _right: auto
}
</style>
</head>

<body>
<div class=&#34;one&#34;>
<img src=&#34;images/8776e28880fbc8f50dd3e488f996e0df(1).jpeg&#34; width=&#34;1600px&#34; height=&#34;350px&#34;>
<div class=&#34;one1&#34;><img src=&#34;images/QQ截图20220223233202.png&#34; width=&#34;510px&#34; height=&#34;75px&#34;>
<form>
  <input type=&#34;text&#34; name=&#34;keywords&#34; placeholder=&#34;搜索海贼王人物&#34;/><input type=&#34;submit&#34; value=&#34;提交&#34;/>
</form>
<a href=&#34;登陆页面.html&#34; class=&#34;oneoneone&#34;>登录</a>

</div>
</div>
<div class=&#34;two&#34;>
<img src=&#34;images/QQ截图20220224163705.jpg&#34; width=&#34;1600px&#34; height=&#34;75px&#34;>
<p class=&#34;two1&#34;>
<a href=&#34;网站首页.html&#34;>网站首页</a>

<a href=&#34;故事简介.html&#34;>故事简介</a>

<a href=&#34;主要人物.html&#34;>主要人物</a>
<a href=&#34;登陆页面.html&#34;>登陆页面</a>
</p>
</div>
<div class=&#34;three&#34;>
<img src=&#34;images/src=http___img.jj20.com_up_allimg_1113_011520104U2_200115104U2-2-1200.jpg&refer=http___img.jj20.jfif&#34; width=&#34;1600px&#34; height=&#34;900px&#34;>
</div>
<div class=&#34;four&#34;>
<div class=&#34;four1&#34;><h2>路飞以及小伙伴</h2>
<img src=&#34;images/b3119313b07eca806909878381ba57dba04483e1.jpeg&#34; width=&#34;280px&#34; height=&#34;320px&#34;>
</div>
<div class=&#34;four2&#34;>
拥有财富、名声、权力，这世界上的一切的男人 “海贼王”哥尔·D·罗杰，在被行刑受死之前说了一句话，让全世界的人都涌向了大海。“想要我的宝藏吗？如果想要的话，那就到海上去找吧，我全部都放在那里。”，世界开始迎接“大海贼时代”的来临。
时值“大海贼时代”，为了寻找传说中海贼王罗杰所留下的大秘宝“ONE PIECE”，无数海贼扬起旗帜，互相争斗。
<hr>有一个梦想成为海盗的少年叫路飞，他因误食“恶魔果实”而成为了橡皮人，在获得超人能力的同时付出了一辈子无法游泳的代价。十年后，路飞为实现与因救他而断臂的香克斯的约定而出海，他在旅途中不断寻找志同道合的伙伴，开始了以成为海贼王为目标的伟大的冒险旅程。
</div>
</div>
<div class=&#34;five&#34;>
<div class=&#34;five1&#34;><img src=&#34;images/src=http___pic1.win4000.com_pic_4_31_ed6f1496442.jpg&refer=http___pic1.win4000.jfif&#34; height=&#34;350px&#34; width=&#34;300px&#34;></div>
<div class=&#34;five2&#34;><img src=&#34;images/500fd9f9d72a6059d89484422b34349b023bbae6.jpg&#34; height=&#34;350px&#34; width=&#34;300px&#34;></div>
<div class=&#34;five3&#34;>
<video src=&#34;video/share_5288d6e0dba50e25c4673fa65c5357c2.mp4&#34; height=&#34;350px&#34; width=&#34;800px&#34; controls autoplay loop>video标签</video>
</div>
</div>
<div id=&#34;address&#34;>
<p>版权所有&copy;xxx xxx&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;地址：xxx&nbsp;&nbsp;&nbsp;&nbsp;邮编：xxx&nbsp;&nbsp;&nbsp;&nbsp;<a href=&#34;https://beian.miit.gov.cn&#34;>冀ICP备17021198号</a></p>
<div style=&#34;height: 3000px;&#34;></div>
<div id=&#34;back-to-top&#34;>
<a href=&#34;#top&#34; rel=&#34;external nofollow&#34; >返回顶部</a>
</div>
<script src=&#34;http://libs.baidu.com/jquery/2.0.0/jquery.js&#34;></script>
<script type=&#34;text/javascript&#34;>
$(document).ready(function(){
  //首先将#back-to-top隐藏
  $(&#34;#back-to-top&#34;).hide();
  //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
  $(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){
$(&#34;#back-to-top&#34;).fadeIn(100);
}
else
{
$(&#34;#back-to-top&#34;).fadeOut(100);
}
});
//当点击跳转链接后，回到页面顶部位置
$(&#34;#back-to-top&#34;).click(function(){
$(&#39;body,html&#39;).animate({scrollTop:0},&#34;speed&#34;);
return false;
});
});
});
</script>
</body>
</html><hr/>三、个人总结

一套合格的网页应该包含(具体可根据个人要求而定) 1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分； 2. 所有页面相互超链接，可到三级页面，有5-10个页面组成； 3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术； 4. 菜单美观、醒目，二级菜单可正常弹出与跳转； 5. 要有JS特效，如定时切换和手动切换图片新闻； 6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用； 7. 页面清爽、美观、大方，不雷同。
8. 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
<hr/>四、更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “ 点赞” “✍️评论” “ 收藏”一键三连哦！
2.❤️【关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！
3.以上内容技术相关问题欢迎一起交流学习【主页—— 获取更多优质源码】

英子李 · 发表于 2025-5-15 14:57:06

支持支持再支持