HTML5期末大作业:影视网站设计——"指环王：护戒使者(13页) TML+CSS+JavaScript

文章目录

HTML5期末大作业:影视网站设计——"指环王：护戒使者(13页) TML+CSS+JavaScript
一、作品展示
二、文件目录
三、代码实现

一、作品展示

二、文件目录

三、代码实现


<!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="layui/css/layui.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>

html静态页面作业——_指环王：护戒使者(13页) TML+CSS+JavaScript 学生DWHTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作相关推荐

HTML5期末大作业_影视网站设计——_指环王：护戒使者(13页) TML+CSS+JavaScript 学生DWHTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作
HTML5期末大作业:影视网站设计--"指环王:护戒使者(13页) TML+CSS+JavaScript 学生DWHTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作常 ...
HTML5期末大作业:影视网站设计——“指环王：护戒使者(13页) TML+CSS+JavaScript 学生DWHTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作
HTML5期末大作业:影视网站设计--"指环王:护戒使者(13页) TML+CSS+JavaScript 学生DWHTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作常 ...
HTML学生个人网站作业设计：电影网站设计——指环王-护戒使者(8页) HTML+CSS+JavaScript 简单DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
一.作品介绍 1.作品简介 :html期末大作业,dw学生网页设计作业, A+水平 ,喜欢的可以下载,文章页支持手机PC响应式布局. 2.作品编辑:作品下载后可使用任意HTML编辑软件(如:Dream ...
HTML5期末大作业：电影网站设计——指环王：护戒使者(13页) HTML+CSS+JavaScript
HTML5期末大作业:电影网站设计--指环王:护戒使者(13页) HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品大学生毕设网页设计 ...
24HTML5期末大作业：XXX 网站设计——指环王：护戒使者(13页) HTML+CSS+JavaScript HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程网页规
HTML5期末大作业:XXX 网站设计--指环王:护戒使者(13页) HTML+CSS+JavaScript HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计网页规划 ...
HTML5期末大作业：XXX 网站设计——指环王：护戒使者(13页) HTML+CSS+JavaScript HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计网页规
HTML5期末大作业:XXX 网站设计--指环王:护戒使者(13页) HTML+CSS+JavaScript HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计网页规划 ...
HTML5期末大作业：鲜花超市网站设计——鲜花超市(4页) HTML+CSS+JavaScript HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作
HTML5期末大作业:鲜花超市网站设计--鲜花超市(4页) HTML+CSS+JavaScript HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作作品介绍 1.网页作品简介 ...
期末作业成品代码——红色的婚庆(18页) HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作
HTML5期末大作业:婚庆网站设计--红色的婚庆(18页) HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电 ...
HTML5期末大作业：婚庆网站设计——红色的婚庆(18页) HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作
HTML5期末大作业:婚庆网站设计--红色的婚庆(18页) HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电 ...

html静态页面作业——_指环王：护戒使者(13页) TML+CSS+JavaScript 学生DWHTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作

HTML5期末大作业:影视网站设计——"指环王：护戒使者(13页) TML+CSS+JavaScript

文章目录

一、作品展示

二、文件目录

三、代码实现

html静态页面作业——_指环王：护戒使者(13页) TML+CSS+JavaScript 学生DWHTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作相关推荐

最新文章

热门文章