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.想要获取本文源码,点击前往吧

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

分流井设备的监测控制和智慧运维

分流井是一种用于将雨水和污水进行分离的设施&#xff0c;通常设置在雨水管和污水管的汇合处。它可以根据不同的情况&#xff0c;将雨水和污水分别排放到不同的管道中&#xff0c;从而实现雨污分流的目的。 以下是一些常见的分流井类型和工作原理&#xff1a; 1、智能分流井&a…

Echarts饼图-实现今日进度-动态图

效果预览 本次实现的是一个饼图&#xff0c;蓝色科技背景色&#xff0c;星球转动效果 进度显示。 构建一个动态饼图&#xff0c;采用ECharts&#xff0c;背景为蓝色科技风&#xff0c;有星球转动效果。通过echarts.init初始化&#xff0c;设置图表尺寸和背景色&#xff0c;配…

高性能并行计算华为云实验二:WordCount算法实验

目录 一、实验目的 二、实验说明 三、实验过程 3.1 创建wordcount源码 3.1.1 实验说明 3.1.2 文件创建 3.2 Makefile文件创建与编译 3.3 主机配置文件建立与运行监测 3.3.1 主机配置文件建立 3.3.2 运行监测 三、实验结果与分析 4.1 实验结果 4.2 结果分析 4.2.1 …

昇思25天学习打卡营第3天|数据集 Dataset

1. 学习内容复盘 集数据 什么是数据集 数据是深度学习的基础&#xff0c;高质量的数据输入将在整个深度神经网络中起到积极作用。MindSpore提供基于Pipeline的数据引擎&#xff0c;通过数据集&#xff08;Dataset&#xff09;和数据变换&#xff08;Transforms&#xff09;实…

el-input-number 限制输入正整数

vue 页面 限制输入最小值为0 :min"0" <el-input-number v-model"scope.row.num" change"handleNumChange(scope)" keydown.enter.prevent style"width: 200px; " :min"0" />methods 里面限制输入的数字不为小数 使…

虚拟机没关机,电脑直接关机导致虚拟机无法使用

虚拟机没关机&#xff0c;电脑直接关机导致虚拟机无法使用 虚拟机未正常关机 无法打开虚拟机&#xff0c;移除 删除虚拟机目录下的该文件夹CentOSXX.vmx.lck&#xff08;或者重新命名&#xff09; 虚拟机正常打开

引擎霸屏推广9招带你驰骋市场战场-华媒舍

在现代市场竞争激烈的环境下&#xff0c;企业如何快速上车&#xff0c;脱颖而出&#xff0c;引擎霸屏推广成为了一种有效的市场推广手段。本文将为您介绍9招带您驰骋市场战场&#xff0c;让您的品牌广告在市场中快速传播。 一、选对渠道 选择合适的渠道是成功的关键。通过市场…

【C++LeetCode】【热题100】字母异位词分组【中等】-不同效率的题解【3】

题目&#xff1a; 暴力方法&#xff1a; class Solution { public:vector<vector<string>> groupAnagrams(vector<string>& strs) {std::unordered_set<std::string> uniqueWord;//单词字符唯一化集合vector<vector<std::string>>…

【CPP】插入排序、希尔排序

目录 1.插入排序1.1直接插入排序简介代码分析 1.2直接插入对比冒泡排序简介代码对比分析(直接插入排序与冒泡的复杂度效率区别) 1.3希尔排序简介代码分析 1.插入排序 基本思想&#xff1a;把一个待排数字按照关键码值插入到一个有序序列中&#xff0c;得到一个新的有序序列。 …

IDEA快速入门06-插件

六、插件 6.1 IDEA插件介绍和管理 手动演示IDEA中怎么下载插件&#xff0c;管理插件等。 File -> Settings -> Plugins 6.2 Alibaba Java Coding Guidelines 6.2.1 实时检查 6.2.2 主动检查 选中【项目名称】或者【某一个具体类】&#xff0c;右键点击【编码规约扫…

【MySQL进阶之路 | 高级篇】InnoDB存储结构

1. 数据库的存储结构 : 页 索引结构给我们提供了高效的索引方式&#xff0c;不过索引信息以及数据记录都是保存在文件上的.确切说是存储在页结构中.另一方面&#xff0c;索引是在存储引擎中实现的&#xff0c;MySQL服务器上的存储引擎负责对表中数据的读取和写入操作.不同的存…

cesium for unity 打包webgl失败,提示不支持

platform webgl is not supported with HDRP use the Vulkan graphics AR instead.

学习es6

1、let变量 2、const常量 3、解构赋值 4、模板字符串 5、简化对象写法 6、参数默认值 7、rest参数 8、扩展运算符 9、扩展对象方法 10、扩展数组方法 11、Set 12&#xff0c;Promise 13、Module模块

【SCAU数据挖掘】数据挖掘期末总复习题库简答题及解析——下

1.从某超市顾客中随机抽取5名&#xff0c;他们的购物篮数据的二元0/1表示如下&#xff1a; 顾客号 面包 牛奶 尿布 啤酒 鸡蛋 可乐 1 1 1 0 0 0 0 2 1 0 1 1 1 0 3 0 1 1 1 0 1 4 1 1 1 1 0 0 5 1 1 1 0 0 1 某学生依据这些数据做…

如何将图片转换为表格?方法并不难!

如何将图片转换为表格&#xff1f;在数字化时代&#xff0c;图片中的表格信息提取和整理成为了我们日常工作中不可或缺的一部分。不论是学术研究、商业分析还是个人生活&#xff0c;快速、准确地将图片转换为表格都显得尤为重要。今天&#xff0c;我们就来介绍四款强大的图片转…

区块链会议投稿资讯CCF A--WINE 2024 截止7.15 附录用率 附录用的区块链文章

Conference&#xff1a;The Conference on Web and Internet Economics (WINE) CCF level&#xff1a;CCF A Categories&#xff1a;Cross-cutting/comprehensive/emerging Year&#xff1a;2024 Conference time&#xff1a; December 2-5, 2024 录用率&#xff1a; sele…

兴顺物流管理系统的设计

兴顺物流管理系统的设计 管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;驾驶员管理&#xff0c;物流资讯管理&#xff0c;车辆管理&#xff0c;基础数据管理 员工账户功能包括&#xff1a;系统首页&#xff0c;个人中心&…

51学习记录(一)——51介绍及震动感应灯

文章目录 前言一、STC89C522.内部结构及引脚 二、继电器原理及震动传感器原理三、项目搭建及实现 前言 一个学习嵌入式的小白~ 有问题评论区或私信指出 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、STC89C52 1.简介 所属系列&#xff1a;51单…

API网关在微服务中的应用(1)

API拥有一些职责&#xff0c;如身份验证、监控、负载均衡、缓存、流控。API网关方式的核心要点是&#xff0c;所有客户端和消费端都通过统一的网关接入微服务&#xff0c;在网关层处理所有的非业务功能。 简洁图&#xff1a; 生产图&#xff1a; 网关优点 通过上图中API网关…

Linux工具(包含sudo提权与vim快捷配置)

目录 什么是软件包 查看软件包 如何安装软件 1.官方yum源下载 2.扩展yum源下载 如何卸载软件 补充知识如何将普通用户加入白名单 补充知识rzsz vim编辑器 1.命令模式&#xff08;进入默认为这个模式&#xff09;用户所有的输入都会被当成命令 2.插入模式 3.底行模…