网页制作介绍

海贼王动漫网页制作学生作品为航海王漫画介绍主题，网页设计使用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.com/html/dongman/331.html

知识点总结

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