HTML静态网页成品作业(HTML+CSS+JS)——动漫斗罗大陆介绍网页(3个页面)

🎉不定期分享源码,关注不丢失哦

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • HTML部分代码
  • 五、源码获取


一、作品介绍

🏷️本套采用HTML+CSS,使用Javacsript代码实现图片轮播和tab切换,共有3个页面

二、作品演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="./css/style.css">
</head>
<body><style></style><div id="wrapper"><header><img src="./image/logo.png" alt=""></header><nav><a href="index.html">动漫首页</a><a href="juese.html">动漫角色</a><a href="tuji.html">动漫图集</a></nav><section class="banner"><img data-index="1" src="./image/banner1.jpeg" class="active" alt=""><img data-index="2" src="./image/banner2.jpg" alt=""><img data-index="3" src="./image/banner3.jpeg" alt=""></section><main><dl class="box"><dt>动漫简介</dt><dd><img src="./image/jj.png" style="float: right;margin-left: 10px;" alt="" width="400"><p>网络动画《斗罗大陆》改编自中国作家唐家三少原作的同名玄幻小说,由企鹅影视、玄机科技联合出品。于2018120日起每周六10:00在腾讯视频独家正版更新。 于2018年腾讯视频星光盛典荣获年度国漫荣誉。</p><p>唐门外门弟子唐三,因偷学内门绝学为唐门所不容,跳崖明志时却发现没有死,反而以另外一个身份来到了另一个世界,一个属于武魂的世界,名叫斗罗大陆。这里没有魔法,没有斗气,没有武术,却有神奇的武魂。这里的每个人,在自己六岁的时候,都会在武魂殿中令武魂觉醒。武魂有动物,有植物,有器物,武魂可以辅助人们的日常生活。而其中一些特别出色的武魂却可以用来修炼并进行战斗,这个职业,是斗罗大陆上最为强大也是最荣耀的职业“魂师”。</p><p>小小的唐三在圣魂村开始了他的魂师修炼之路,并萌生了振兴唐门的梦想。当唐门暗器来到斗罗大陆,当唐三武魂觉醒,他能否在这片武魂的世界再铸唐门的辉煌……</p></dd></dl><div class="line"></div><dl class="box"><dt>动漫评价</dt><dd><p>场面宏大,特效满满,唐门场景和斗罗大陆场景让人惊艳,有可能是迄今为止网文改动漫与翻拍电视剧里最有还原度的场景,将文字中描绘的宏大设定完美的用画面展现出来。</p><p>动作戏精致,山间追逐过程中的几大绝学的展现都有着细致刻画,躲避暗器的动态和镜头追逐也可以看出来制作方下了很大心意。</p><p>还原度,动画把原文中重要的内容几乎一分不拉地保留了下来,同时对一些原文描绘不够深入的地方增加了原创内容(唐门长老从小说里的一言不发变成了一路追一路感叹天才,唐三掉下去后和二长老的争执也让这场开幕戏没更加自然地过渡了下来)</p><img src="./image/pj.png" width="100%" alt=""></dd></dl></main><footer>斗罗大陆 版权所有</footer></div><script src="./js/script.js"></script>
</body>
</html>

五、源码获取

🥇 ~ 关注我,点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙2.想要获取本文源码,点击前往吧

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/32016.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

24年安克创新社招入职自适应能力cata测评真题分享北森测评高频题库

第一部分&#xff1a;安克创新自适应能力cata测评 感谢您关注安克创新社会招聘&#xff0c;期待与您一起弘扬中国智造之美。 为对您做出全面的评估&#xff0c;现诚邀您参加我们的在线测评。 测评名称&#xff1a;社招-安克创新自适应能力cata测评 第二部分&#xff1a;安克…

福建聚鼎:装饰画现在做起来难吗

在当代社会&#xff0c;艺术创作已经成为很多人表达自我、追求美学生活的方式之一。装饰画作为家居装饰的重要元素&#xff0c;也受到了越来越多人的喜爱。但做一个优质的装饰画真的容易吗? 从技术层面讲&#xff0c;随着科技的发展&#xff0c;制作装饰画的手段和材料都比以往…

【因果推断python】50_去偏/正交机器学习2

目录 Frisch-Waugh-Lovell on Steroids CATE Estimation with Double-ML Frisch-Waugh-Lovell on Steroids 双重/偏差 ML 其思想非常简单&#xff1a;在构建结果和治疗残差时使用 ML 模型&#xff1a; 是估计&#xff0c;是估计 我们的想法是&#xff0c;ML 模型具有超强的…

Red Hat Ansible Automation Platform架构

目录 示例架构&#xff1a;一、Ansible Automation Platform 实现流程详解1. 自动化控制器 (Automation Controller)2. 自动化网格 (Automation Mesh)3. 私有自动化中心 (Private Automation Hub)4. Event-Driven Ansible 控制器5. 数据存储 (PostgreSQL 数据库) 二、实现流程1…

力扣SQL 即时食物配送 II min函数 嵌套查询

Problem: 1174. 即时食物配送 II &#x1f468;‍&#x1f3eb; 参考题解 Code -- 计算立即配送的订单百分比 select round (-- 计算订单日期与客户偏好配送日期相同的订单数量sum(case when order_date customer_pref_delivery_date then 1 else 0 end) * 100 /-- 计算总订…

基于深度学习的图像识别技术与应用是如何?

基于深度学习的图像识别技术与应用在当今社会中扮演着越来越重要的角色。以下是对该技术与应用的详细解析&#xff1a; 一、技术原理 深度学习是一种模拟人脑处理和解析数据的方式的技术和方法论。在图像识别领域&#xff0c;深度学习主要通过深度神经网络&#xff08;如卷积…

