300字范文 > html静态页面作业——_指环王：护戒使者(13页) TML+CSS+JavaScript 学生DWHTML5网页

html静态页面作业——_指环王：护戒使者(13页) TML+CSS+JavaScript 学生DWHTML5网页

时间：2023-01-31 19:21:32

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><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="line01_wrap" id="line01"><div id="titleconText" class="titleconText_wrap"><div class="page-header"><h1 id="titleBigfont">新しい二次元日本語学習の楽園<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="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><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><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><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">网站版本：.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><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><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><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><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><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><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课程设计网页制作

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。