1、引言
设计结课作业,课程设计无处下手，网页要求的总数量太多？没有合适的模板？数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“coding加油站”中全部会得到解决
2、作品介绍
DNF纪念网页系统采用html，css技术来实现，符合所学知识体系，适用于常见的作业以及课程设计，需要获取更多的作品，请关注微信公众号：coding加油站，回复“毒奶粉”免费获取，如需更多资料，可在微信后台留言。欢迎大家来提问，交流学习。
2.1、作品简介方面
DNF纪念网页系统采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选
2.2、作品二次开发工具
此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）。
2.3、作品技术介绍
html网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面，部分采用了javascript来做校验。 使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。同时在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识，同时使用了一些js的相关知识。例如使用到了dom，和bom来获取浏览器的相关api，同时使用css对样式进行相关的美化，使得界面更加符合网页设计
3、作品演示
【coding加油站】HTML设计--dnf纪念设计
3.1、首页
相关代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>首页</title>
<link href="bootstrap-4.0.0-dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="131/css/animate.min.css"/>
<link rel="stylesheet" href="jQueryUI/css/jquery.fullPage.css">
<style>
.section { text-align: center; font: 74px "Microsoft Yahei"; color: #00000;}
.section2 p { position: relative; left: -120%;}
.section3 p { position: relative; bottom: -120%;}
.section4 p { display: none;}
</style>
<style>
.section1 { background: url(images/玛尔公国.jpg) ;}
</style>
<!--<script src="js/jquery-1.8.3.min.js"></script>-->
<script src="131/js/wow.min.js"></script>
<script src="jQueryUI/js/jquery-3.3.1.min.js"></script>
<script src="jQueryUI/js/jquery.fullPage.js"></script>
<script src="jQueryUI/js/jquery-ui.js"></script>
<script>
$(function(){
$('#dowebok').fullpage();
});
</script>
</head>
<body>
<div id="dowebok" >
<div class="section section1" >
<div class="row"style="text-align: center;z-index: -1;">
<div class="col-md-4 wow rollIn " style="padding-left: 50px;">
<img src="images/动漫人物/格斗家.png " width="260px" />
</div>
<div class="col-md-4 ">
<p class="wow fadeInUpBig animated" >十周年</p>
<p class="wow fadeInUpBig animated" >感谢有你</p>
<a class="wow fadeInUpBig btn btn-outline-info btn-lg" href="apostle.html">进入</a>
</div>
<div class=" col-md-4 wow lightSpeedIn">
<img src="images/动漫人物/女枪.png " width="240px"/>
</div>
</div>
</div>
</div>
</body>
</html>3.2、职业介绍
相关代码：
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<img src="images/logo.png" width="78" height="54" class="d-inline-block align-top" >
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item ">
<a class="nav-link" href="tenYears.html">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="apostle.html">使徒介绍</a>
</li>
<li class="nav-item">
<a class="nav-link" href="professional.html">职业介绍</a>
</li>
<li class="nav-item">
<a class="nav-link" href="shopping.html">周边商城</a>
</li>
<li class="nav-item">
<a class="nav-link" href="music.html">音乐欣赏</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<button class="btn btn-outline-info my-2 my-sm-0" data-toggle="modal" data-target="#myModal1" >登录</button>
<button class="btn btn-outline-info my-2 my-sm-0" data-toggle="modal" data-target="#myModal2" >注册</button>
</form>
</div>
</nav>
<div class="container">
<div class="row"><!-- 鬼剑士 -->
<div class="col-md-3 a" data-toggle="modal" data-target="#myModal1"><img src="images/职业/guiqi.jpg"></div>
<div class="col-md-3 a" data-toggle="modal" data-target="#myModal2"><img src="images/职业/xiuluo.jpg"></div>
<div class="col-md-3 a" data-toggle="modal" data-target="#myModal3"><img src="images/职业/jianhun.jpg"></div>
<div class="col-md-3 a" data-toggle="modal" data-target="#myModal4"><img src="images/职业/hongyan.jpg"></div>
</div>
<div class="row"><!-- 神枪手 -->
<div class="col-md-3 a" data-toggle="modal" data-target="#myModal5"><img src="images/职业/danyao.jpg"></div>
<div class="col-md-3 a" data-toggle="modal" data-target="#myModal6"><img src="images/职业/jiexie.jpg"></div>
<div class="col-md-3 a" data-toggle="modal" data-target="#myModal7"><img src="images/职业/daqiang.jpg"></div>
<div class="col-md-3 a" data-toggle="modal" data-target="#myModal8"><img src="images/职业/manyou.jpg"></div>
</div>
<div class="row"><!-- 女枪 -->
<div class="col-md-3 a" data-toggle="modal" data-target="#myModal9"><img src="images/职业/nvdanyao.jpg"></div>
<div class="col-md-3 a" data-toggle="modal" data-target="#myModal10"><img src="images/职业/nvdaqiang.jpg"></div>
<div class="col-md-3 a" data-toggle="modal" data-target="#myModal11"><img src="images/职业/nvjixie.jpg"></div>
<div class="col-md-3 a" data-toggle="modal" data-target="#myModal12"><img src="images/职业/nvmanyou.jpg"></div>
</div>
<div class="row"><!-- 格斗家 -->
<div class="col-md-3 a" data-toggle="modal" data-target="#myModal13"><img src="images/职业/qigong.jpg"></div>
<div class="col-md-3 a" data-toggle="modal" data-target="#myModal14"><img src="images/职业/wushen.jpg"></div>
<div class="col-md-3 a" data-toggle="modal" data-target="#myModal15"><img src="images/职业/roudao.jpg"></div>
<div class="col-md-3 a" data-toggle="modal" data-target="#myModal16"><img src="images/职业/duwang.jpg"></div>
</div>
<div class="row"><!--暗夜使者 -->
<div class="col-md-3 a" data-toggle="modal" data-target="#myModal17"><img src="images/职业/cike.jpg"></div>
<div class="col-md-3 a" data-toggle="modal" data-target="#myModal18"><img src="images/职业/renzhe.jpg"></div>
<div class="col-md-3 a" data-toggle="modal" data-target="#myModal19"><img src="images/职业/yingwuzhe.jpg"></div>
<div class="col-md-3 a" data-toggle="modal" data-target="#myModal20"><img src="images/职业/silin.jpg"></div>
</div>
<div class="row"><!--魔法师 -->
<div class="col-md-3 a" data-toggle="modal" data-target="#myModal21"><img src="images/职业/modao.jpg"></div>
<div class="col-md-3 a" data-toggle="modal" data-target="#myModal22"><img src="images/职业/lifa.jpg"></div>
<div class="col-md-3 a" data-toggle="modal" data-target="#myModal23"><img src="images/职业/zhaohuan.jpg"></div>
<div class="col-md-3 a" data-toggle="modal" data-target="#myModal24"><img src="images/职业/yuansu.jpg"></div>
</div>
<div class="container mt-3">
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header"><!--关闭按钮 -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
<div id="accordion" role="tablist">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
黑暗君主
</a>
</h5>
</div>
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
<div class="card-body">
“能否将命运的铁链揭开，完全在于自身的意志。”如果把缠绕在臂上的铁链松开，鬼神便会自由的行动，所以一部分鬼剑士会扔掉铁链成为鬼泣。巧妙的利用鬼神会对战斗有利。神官吉格将刀魂卡赞、冥炎卡洛、冰霜萨亚 、侵蚀普戾蒙等鬼神的使用方法传播给了鬼泣。鬼泣最终也不乐观。吉格在与野蛮人战斗中多次被雷击，失去了对付鬼神的技能，最后被鬼神们埋在了地下。
<img src="images/动态GIF图/黑暗君主二觉动图.gif" width="100%" height="100%">
</div>
</div>
</div>
</div>
<div class="modal-footer"><!--foot 关闭 -->
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div><!-- 黑暗君主-->
<div class="container mt-3">
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header"><!--关闭按钮 -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div role="tablist">
<div class="card">
<div class="card-header" role="tab" >
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
天帝
</a>
</h5>
</div>
<div class="collapse show" role="tabpanel" aria-labelledby="headingOne">
<div class="card-body">
“眼睛虽已长眠，但只要心脏不停，我的身体就是我的眼睛。”一些鬼剑士为了能感触到波动，而放弃了眼睛。失去双目后，为了加强近距离战斗力，向铁匠打造板甲护甲提高自身的防御力。失去五感中的一感的他，向赫顿玛尔后院里的G.S.D习得了感知气流的功能，通过气流判断出敌人所在位置。剩下的就是踏入战场的战神之路。
<img src="images/动态GIF图/天帝二觉动图.gif" width="100%" height="100%">
</div>
</div>
</div>
</div>
<div class="modal-footer"><!--foot 关闭 -->
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div><!--剑圣-->
3.3、人物介绍
相关代码：
<div id="dowebok">
<div class="section">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark top" >
<img src="images/logo.png" width="78" height="54" class="d-inline-block align-top" >
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item ">
<a class="nav-link" href="tenYears.html">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="apostle.html">使徒介绍</a>
</li>
<li class="nav-item">
<a class="nav-link" href="professional.html">职业介绍</a>
</li>
<li class="nav-item">
<a class="nav-link" href="shopping.html">周边商城</a>
</li>
<li class="nav-item">
<a class="nav-link" href="music.html">音乐欣赏</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<button class="btn btn-outline-info my-2 my-sm-0" data-toggle="modal" data-target="#myModal1" >登录</button>
<button class="btn btn-outline-info my-2 my-sm-0" data-toggle="modal" data-target="#myModal2" >注册</button>
</form>
</div>
</nav>
<div class="text_word">
<img src="images/使徒/01.png"/>
<div class="text_t">
<br></br>
<br></br>
<p class="text">拥有至高能力的魔界之王。
居住在魔界协会广场，在以强者为尊的魔界中，他是当之无愧的第一强者。
据说他的体力和力量已经强大到几乎不会被任何物质和手段破坏，“极强”可以说是最适合他的词。
虽然他是魔界实力最强的强者，但是除了自己的居住地，他似乎没有统治其他领域的野心。
</p>
</div>
</div>
<img src="images/使徒/figure1.jpg"/>
</div>
<div class="section">
<div class="text_word">
<img src="images/使徒/02.png"/>
<div class="text_t">总结
以上就是本次项目的全部内容，需要交流或者免费获取代码请关注微信公众号：coding加油站，回复“毒奶粉”免费获取
本文含有隐藏内容，请 开通VIP 后查看