100字范文 > HTML期末学生大作业响应式动漫网页作业 html+css+javascript (1)

HTML期末学生大作业响应式动漫网页作业 html+css+javascript (1)

时间：2024-05-03 10:05:24

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

📂文章目录

二、📚网站介绍三、🔗网站效果▶️1.视频演示🧩 2.图片演示四、💒 网站代码🧱HTML结构代码🏠CSS样式代码五、🎁更多源码

二、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。

其中：

（1）📜html文件包含：其中index.html是首页、其他html为二级页面；

（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；

（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

三、🔗网站效果

▶️1.视频演示

A31XY 影视动漫资讯bootstrap网页(9页)

🧩 2.图片演示

四、💒 网站代码

🧱HTML结构代码

<!DOCTYPE html><html lang="zxx"><head><meta charset="UTF-8"><meta name="description" content="Anime Template"><meta name="keywords" content="Anime, unica, creative, html"><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="css/bootstrap.min.css" type="text/css"><link rel="stylesheet" href="css/font-awesome.min.css" type="text/css"><link rel="stylesheet" href="css/elegant-icons.css" type="text/css"><link rel="stylesheet" href="css/plyr.css" type="text/css"><link rel="stylesheet" href="css/nice-select.css" type="text/css"><link rel="stylesheet" href="css/owl.carousel.min.css" type="text/css"><link rel="stylesheet" href="css/slicknav.min.css" type="text/css"><link rel="stylesheet" href="css/style.css" type="text/css"></head><body><div id="preloder"><div class="loader"></div></div><header class="header"><div class="container"><div class="row"><div class="col-lg-2"><div class="header__logo"><a href="./index.html"><img src="img/logo.png" alt=""></a></div></div><div class="col-lg-8"><div class="header__nav"><nav class="header__menu mobile-menu"><ul><li class="积极的"><a href="./index.html">主页</a></li><li><a href="./categories.html">类别 <span class="arrow_carrot-down"></span></a><ul class="dropdown"><li><a href="./categories.html">类别</a></li><li><a href="./anime-details.html">动漫细节</a></li><li><a href="./anime-watching.html">看动漫</a></li><li><a href="./blog-details.html">博客详情</a></li><li><a href="./signup.html">注册</a></li><li><a href="./login.html">登录</a></li></ul></li><li><a href="./blog.html">我们的博客</a></li><li><a >联络</a></li></ul></nav></div></div><div class="col-lg-2"><div class="header__right"><a class="search-switch"><span class="icon_search"></span></a><a href="./login.html"><span class="icon_profile"></span></a></div></div></div><div id="mobile-menu-wrap"></div></div></header><section class="hero"><div class="container"><div class="hero__slider owl-carousel"><div class="hero__items set-bg" data-setbg="img/hero/hero-1.jpg"><div class="row"><div class="col-lg-6"><div class="hero__text"><div class="label">冒险</div><h2>Fate / Stay Night：无限刀片作品</h2><p>经过30天的环球旅行……</p><a ><span>立即观看</span> <i class="fa fa-angle-right"></i></a></div></div></div></div><div class="hero__items set-bg" data-setbg="img/hero/hero-1.jpg"><div class="row"><div class="col-lg-6"><div class="hero__text"><div class="label">冒险</div><h2>Fate / Stay Night：无限刀片作品</h2><p>经过30天的环球旅行……</p><a ><span>立即观看</span> <i class="fa fa-angle-right"></i></a></div></div></div></div><div class="hero__items set-bg" data-setbg="img/hero/hero-1.jpg"><div class="row"><div class="col-lg-6"><div class="hero__text"><div class="label">冒险</div><h2>Fate / Stay Night：无限刀片作品</h2><p>经过30天的环球旅行……</p><a ><span>立即观看</span> <i class="fa fa-angle-right"></i></a></div></div></div></div></div></div></section><section class="product spad"><div class="container"><div class="row"><div class="col-lg-8"><div class="trending__product"><div class="row"><div class="col-lg-8 col-md-8 col-sm-8"><div class="section-title"><h4>现在趋势</h4></div></div><div class="col-lg-4 col-md-4 col-sm-4"><div class="btn__all"><a class="primary-btn">查看全部 <span class="arrow_right"></span></a></div></div></div><div class="row"><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/trending/trend-1.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >七大罪：众神之怒</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/trending/trend-2.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >Gintama Film 2: Kanketsu-hen --Yorozuya yo Eien</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/trending/trend-3.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >Shingeki no Kyojin Season 3 Part 2</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/trending/trend-4.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >钢之炼金术师：兄弟会</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/trending/trend-5.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >白鸟泽学园公园</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/trending/trend-6.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >Code Geass：Hangyaku的鲁路修R2</a></h5></div></div></div></div></div><div class="popular__product"><div class="row"><div class="col-lg-8 col-md-8 col-sm-8"><div class="section-title"><h4>热门节目</h4></div></div><div class="col-lg-4 col-md-4 col-sm-4"><div class="btn__all"><a class="primary-btn">查看全部 <span class="arrow_right"></span></a></div></div></div><div class="row"><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/popular/popular-1.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >千寻之神觉</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/popular/popular-2.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >Kizumonogatari III: Reiket su-hen</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/popular/popular-3.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >Shirogane Tamashii hen Kouhan sen</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/popular/popular-4.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >浪客剑心：明治剑阁罗曼丹</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/popular/popular-5.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >Mushishi Zoku Shou 第二季</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/popular/popular-6.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >物语系列：第二季</a></h5></div></div></div></div></div><div class="recent__product"><div class="row"><div class="col-lg-8 col-md-8 col-sm-8"><div class="section-title"><h4>最近添加的节目</h4></div></div><div class="col-lg-4 col-md-4 col-sm-4"><div class="btn__all"><a class="primary-btn">查看全部 <span class="arrow_right"></span></a></div></div></div><div class="row"><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/recent/recent-1.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >鬼冢老师</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/recent/recent-2.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >命运/留夜电影：天堂的感觉 - II. 丢失</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/recent/recent-3.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >Mushishi Zoku Shou: 铃之雫</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/recent/recent-4.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >命运/零第二季</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/recent/recent-5.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >Kizumonogatari II: Nekket su-hen</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/recent/recent-6.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >七大罪：众神之怒</a></h5></div></div></div></div></div><div class="live__product"><div class="row"><div class="col-lg-8 col-md-8 col-sm-8"><div class="section-title"><h4>现场录制</h4></div></div><div class="col-lg-4 col-md-4 col-sm-4"><div class="btn__all"><a class="primary-btn">查看全部 <span class="arrow_right"></span></a></div></div></div><div class="row"><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/live/live-1.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >昭和元禄落语新宿</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/live/live-2.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >Mushishi Zoku Shou 第二季</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/live/live-3.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >Mushishi Zoku Shou: 铃之雫</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/live/live-4.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >七大罪：众神之怒</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/live/live-5.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >命运/留夜电影：天堂的感觉 - II. 丢失</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/live/live-6.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >Kizumonogatari II：Nekketsu-hen</a></h5></div></div></div></div></div></div><div class="col-lg-4 col-md-6 col-sm-8"><div class="product__sidebar"><div class="product__sidebar__view"><div class="section-title"><h5>顶视图</h5></div><ul class="filter__controls"><li class="积极的" data-filter="*">日</li><li data-filter=".week">星期</li><li data-filter=".month">月</li><li data-filter=".years">年</li></ul><div class="filter__gallery"><div class="product__sidebar__view__item set-bg mix day years"data-setbg="img/sidebar/tv-1.jpg"><div class="ep">18 / ?</div><div class="view"><i class="fa fa-eye"></i> 9141</div><h5><a>博人：火影忍者的下一代</a></h5></div><div class="product__sidebar__view__item set-bg mix month week"data-setbg="img/sidebar/tv-2.jpg"><div class="ep">18 / ?</div><div class="view"><i class="fa fa-eye"></i> 9141</div><h5><a>七大罪：众神之怒</a></h5></div><div class="product__sidebar__view__item set-bg mix week years"data-setbg="img/sidebar/tv-3.jpg"><div class="ep">18 / ?</div><div class="view"><i class="fa fa-eye"></i> 9141</div><h5><a>刀剑神域黑道战</a></h5></div><div class="product__sidebar__view__item set-bg mix years month"data-setbg="img/sidebar/tv-4.jpg"><div class="ep">18 / ?</div><div class="view"><i class="fa fa-eye"></i> 9141</div><h5><a>Fate/stay night: Heaven's Feel I. 预兆之花</a></h5></div><div class="product__sidebar__view__item set-bg mix day"data-setbg="img/sidebar/tv-5.jpg"><div class="ep">18 / ?</div><div class="view"><i class="fa fa-eye"></i> 9141</div><h5><a>命运之夜无限之刃作品</a></h5></div></div></div><div class="product__sidebar__comment"><div class="section-title"><h5>New Comment</h5></div><div class="product__sidebar__comment__item"><div class="product__sidebar__comment__item__pic"><img src="img/sidebar/comment-1.jpg" alt=""></div><div class="product__sidebar__comment__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >The Seven Deadly Sins: Wrath of the Gods</a></h5><span><i class="fa fa-eye"></i> 19.141 Viewes</span></div></div><div class="product__sidebar__comment"><div class="section-title"><h5>新评论</h5></div><div class="product__sidebar__comment__item"><div class="product__sidebar__comment__item__pic"><img src="img/sidebar/comment-1.jpg" alt=""></div><div class="product__sidebar__comment__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a>七大罪：众神之怒</a></h5><span><i class="fa fa-eye"></i> 9.141 次观看</span></div></div><div class="product__sidebar__comment__item"><div class="product__sidebar__comment__item__pic"><img src="img/sidebar/comment-2.jpg" alt=""></div><div class="product__sidebar__comment__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a>Shirogane Tamashii hen Kouhan sen</a></h5><span><i class="fa fa-eye"></i> 9.141 次观看</span></div></div><div class="product__sidebar__comment__item"><div class="product__sidebar__comment__item__pic"><img src="img/sidebar/comment-3.jpg" alt=""></div><div class="product__sidebar__comment__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a>Kizumonogatari III: Reiket su-hen</a></h5><span><i class="fa fa-eye"></i> 9.141 次观看</span></div></div><div class="product__sidebar__comment__item"><div class="product__sidebar__comment__item__pic"><img src="img/sidebar/comment-4.jpg" alt=""></div><div class="product__sidebar__comment__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a>物语系列：第二季</a></h5><span><i class="fa fa-eye"></i> 9.141 次观看</span></div></div></div></div></div></div></div></section><footer class="footer"><div class="page-up"><a id="scrollToTopButton"><span class="arrow_carrot-up"></span></a></div><div class="container"><div class="row"><div class="col-lg-3"><div class="footer__logo"><a href="./index.html"><img src="img/logo.png" alt=""></a></div></div><div class="col-lg-6"><div class="footer__nav"><ul><li class="active"><a href="./index.html">主页</a></li><li><a href="./categories.html"> 类别</a></li><li><a href="./blog.html">我们的博客</a></li><li><a > 联系人</a></li></ul></div></div><div class="col-lg-3"><p>版权所有 © 保留所有权利 | 这个模板是用由Colorlib<i class="fa fa-heart" aria-hidden="true"></i> by <a target="_blank">Colorlib</a></p></div></div></div></footer><div class="search-model"><div class="h-100 d-flex align-items-center justify-content-center"><div class="search-close-switch"><i class="icon_close"></i></div><form class="search-model-form"><input type="text" id="search-input" placeholder="Search here....."></form></div></div><script src="js/jquery-3.3.1.min.js"></script><script src="js/bootstrap.min.js"></script><script src="js/player.js"></script><script src="js/jquery.nice-select.min.js"></script><script src="js/mixitup.min.js"></script><script src="js/jquery.slicknav.js"></script><script src="js/owl.carousel.min.js"></script><script src="js/main.js"></script></body></html>

🏠CSS样式代码

h1 {font-size: 70px;}h2 {font-size: 36px;}h3 {font-size: 30px;}h4 {font-size: 24px;}h5 {font-size: 18px;}h6 {font-size: 16px;}p {font-size: 15px;font-family: "Mulish", sans-serif;color: #3d3d3d;font-weight: 400;line-height: 25px;margin: 0 0 15px 0;}img {max-width: 100%;}input:focus,select:focus,button:focus,textarea:focus {outline: none;}a:hover,a:focus {text-decoration: none;outline: none;color: #ffffff;}ul,ol {padding: 0;margin: 0;}/*---------------------Helper CSS-----------------------*/.section-title {margin-bottom: 30px;}.section-title h4,.section-title h5 {color: #ffffff;font-weight: 600;line-height: 21px;text-transform: uppercase;padding-left: 20px;position: relative;font-family: "Oswald", sans-serif;}.section-title h4:after,.section-title h5:after {position: absolute;left: 0;top: -6px;height: 32px;width: 4px;background: #e53637;content: "";}.set-bg {background-repeat: no-repeat;background-size: cover;background-position: top center;}