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制作了表单判断（提交时表单不能为空）

文章目录

一、作品演示

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;"> <button
                            data-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期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
在这里插入图片描述
在这里插入图片描述

Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