Web大学生网页作业成品——动漫火影忍者网页设计与实现(HTML+CSS+JS)（5个页面）

news2024/12/22 16:55:00

🎉🎉🎉 常见网页设计作业题材有**汽车、环保、明星、文化、国家、抗疫、景点、人物、体育、植物、公益、图书、节日、游戏、商城、旅游、家乡、学校、电影、动漫、非遗、动物、个人、企业、美食、婚纱、其他**等网页设计题目, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。🎉🎉🎉

文章目录

一、作品介绍 🔥
二、作品演示 ☁️
三、代码目录 🏠
四、网站代码 👿
- HTML部分代码
五、如何学习网页制作 ❤️
六、源码获取 🏫

一、作品介绍 🔥

🏷️本套采用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>