HTML静态网页成品作业(HTML+CSS+JS)——动漫火影忍者网页设计制作(5个页面)

崽子爱码

于 2024-05-17 08:05:25 发布

阅读量559

点赞数 3

分类专栏： html网页设计与制作学生HTML个人网页作业作品静态网页文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_42283461/article/details/138990297

版权

html网页设计与制作同时被 3 个专栏收录

104 篇文章 18 订阅

订阅专栏

静态网页

101 篇文章 0 订阅

订阅专栏

学生HTML个人网页作业作品

75 篇文章 16 订阅

订阅专栏

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

一、作品介绍

🏷️本套采用HTML+CSS+JS，使用Javacsript代码实现图片轮播切换，共有5个页面。

二、作品演示

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>火影忍者</title>
	<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
	<div class="main">
		
		<header>
			<img src="./images/logo.jpeg">
		</header>
		<nav>
			<ul>
				<li class="on"><a href="index.html">首页</a></li>
				<li><a href="renwu.html">人物介绍</a></li>
				<li><a href="huoying.html">历代火影</a></li>
				<li><a href="juzhao.html">火影剧照</a></li>
				<li><a href="wenjuan.html">问卷调查</a></li>
			</ul>
		</nav>

		<div class="banner">
			<div id="banner_img_box">
				<img id="banner_img" src="./images/b1.png">
			</div>
			<div class="dots">
				<div class="dot on" onclick="change(1)"></div>
				<div class="dot"  onclick="change(2)"></div>
				<div class="dot"  onclick="change(3)"></div>
			</div>
		</div>
		<div class="content">
			

			<h2>剧情介绍</h2>
			<div class="jianjie">
				<div class="jianjie_img">
					<img src="./images/jianjie.jpeg">
				</div>
				<div class="jianjie_txt">
					<p>
						十多年前一只恐怖的尾兽“九尾妖狐”袭击了木叶隐村，当时的第四代火影拼尽全力，以自己的生命为代价将“九尾妖狐”封印在了刚出生的鸣人身上。木叶村终于恢复了平静，但村民们却把鸣人当成怪物看待，所有人都疏远他。无可奈何，鸣人用各种恶作剧试图吸引大家的注意力。在伊鲁卡老师的关心下，鸣人始终保持着乐观的精神。为了让更多的人认可自己，他下定决心要成为火影！鸣人怀着过人的自信与勇气开始了训练，但一切要比他想象的要困难的多！
					</p>
					<p>
						鸣人从小十分孤独，木叶村村民把他当成九尾的化身，当他是怪物看待。一晃十多年过去了， 鸣人考入了木叶村的忍者学校，结识了伙伴佐助和小樱。佐助是宇智波一族的末裔，当他还是小孩的时候他的哥哥——一个拥有强大实力的忍者将他们家族的人都杀死了，然后投靠了一直想集齐尾兽的晓组织，佐助从小就发誓要杀死哥哥，为家族报仇。鸣人他们在忍者学校得到了卡卡西老师的精心指点，在他的帮助下去迎接成长中的一次又一次挑战！
					</p>
					<p>
						不久之后，在卡卡西老师的带领下，鸣人与佐助、小樱一起踏上了修行之路。等待他们的将是无穷无尽的艰险挑战，而鸣人等人也在这生与死的较量中逐渐成长起来。
					</p>
				</div>
				<div class="cl"></div>

			</div>

		</div>
		<footer>
				Copyright © 2013-2022 火影忍者
		</footer>
	</div>
	<script type="text/javascript" src="./js/script.js"></script>
</body>
</html>