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 模型具有超强的…

Autodesk Revit产品痛点分析

1.Revit已有20多年的历史&#xff0c;大多数软件公司认为大多数代码最多只有10年的生命周期。 2.Revit核心部分仍局限于单个CPU核心上,严重制约性能提升。 3.Revit只在数据库的大小和小细节上的改动。 4.Revit陈旧的绘图技术和性能难以提升。 5.Revit的致命弱点是模型增长的…

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…

C/C++打假:条件分支语句switch..case效率比if..else高?

很久很久以前&#xff0c;有人教导我说条件分支大于4条时&#xff0c;switch..case效率会比if..else高&#xff0c;条件分支为10条时&#xff0c;switch..case效率会比if..else快一倍不止。随着条件分支越多&#xff0c;效率差异越大。今日得闲&#xff0c;我做了个测试来验证这…

pyqt5 信号和槽函数以及Qthread 多线程的简单的例子

写了一个简单的例子&#xff1a; 包含一个主窗口和一个按钮。点击按钮时&#xff0c;我们将启动一个耗时的任务&#xff08;在这里我们使用time.sleep来模拟&#xff09;。为了不阻塞主线程&#xff0c;我们将在一个单独的线程中运行这个任务。同时&#xff0c;我们将显示一个进…

论文解读:Autoregressive Image Generation without Vector Quantization

这篇论文的主要内容围绕着一个核心问题&#xff1a;是否有必要将自回归模型与向量量化的表示方式绑定在一起&#xff0c;特别是在图像生成领域&#xff1f;作者团队来自麻省理工学院计算机科学与人工智能实验室&#xff08;MIT CSAIL&#xff09;、谷歌DeepMind以及清华大学&am…

力扣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引流电商更是助力其销售腾飞的重要…

Python 学习 第四册 第10章 系统(2)

-----用教授的方式学习 目录 10.3 进程 10.3.1 使用subprocess创建进程 10.3.2 使用multiprocessing创建进程 10.3.3 使用terminate()终止进程 10.4 日期和时间 10.4.1 datetime模块 10.4.2 使用time模块 10.4.3 读写日期和时间 10.3 进程 当运行一个程序时,操…

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

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

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

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

调查问卷管理系统设计文档

一、项目背景和目标 随着现代企业对市场研究的深入&#xff0c;调查问卷已成为获取用户反馈和市场动态的重要工具。为了高效管理问卷的创建、发布、回收和分析&#xff0c;我们设计了一套调查问卷管理系统。本系统的目标是提供一个功能完善、操作简便、性能稳定的平台&#xff…

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与外设通信的方式) 进行物理内存向虚拟内存…