web网页设计期末课程大作业——海贼王大学生HTML网页制作 HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计网页规划与设计

本文链接：https://blog.csdn.net/qq_3200628753/article/details/126217336

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

⚽精彩专栏推荐👇🏻👇🏻👇🏻

❤ 【作者主页——🔥获取更多优质源码】

❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】

❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】

一、网页介绍📖

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果🌌

在这里插入图片描述

二、代码展示😈

1.HTML代码结构 🧱

代码如下（示例）：以下仅展示部分代码供参考~

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>海贼王网站</title>
<style type="text/css">
.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="one">
<img src="images/8776e28880fbc8f50dd3e488f996e0df(1).jpeg" width="1600px" height="350px">
<div class="one1"><img src="images/QQ截图20220223233202.png" width="510px" height="75px">
<form>
  <input type="text" name="keywords" placeholder="搜索海贼王人物"/><input type="submit" value="提交"/>
</form>
<a href="登陆页面.html" class="oneoneone">登录</a>

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


<a href="故事简介.html">故事简介</a>

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