HTML5动漫网页设计——少女漫画心(HTML+CSS+JavaScript+Bootstrap)

HTML5期末大作业：动漫网站设计——少女漫画心HTML+CSS+JavaScript+Bootstrap 动漫网页HTML代码学生网页课程设计期末作业下载大学生动漫网页设计成品

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~

原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。

作品介绍

1.网页作品简介方面 ：日语学习网站前端模板，采用HTML+CSS+JavaScript+Bootstrap响应式框架设计。网站自带轮播图特效，背景荧光虫特效，点击打开课程后BGM自启动，带有搜索框及其他模块分栏选项。网站具有响应式布局的媒体自适应功能，可同时在移动端和PC端进行预览。

2.网页作品编辑方面：此作品为学生个人主页网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件(例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用)

3.网页作品布局方面：网页布局整体为LOGO、导航、主体内容布局。子页面多种布局，兴趣爱好内容使用图片列表布局，成绩页面插入了表格，联系我们使用图片对齐方式设置了左对齐。

4.网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。首页制作了留言表单，同时简单使用JavaScript制作了表单判断(提交时表单不能为空)

文章目录

HTML5期末大作业：动漫网站设计——少女漫画心HTML+CSS+JavaScript+Bootstrap 动漫网页HTML代码学生网页课程设计期末作业下载大学生动漫网页设计成品
作品介绍
一、作品演示
- 1.主页(含音乐+多背景切换)
- 2.趣味图文
二、代码目录
三、代码实现
四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
五、源码获取
六、更多HTML期末大作业(成品下载)
- >>>戳我>>>点击进入200例期末大作业作品

一、作品演示

1.主页(含音乐+多背景切换)

2.趣味图文

二、代码目录

