【HTML】HTML网页设计----毒奶粉纪念网页设计
2024-06-30 15:15:37
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="data: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="data:images/动漫人物/女枪.png " width="240px"/></div></div></div></div></body>
</html>3.2、职业介绍
相关代码：
<nav class="navbar navbar-expand-md navbar-dark bg-dark"><img src="data: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="data:images/职业/guiqi.jpg"></div><div class="col-md-3 a" data-toggle="modal" data-target="#myModal2"><img src="data:images/职业/xiuluo.jpg"></div><div class="col-md-3 a" data-toggle="modal" data-target="#myModal3"><img src="data:images/职业/jianhun.jpg"></div><div class="col-md-3 a" data-toggle="modal" data-target="#myModal4"><img src="data:images/职业/hongyan.jpg"></div></div><div class="row"><!-- 神枪手 --><div class="col-md-3 a" data-toggle="modal" data-target="#myModal5"><img src="data:images/职业/danyao.jpg"></div><div class="col-md-3 a" data-toggle="modal" data-target="#myModal6"><img src="data:images/职业/jiexie.jpg"></div><div class="col-md-3 a" data-toggle="modal" data-target="#myModal7"><img src="data:images/职业/daqiang.jpg"></div><div class="col-md-3 a" data-toggle="modal" data-target="#myModal8"><img src="data:images/职业/manyou.jpg"></div></div> <div class="row"><!-- 女枪 --><div class="col-md-3 a" data-toggle="modal" data-target="#myModal9"><img src="data:images/职业/nvdanyao.jpg"></div><div class="col-md-3 a" data-toggle="modal" data-target="#myModal10"><img src="data:images/职业/nvdaqiang.jpg"></div><div class="col-md-3 a" data-toggle="modal" data-target="#myModal11"><img src="data:images/职业/nvjixie.jpg"></div><div class="col-md-3 a" data-toggle="modal" data-target="#myModal12"><img src="data:images/职业/nvmanyou.jpg"></div></div> <div class="row"><!-- 格斗家 --><div class="col-md-3 a" data-toggle="modal" data-target="#myModal13"><img src="data:images/职业/qigong.jpg"></div><div class="col-md-3 a" data-toggle="modal" data-target="#myModal14"><img src="data:images/职业/wushen.jpg"></div><div class="col-md-3 a" data-toggle="modal" data-target="#myModal15"><img src="data:images/职业/roudao.jpg"></div><div class="col-md-3 a" data-toggle="modal" data-target="#myModal16"><img src="data:images/职业/duwang.jpg"></div></div><div class="row"><!--暗夜使者 --><div class="col-md-3 a" data-toggle="modal" data-target="#myModal17"><img src="data:images/职业/cike.jpg"></div><div class="col-md-3 a" data-toggle="modal" data-target="#myModal18"><img src="data:images/职业/renzhe.jpg"></div><div class="col-md-3 a" data-toggle="modal" data-target="#myModal19"><img src="data:images/职业/yingwuzhe.jpg"></div><div class="col-md-3 a" data-toggle="modal" data-target="#myModal20"><img src="data:images/职业/silin.jpg"></div></div> <div class="row"><!--魔法师 --><div class="col-md-3 a" data-toggle="modal" data-target="#myModal21"><img src="data:images/职业/modao.jpg"></div><div class="col-md-3 a" data-toggle="modal" data-target="#myModal22"><img src="data:images/职业/lifa.jpg"></div><div class="col-md-3 a" data-toggle="modal" data-target="#myModal23"><img src="data:images/职业/zhaohuan.jpg"></div><div class="col-md-3 a" data-toggle="modal" data-target="#myModal24"><img src="data: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="data: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="data: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="data: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="data:images/使徒/01.png"/><div class="text_t"><br></br><br></br><p class="text">拥有至高能力的魔界之王。居住在魔界协会广场，在以强者为尊的魔界中，他是当之无愧的第一强者。据说他的体力和力量已经强大到几乎不会被任何物质和手段破坏，“极强”可以说是最适合他的词。虽然他是魔界实力最强的强者，但是除了自己的居住地，他似乎没有统治其他领域的野心。</p> </div></div><img src="data:images/使徒/figure1.jpg"/></div><div class="section"><div class="text_word"><img src="data:images/使徒/02.png"/><div class="text_t">总结
以上就是本次项目的全部内容，需要交流或者获取代码请关注微信公众号：coding加油站，获取
【HTML】HTML网页设计----毒奶粉纪念网页设计相关推荐
- HTML5期末大作业：中国传统节日网页设计——端午节(9个页面) HTML+CSS+JavaScript 节日网页HTML代码 学生网页课程设计期末作业下载...
HTML5期末大作业:中国传统节日网站设计--端午节(9个页面) HTML+CSS+JavaScript 节日网页HTML代码 学生网页课程设计期末作业下载 临近期末, 你还在为HTML网页设计结课作 ...
- HTML5期末大作业：中国传统节日网页设计——端午节(9个页面) HTML+CSS+JavaScript 节日网页HTML代码 学生网页课程设计期末作业下载
HTML5期末大作业:中国传统节日网站设计--端午节(9个页面) HTML+CSS+JavaScript 节日网页HTML代码 学生网页课程设计期末作业下载 临近期末, 你还在为HTML网页设计结课作 ...
- 学生网页作业 榆林子州网站设计—榆林子州-含论文(6页) 榆林子州旅游网页HTML代码 学生网页设计与制作期末作业下载 大学生网页设计与制作成品下载 DW旅行网页作业
HTML5期末大作业:榆林子州网站设计--榆林子州-含论文(6页) 榆林子州旅游网页HTML代码 学生网页设计与制作期末作业下载 大学生网页设计与制作成品下载 DW旅行网页作业 常见网页设计作业题材有 ...
- hikvision v2.3控件网页demo_昆山UI网页设计师专业培训班 UI设计好就业吗？
昆山UI网页设计师专业培训班 UI设计好就业吗? 昆山UI网页设计师专业培训班 UI设计好就业吗? 交互设计师在工作中的沟通场景 在整个产品生命周期中,交互设计师的工作流程始终贯穿着整个过程,首要问题 ...
- 自适应网页设计/响应式Web设计 （Responsive Web Design）
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...
- 设计灵感|如何做好网页后台数据展示的设计？
一个完整的后台界面通常由导航.数据展示.表格.组件以及弹窗等部分组成,在视觉上确定了整体布局以后,还要考虑好各个部分的交互逻辑,才能获得更好的易用性. 由集设网 www.ijishe.com 设计师交 ...
- Web前端设计与开发课程设计：简易淘宝网页设计
实验日期:2022-09-23 (一)大作业要求 综合运用所学知识,完成一个Web前端项目.内容和功能不做具体限定,主题可以是商业公司网站.学校网站或电商网站等. 技术要求: 掌握HTML5的基本结构 ...
- web课程设计网页规划与设计 ：旅游景点网站设计——西安(20页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 HTML静态网页作业
HTML5期末大作业:旅游景点网站设计--西安(20页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材有 ...
- 19HTML5期末大作业：动画漫影视网站设计——动画漫展学习资料电影模板(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 课程设计网页规划与设计 计算机毕设网页设计源
HTML5期末大作业:动画漫影视网站设计--动画漫展学习资料电影模板(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常 ...
最新文章
- mysql字段默认值不生效的问题解决（上）
- php过滤数据库就报错,php过滤掉emoji等无法存入MySQL数据库的字符简单示例
- 加固工程验收规范50550_石家庄栾城县厂房梁柱加固施工队规范作业-建筑加固
- Android 新闻客户端
- ajax php 投票,PHP 实例 AJAX 投票
- 怎么画韦布尔分布_手机按键寿命测试的样本数量怎么定？一文看懂 简述威布尔分布及其应用...
- linux测试手柄,Linux Joystick 介绍
- ASP.NET的内置对象
- 如何卸载mysql5.6.28_如何完全删除MySQL以进行全新安装
- html++hint标签,html5新标签总结
- 教师资格证考试攻略（高中信息技术）
- 电脑连上网，可是软件、谷歌等浏览器都显示未连接到互联网。远程计算机设备将不受连接，两个解决方法。
- 如果你的开发板上STM32采用外部晶振，那么就不能选择BYPASS Clock Source （旁路时钟源）模式，否则STM32将会工作不正常。
- 用友YonBuilder标准版培训课程资源
- 服务器响应302是什么意思,HTTP 状态中的 301 和 302 是什么意思？二者有何不同？...
- 可恢复保险丝的内部结构
- 360Vulcan团队再获微软致谢 协助修复Edge及IE漏洞
- 致诸弟·明师益友虚心请教
- OSI七层网络、TCP/IP五层网络架构、二层/三层网络
- Java object转string