CentOS7在2024.6.30停止维护后,可替代的Linux操作系统

背景 Linux的发行版本可以大体分为两类&#xff0c;一类是商业公司维护的发行版本&#xff0c;一类是社区组织维护的发行版本&#xff0c;前者以著名的Redhat&#xff08;RHEL&#xff09;为代表&#xff0c;后者以Debian为代表。国内占有率最多的却是Centos&#xff0c;这是由…

最全信息收集工具集

吉祥学安全知识星球&#x1f517;除了包含技术干货&#xff1a;Java代码审计、web安全、应急响应等&#xff0c;还包含了安全中常见的售前护网案例、售前方案、ppt等&#xff0c;同时也有面向学生的网络安全面试、护网面试等。 所有的攻防、渗透第一步肯定是信息收集了&#xf…

CID引流电商助力3C产品销售腾飞的实践与思考

摘要&#xff1a;随着互联网技术的不断发展和普及&#xff0c;电商行业迎来了前所未有的发展机遇。其中&#xff0c;CID引流电商作为一种新兴的电商模式&#xff0c;为商家们提供了更加精准、高效的拓客之路。尤其在3C产品领域&#xff0c;CID引流电商更是助力其销售腾飞的重要…

云计算【第一阶段(18)】磁盘管理与文件系统

一、磁盘基础 磁盘&#xff08;disk&#xff09;是指利用磁记录技术存储数据的存储器。 磁盘是计算机主要的存储介质&#xff0c;可以存储大量的二进制数据&#xff0c;并且断电后也能保持数据不丢失。 早期计算机使用的磁盘是软磁盘&#xff08;Floppy Disk&#xff0c;简称…

程序猿大战Python——面向对象——魔法方法

什么是魔法方法&#xff1f; 目标&#xff1a;了解什么是魔法方法&#xff1f; 魔法方法指的是&#xff1a;可以给Python类增加魔力的特殊方法。有两个特点&#xff1a; &#xff08;1&#xff09;总是被双下划线所包围&#xff1b; &#xff08;2&#xff09;在特殊时刻会被…

MURF3040CTR-ASEMI智能AI应用MURF3040CTR

编辑&#xff1a;ll MURF3040CTR-ASEMI智能AI应用MURF3040CTR 型号&#xff1a;MURF3040CTR 品牌&#xff1a;ASEMI 封装&#xff1a;TO-220F 恢复时间&#xff1a;35ns 最大平均正向电流&#xff08;IF&#xff09;&#xff1a;30A 最大循环峰值反向电压&#xff08;VR…

CSS详解

盒子模型&#xff08;box-sizing&#xff09; line-height与height CSS选择符和可继承属性 属性选择符&#xff1a; 示例&#xff1a;a[target"_blank"] { text-decoration: none; }&#xff08;选择所有target"_blank"的<a>元素&#xff09; /* 选…

嵌入式Linux驱动开研发流程详细解析

大家好,今天主要给大家分享一下,嵌入式linux中重要的内容详解。 一、驱动概念 驱动与底层硬件直接打交道,充当了硬件与应用软件中间的桥梁。 具体任务 读写设备寄存器(实现控制的方式) 完成设备的轮询、中断处理、DMA通信(CPU与外设通信的方式) 进行物理内存向虚拟内存…

[已解决]ImportError: DLL load failed while importing win32api: 找不到指定的程序。

使用pip install pywin32302安装后import找不到win32api 失败尝试 上网找别人的解决方案&#xff0c;大部分解决方案都是通过复制下面两个dll文件到 下面这个文件夹&#xff0c;并且复制到C:\Windows\System32&#xff0c;从而解决问题&#xff0c;但是我没能成功。 解决方…

深度神经网络——什么是小样本学习?

引言 小样本学习是指使用极少量的训练数据来开发人工智能模型的各种算法和技术。小样本学习致力于让人工智能模型在接触相对较少的训练实例后识别和分类新数据。小样本训练与训练机器学习模型的传统方法形成鲜明对比&#xff0c;传统方法通常使用大量训练数据。小样本学习是 主…

【IC验证】UVM实验lab03

1. TLM端口的创建、例化与使用 创建&#xff1a; uvm_get_blocking_port #(fmt_trans) mon_bp_port; 例化&#xff1a; function new(string name "mcdf_refmod", uvm_component parent);super.new(name, parent);fmt_trans new("fmt_trans", this);…

HMI之王 STM32H7S7

还要什么自行车啊 感谢原厂精彩培训和慷慨赠板&#xff01; 以下列示几个关注的点&#xff0c;计划做成系列&#xff0c;随缘更新&#xff0c;尽量填。 0&#xff09;1024*600分辨率配5寸触屏&#xff1b;Type-C with USB 2.0 HS interface, dual‑role‑power 终于不用2根线…

为何人类需重复学习与记忆?人工智能与人类认知机制的融合 —— 生物体AI

零、 AI 与人的认知背景知识 人作为一种生物智能体&#xff0c;学习和记忆的过程往往需要重复与实践。这是因为人的大脑并非一次性就能完美地吸收和储存信息&#xff0c;而是通过反复的认知加工&#xff0c;将短期记忆转化为长期记忆&#xff0c;并通过深度理解、归纳总结以及…

excel数据透视

Excel中&#xff0c;数据透视图&#xff08;PivotChart&#xff09;和数据透视表&#xff08;PivotTable&#xff09;是两个紧密相关的工具&#xff0c;用于分析数据。数据透视表是数据透视图的数据源&#xff0c;也就是说&#xff0c;数据透视图是基于数据透视表中的数据创建的…