海贼王动漫网页航海王漫画网页作品

• 网页制作介绍
• 作品演示
• 网页代码
• 作品源地址
• 知识点总结

网页制作介绍

海贼王动漫网页制作学生作品为航海王漫画介绍主题，网页设计使用DIV CSS布局制作，三层结构共16个页面：网站首页、故事介绍、主要角色、创作背景、账户注册、会员登录（角色下设10个三级角色介绍页面）。
网页整体色调搭配合理，学生水平代码，技术简单页面漂亮，网页使用海贼王的图标制作了页面背景平铺，页面整体宽度1200PX，顶部插入了海贼王LOGO，导航区域使用CSS制作了动态菜单（鼠标经过变色效果）。
首页使用VIDEO标签插入了视频，其他页面插入了背景音乐。制作了会员登录和注册页面表单页面，表单页面使用JavaScript制作了检测表单录入不能为空的弹窗提示。

作品演示

网页代码

代码说明：以下仅展示首页部分代码供参考

<div class="con">
	<div class="logo"><a href="index.html"><img src="images/logo.png" style="height:120px;margin:30px;"></a></div>
	<div class="menu">
	<ul>
		<li><a href="index.html">网站首页</a></li>
		<li><a href="gsjs.html">故事介绍</a></li>
		<li><a href="zyjs.html">主要角色</a></li>
		<li><a href="czbj.html">创作背景</a></li>
		<li><a href="zhzc.html">账户注册</a></li>
		<li><a href="hydl.html">会员登录</a></li>
	</ul>
	</div>
	<div class="banner"><img src="images/banner.jpg" width="1200px"></div>
	<div class="content">
		<p>
		2012年5月11日，《航海王》获得第41回日本漫画家协会赏。本作被吉尼斯世界纪录官方认证为“世界上发行量最高的单一作者创作的系列漫画”。2017年7月21日，日本纪念日协会通过认证，将每年的7月22日设立为“ONE PIECE纪念日。
		</p>
	</div>
	<div class="content">
		<p>
			<video controls="controls" autoplay="autoplay" width="100%">  
				<source src="media/video.mp4"  type="video/mp4" />  
			</video>  
		</p>
	</div>
</div>

作品源地址

stu-works/html/dongman/331.html

知识点总结

DIV CSS布局、三层结构、动态菜单（鼠标经过变色效果）、视频、背景音乐、表单、JavaScript检测表单弹窗提示