1 Introduction
Designing end-of-course assignments, nowhere to start course design, too many total web page requirements? Don't have a suitable template? Database, java, python, vue, html jobs are complex and the workload is too large? Bi She has no clue and a series of questions. All the problems you want to solve will be solved in the WeChat public account "coding gas station"
2. Introduction of works
The DNF commemorative webpage system is implemented using html and css technology, which conforms to the knowledge system learned and is suitable for common homework and course design. If you need to obtain more works, please pay attention to the WeChat public account: coding gas station, obtain, if you need more For information, you can leave a message in the WeChat background. Everyone is welcome to ask questions and exchange learning.
2.1. Introduction to works
The DNF commemorative webpage system is implemented in a conventional way, which meets most of the requirements. There are relevant documents to explain the code configuration. If you need to learn knowledge points from the code, then this work will be your best choice
2.2. Secondary development tools for works
The code of this work is relatively simple, and it is basically completed using the knowledge points learned in the classroom. You only need to modify the relevant introduction text and some pictures, and you can change it into your own unique code. After downloading the web work, you can use any editing software (for example: DW , HBuilder, NotePAD, Vscode, Sublime, Webstorm all editors can be used).
2.3. Technical introduction of the work
Technical aspects of html webpage works: use CSS to make webpage background images, mouse over and selected navigation color change effects, underline and other related technologies to beautify the relevant interface, and some use javascript for verification. Use html5, css3 and other related technologies to complete the technical layout. In this work, common layouts, common floating layouts, and flex layouts will be used. At the same time, html5 and css3 are used in terms of operation, and basic knowledge such as div+css structure, form, hyperlink, floating, absolute positioning, relative positioning, font style, and reference video are used, and some js related knowledge is also used. For example, dom and bom are used to obtain relevant APIs of the browser, and css is used to beautify the style to make the interface more in line with web design
3. Demonstration of works
[coding gas station] HTML design--dnf commemorative design
3.1. Homepage
Relevant code:
<!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. Career introduction
Relevant code:
<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. Character introduction
Relevant code:
<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">Summarize
The above is the whole content of this project. If you need to communicate or get the code, please pay attention to the WeChat public account: coding gas station, get