如何制作网页web前端大作业——毕设项目精品实战案例(1000套)

UI设计师 2022-11-28 大咖案例 402 0

❤ 【作者主页—— 获取更多优质源码】 ❤ 【web前端期末大作业—— 毕设项目精品实战案例(1000套)】

@TOC

一、网页介绍

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

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

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

一、网页效果

在这里插入图片描述

二、代码展示 1.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>版权所有©xxx xxx  p>
<p>                        地址：xxx    邮编：xxx    <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>

三、个人总结

一套合格的网页应该包含(具体可根据个人要求而定) 1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分； 2. 所有页面相互超链接，可到三级页面，有5-10个页面组成； 3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术； 4. 菜单美观、醒目，二级菜单可正常弹出与跳转； 5. 要有JS特效，如定时切换和手动切换图片新闻； 6. 页面中有多媒体元素，如gif、视频、音乐如何制作网页，表单技术的使用； 7. 页面清爽、美观、大方，不雷同。

8. 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

四、更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “ 点赞” “✍️评论” “ 收藏”一键三连哦！

2.❤️【关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者如何制作网页，一起探讨前端 Node 知识，互相学习」！

3.以上内容技术相关问题欢迎一起交流学习【主页—— 获取更多优质源码】