三、代码实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>日语学习</title><link rel="stylesheet" href="bootstrap-4.3.1-dist/css/bootstrap.min.css"><link rel="stylesheet" href="index.css"><script src="jquery/jquery.js"></script><style>#titleBigfont {/* font-weight: 600; *//* font-size: 28px; */font-family: "黑体";color: #8c888b;/* background: -webkit-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5); */background: -webkit-linear-gradient(45deg, #1df4ff, #ff844b, #ffdf3c, #8f74df, #78b0ff);-moz-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);-ms-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);color: transparent;/*设置字体颜色透明*/-webkit-background-clip: text;/*背景裁剪为文本形式*/animation: ran 10s linear infinite;/*动态10s展示*/}@keyframes ran {from {backgroud-position: 0 0;}to {background-position: 2000px 0;}}</style>
</head><body><nav class="navbar navbar-expand-lg navbar-light bg-dark"><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03"aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><a class="navbar-brand" style="color: #fff" href="#">日语学习</a><div class="collapse navbar-collapse" id="navbarTogglerDemo03"><ul class="layui-nav" style="background-color:#343a40!important" lay-filter=""><li class="layui-nav-item layui-this"><a href="">主页</a></li><li class="layui-nav-item"><a href="html/interesting.html">趣图趣文</a></li><li class="layui-nav-item"><a id="kok" href="javascript:;">更多</a><dl class="layui-nav-child"><!-- 二级菜单 --><dd><a href="html/culture.html">日本文化</a></dd><dd><a href="html/cartoon.html">动漫语录</a></dd><dd><a href="html/video.html">影视作品</a></dd></dl></li><!-- ()=>{document.getElementById('layerNotice').click()} --><li class="layui-nav-item"><a href="javascript:;" onclick="layuiNotice();">社区</a><div class="site-demo-button" id="layerNotice" style="margin-bottom: 0;"> <buttondata-method="notice" class="layui-btn">示范一个公告层</button></div></li><li class="layui-nav-item" style="margin-top:4px"><form class="form-inline my-2 my-lg-0 nav-form"><input class="form-control mr-sm-2" type="search" plabeholder="大人，您要搜什么(*╹▽╹*)"aria-label="Search"><button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button></form></li></ul></div></nav><!-- 背景满天星 --><div style="position:fixed;width: 100%;height:100%;top:0;z-index: -1"><div id="background" class="wall"></div><div id="midground" class="wall"></div><div id="foreground" class="wall"></div><div id="top" class="wall"></div></div><audio controls autoplay preload="metadata"><source src="asset/media/日语动漫 - Illusionary Daytime.mp3"></audio><!-- 主体开始 --><div class="container"><!-- <div class="row" id="line01"> --><div class="line01_wrap" id="line01"><!-- <div id="titleconText" class="col-xs-12 col-sm-6 col-md-8"> --><div id="titleconText" class="titleconText_wrap"><div class="page-header"><h1 id="titleBigfont">新しい二次元日本語学習の楽園<small></small></h1><!-- <h1 style="background-clip:text;color:#ffffff4b;background-color: rgb(187, 22, 22);">新しい二次元日本語学習の楽園<small></small></h1> --><h4><small>大学日语全部复习资料汇总</small></h4><h3><small>大人，您需要的期末复习资料全部在这里面。</small></h3><h4><small>小的已经给您安排好了</small></h4><h5>麻烦您给点个赞呗</h5><h3><small>谢谢大人关照</small></h3></div></div><!-- <div class="col-xs-6 col-md-4"> --><div class="titleImg_wrap"><div id="titleImg"><img src="asset/img/p1.jpg" alt=""><span id="titleBulletScreen">世の中に苦しみがあれば、岂能敌我Kok!</span></div><span id="randWord">今日も頑張って勉強します。</span></div></div><br><div class="layui-progress"><div id="progressBar" class="layui-progress-bar" lay-percent="0%"></div></div><!-- 内容 --><div class="row" id="line02"><div class="col-xs-6 col-sm-3  col-lg-3 rowDiv"><div class="thumbnail"></div><div class="context"><h3>第一单元</h3><p class="conTextP">当前还没有内容</p><p><a href="#" class="btn btn-success" role="button">了解更多</a></p></div></div><div class="col-xs-6 col-sm-3 col-lg-3 rowDiv"><div class="thumbnail"></div><div class="context"><h3>第二单元</h3><p class="conTextP">当前还没有内容</p><p><a href="#" class="btn btn-success" role="button">了解更多</a></p></div></div><!-- Optional: clear the XS cols if their content doesn't match in height --><div class="clearfix visible-xs-block"></div><div class="col-xs-6 col-sm-3  col-lg-3 rowDiv"><div class="thumbnail"></div><div class="context"><h3>第三单元</h3><p class="conTextP">当前还没有内容</p><p><a href="#" class="btn btn-success" role="button">了解更多</a></p></div></div></div><div><div><div class="row" id="line02"><div class="col-xs-6 col-sm-3 rowDiv"><div class="thumbnail"></div><div class="context"><h3>第四单元</h3><p class="conTextP">当前还没有内容</p><p><a href="#" class="btn btn-success" role="button">了解更多</a></p></div></div><div class="col-xs-6 col-sm-3 rowDiv"><div class="thumbnail"></div><div class="context"><h3>第五单元</h3><p class="conTextP">当前还没有内容</p><p><a href="#" class="btn btn-success" role="button">了解更多</a></p></div></div><!-- Optional: clear the XS cols if their content doesn't match in height --><div class="clearfix visible-xs-block"></div><div class="col-xs-6 col-sm-3 rowDiv"><div class="thumbnail"></div><div class="context"><h3>第六单元</h3><p class="conTextP">当前还没有内容</p><p><a href="#" class="btn btn-success" role="button">了解更多</a></p></div></div></div><hr><div class="row" id="line02"><div class="col-xs-6 col-sm-3 rowDiv"><div class="thumbnail"></div><div class="context"><h3>第七单元</h3><p class="conTextP">当前还没有内容</p><p><a href="#" class="btn btn-success" role="button">了解更多</a></p></div></div><div class="col-xs-6 col-sm-3 rowDiv"><div class="thumbnail"></div><div class="context"><h3>第八单元</h3><p class="conTextP">当前还没有内容</p><p><a href="#" class="btn btn-success" role="button">了解更多</a></p></div></div><!-- Optional: clear the XS cols if their content doesn't match in height --><div class="clearfix visible-xs-block"></div><div class="col-xs-6 col-sm-3 rowDiv"><div class="thumbnail"></div><div class="context"><h3>第九单元</h3><p class="conTextP">当前还没有内容</p><p><a href="#" class="btn btn-success" role="button">了解更多</a></p></div></div></div></div><hr><br><div id="pageNav" style="text-align: center"></div><br><br><fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"><legend>关于我们<i class="layui-icon layui-icon-fabe-smile-fine"></i></legend></fieldset><div class="layui-row layui-col-spabe15"><div class="layui-col-md6"><div class="layui-card"><div class="layui-card-header">关于开发者</div><div class="layui-card-body">前端开发：おうちょう<br> 内容指导：ようよう</div></div></div><div class="layui-col-md6"><div class="layui-card"><div class="layui-card-header">版本信息</div><div class="layui-card-body">网站版本：2019.11.24-v1.0<br> 隶属公司：侵略人类大脑记忆体有限责任公司</div></div></div><div class="layui-col-md12" style="margin-top: 4px;"><div class="layui-card"><div class="layui-card-header">开发初心</div><div class="layui-card-body">要期末考试了，Kok的日语一塌糊涂，借前端技术将自己复习的知识共享给大家，期间感谢ようよう的参与制作,如果本站内容侵犯了您的版权，请及时反馈信息给我们！</div></div></div></div><br><hr><br><!-- 轮播列表 --><div class="layui-carousel" id="test1"><div carousel-item><div><div class="row" id="line03"><div class="col-xs-6 col-sm-3 rowDiv"><div class="thumbnail thumbnail1"></div><div class="context"><h3>进击的巨人</h3><p class="conTextP">18禁，血腥又暴力</p><p><a href="#" class="btn btn-success" role="button">了解更多</a></p></div></div><div class="col-xs-6 col-sm-3 rowDiv"><div class="thumbnail thumbnail2"></div><div class="context"><h3>暂无动漫</h3><p class="conTextP">当前还没有内容</p><p><a href="#" class="btn btn-success" role="button">了解更多</a></p></div></div><!-- Optional: clear the XS cols if their content doesn't match in height --><div class="clearfix visible-xs-block"></div><div class="col-xs-6 col-sm-3 rowDiv"><div class="thumbnail thumbnail3"></div><div class="context"><h3>暂无动漫</h3><p class="conTextP">当前还没有内容</p><p><a href="#" class="btn btn-success" role="button">了解更多</a></p></div></div></div></div><div><div class="row" id="line03"><div class="col-xs-6 col-sm-3 rowDiv"><div class="thumbnail thumbnail4"></div><div class="context"><h3>暂无动漫</h3><p class="conTextP">当前还没有内容</p><p><a href="#" class="btn btn-success" role="button">了解更多</a></p></div></div><div class="col-xs-6 col-sm-3 rowDiv"><div class="thumbnail thumbnail5"></div><div class="context"><h3>暂无动漫</h3><p class="conTextP">当前还没有内容</p><p><a href="#" class="btn btn-success" role="button">了解更多</a></p></div></div><!-- Optional: clear the XS cols if their content doesn't match in height --><div class="clearfix visible-xs-block"></div><div class="col-xs-6 col-sm-3 rowDiv"><div class="thumbnail thumbnail6"></div><div class="context"><h3>暂无动漫</h3><p class="conTextP">当前还没有内容</p><p><a href="#" class="btn btn-success" role="button">了解更多</a></p></div></div></div></div><div><div class="row" id="line03"><div class="col-xs-6 col-sm-3 rowDiv"><div class="thumbnail thumbnail7"></div><div class="context"><h3>暂无动漫</h3><p class="conTextP">当前还没有内容</p><p><a href="#" class="btn btn-success" role="button">了解更多</a></p></div></div><div class="col-xs-6 col-sm-3 rowDiv"><div class="thumbnail thumbnail8"></div><div class="context"><h3>暂无动漫</h3><p class="conTextP">当前还没有内容</p><p><a href="#" class="btn btn-success" role="button">了解更多</a></p></div></div><!-- Optional: clear the XS cols if their content doesn't match in height --><div class="clearfix visible-xs-block"></div><div class="col-xs-6 col-sm-3 rowDiv"><div class="thumbnail thumbnail9"></div><div class="context"><h3>暂无动漫</h3><p class="conTextP">当前还没有内容</p><p><a href="#" class="btn btn-success" role="button">了解更多</a></p></div></div></div></div><div><div class="row" id="line03"><div class="col-xs-6 col-sm-3 rowDiv"><div class="thumbnail thumbnail10"></div><div class="context"><h3>暂无动漫</h3><p class="conTextP">当前还没有内容</p><p><a href="#" class="btn btn-success" role="button">了解更多</a></p></div></div><div class="col-xs-6 col-sm-3 rowDiv"><div class="thumbnail thumbnail11"></div><div class="context"><h3>暂无动漫</h3><p class="conTextP">当前还没有内容</p><p><a href="#" class="btn btn-success" role="button">了解更多</a></p></div></div><!-- Optional: clear the XS cols if their content doesn't match in height --><div class="clearfix visible-xs-block"></div><div class="col-xs-6 col-sm-3 rowDiv"><div class="thumbnail thumbnail12"></div><div class="context"><h3>暂无动漫</h3><p class="conTextP">当前还没有内容</p><p><a href="#" class="btn btn-success" role="button">了解更多</a></p></div></div></div></div><div><div class="row" id="line03"><div class="col-xs-6 col-sm-3 rowDiv"><div class="thumbnail thumbnail13"></div><div class="context"><h3>暂无动漫</h3><p class="conTextP">当前还没有内容</p><p><a href="#" class="btn btn-success" role="button">了解更多</a></p></div></div><div class="col-xs-6 col-sm-3 rowDiv"><div class="thumbnail thumbnail14"></div><div class="context"><h3>暂无动漫</h3><p class="conTextP">当前还没有内容</p><p><a href="#" class="btn btn-success" role="button">了解更多</a></p></div></div><!-- Optional: clear the XS cols if their content doesn't match in height --><div class="clearfix visible-xs-block"></div><div class="col-xs-6 col-sm-3 rowDiv"><div class="thumbnail thumbnail15"></div><div class="context"><h3>暂无动漫</h3><p class="conTextP">当前还没有内容</p><p><a href="#" class="btn btn-success" role="button">了解更多</a></p></div></div></div></div></div></div><br><br><div class="layui-progress layui-progress-big"><div class="layui-progress-bar layui-bg-green" lay-percent="100%"></div></div><br><br><div style="text-align: center;color: rgb(255, 255, 255);font-weight: bolder;">免责声明<hr> 我懒得写了，反正就是有侵权的地方及时告知我们，我们马上删除！</div><br><br></div></div><!-- 返回顶部小人物 --><!-- <button type="button" class="btn btn-default" data-toggle="tooltip" data-plabement="top" title="Tooltip on top">Tooltip on top</button> --><a href="javascript:scroll(0,0)" style="width:60px;height:70px;background-image: url('asset/img/up@1x.png');background-size:100% auto;bottom: 0px;right:0px;position: fixed" data-toggle="tooltip" data-plabement="top" title="点我返回顶部哦！"></a><script src="bootstrap-4.3.1-dist/js/bootstrap.min.js"></script><script src="layui/layui.js"></script><script src="asset/motto/motto.js"></script><script src="index.js"></script></body></html>

四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)

web前端零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站

五、源码获取

❉ ~ 关注我，点赞博文~ 每天带你涨知识!

❉1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。

❉ 2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

❉3.以上内容技术相关问题可以相互学习，可关注↓公Z号 获取更多源码 !

六、更多HTML期末大作业(成品下载)

>>>戳我>>>点击进入200例期末大作业作品

200多例 HTML5期末考核大作业源码 包含 个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!