【HTML】HTML网页设计---海贼王动漫前端设计

1、引言

设计结课作业,课程设计无处下手，网页要求的总数量太多？没有合适的模板？数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“coding加油站”中全部会得到解决

2、作品介绍

海贼王网页系统采用HTML技术来实现，符合所学知识体系，适用于常见的作业以及课程设计，需要获取更多的作品，请关注微信公众号：coding加油站，获取，如需更多资料，可在微信后台留言。欢迎大家来提问，交流学习。

2.1、作品简介方面

海贼王网页系统采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选

2.2、作品二次开发工具

此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用），java，python等相关作业使用自己常使用的工具亦可完成相关二次开发。

2.3、作品技术介绍

html网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面，部分采用了javascript来做校验。使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。同时在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识，同时使用了一些js的相关知识。例如使用到了dom，和bom来获取浏览器的相关api，同时使用css对样式进行相关的美化，使得界面更加符合网页设计

3、作品演示

【coding加油站】HTML设计--海贼王动漫网页设计

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link href="css/style.css" rel="stylesheet" />
	<title>海贼王</title>
</head>

<style>
	li{ margin:0px; padding:0px;}
</style>

<body>
	<div class="con">
		<div class="head">
    		<div class="logo">
    			<h1>海贼王</h1>
    		</div>
    		<div style="width:145px; float:left;">
				<marquee direction="left" scrollamount="1">ONE PIECE 海贼王  ONE PIECE 海贼王 ONE PIECE 海贼王</marquee>
			</div>
			<div style="clear:both;"></div>
    		<div class="nav">
      			<ul>
        			<li><a href="index.html">首页</a></li>
        			<li><a href="brief.html">海贼王简介</a></li>
        			<li onmouseover="javascript:document.getElementById('list3').style.display='block'" onmouseout="javascript:document.getElementById('list3').style.display='none'">
        				<a href="member.html">人物介绍</a>
        				<ul style="position:absolute; display:none; background-color:#000; width:100px; margin-left:-20px; padding:0px;" id="list3">
            				  <li><a href="member/Luffy.html">路飞</a></li>
                			<li><a href="member/Zoro.html">索隆</a></li>
                			<li><a href="member/Nami.html">娜美</a></li>
                			<li><a href="member/Usopp.html">乌鲁索</a></li>
                			<li><a href="member/Sanji.html">山治</a></li>
                			<li><a href="member/Chopper.html">乔巴</a></li>
                			<li><a href="member/Robin.html">罗宾</a></li>
                			<li><a href="member/Franky.html">弗朗奇</a></li>
                			<li><a href="member/Brook.html">布鲁克</a></li>  
            			</ul>
       			 	</li>
        			<li><a href="picture.html">图片欣赏</a></li>
       				<li><a href="author.html">作者</a></li>
      			</ul>
       
    		</div>
    		<div class="clear"></div>
  		</div>
 		<div class="clear"></div>
  		<div class="lunbo"><a href="#"><img src="images/2.png"  width="1024"/></a></div>
  		<div class="clear"></div>
  		<div class="main">
    		<h2>海贼王</h2>
    		<p>《ONE PIECE》（海贼王、航海王）动画，在《周刊少年Jump》1997年34号开始连载，于1999年10月20日在日本富士电视台开始播放，至今仍在播放中。中国搜狐视频网站拥有该片中国大陆地区独家版权，每周日10:00更新一集（中午12:00更新字幕），截止至2015年5月，点阅率已超过50亿次。截止至2013年11月，发行量在全世界突破3.45亿册，是全世界发行量最高的日本漫画。漫画单行本的翻译版本在日本以外有30个以上的国家和地区出版发行。相关商品在2012年度的市场规模约达1000亿日元。2012年在第41回日本漫画家协会上获得大赏。2015年6月15日，《ONE PIECE》以日本本土累计发行了3亿2086万6000本，被吉尼斯世界纪录官方认证为“世界上发行量最高的单一作者创作的系列漫画”。</p>
			<h2>故事内容</h2>
			<p>拥有财富、名声、权力，这世界上的一切的男人 “海贼王”哥尔·D·罗杰，在被行刑受死之前说了一句话，让全世界的人都涌向了大海。“想要我的宝藏吗？如果想要的话，那就到海上去找吧，我全部都放在那里。”，世界开始迎接“大海贼时代”的来临。 
			时值“大海贼时代”，为了寻找传说中海贼王罗杰所留下的大秘宝“ONE PIECE”，无数海贼扬起旗帜，互相争斗。一个叫路飞的少年为了与因救他而断臂的香克斯的约定而出海，在旅途中不断寻找志同道合的伙伴，开始了以成为海贼王为目标的伟大冒险旅程。</p>
		</div>
  		<div class="fr"><img src="images/0.jpg" width="962"  height="330"/></div>
   		<div class="clear"></div>
  		<div class="foot">
    		<p>版权所有：海贼王</p>
    		<p>&nbsp;</p>
  		</div>
  	</div>
  	<div class="clear"></div>
	<audio src="music/music.mp3" controls="controls" loop="loop">
		<embed src="music/music.mp3"/>
		<bgsound src="music/music.mp3"/>
	</audio>
</body>
</html>

【HTML】HTML网页设计---海贼王动漫前端设计

猜你喜欢