基于Html+Css+javascript的动漫网站

@逆风boy

已于 2022-05-30 13:12:40 修改

阅读量2w

点赞数 39

分类专栏：前端文章标签： css

于 2021-01-17 22:32:52 首次发布

本文链接：https://blog.csdn.net/weixin_46820017/article/details/112759047

版权

前端专栏收录该内容

83 篇文章 6 订阅

订阅专栏

1.前端三门技术

学习Web前端技术需要掌握三门基本技术：HTML，CSS，JavaScript：

HTML：HTML是网页内容的载体。内容就是网页制作者放在页面上想要用户浏览的信息，可以包含文件、图片、视频等
CSS：CSS样式是表现，就像网页的外衣比字体、颜色变化等
JavaScript：JavaScript用来实现网页上的特效效果。比如鼠标滑过弹出下拉菜单、鼠标滑过北京颜色改变等

本次项目主要是介绍海贼王主题的简介，使用html+css+javascript来制作网站，实现项目的效果；
index.html
主页面效果截图：
在这里插入图片描述

在这里插入图片描述

主要代码实现：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>海贼王首页</title>
<script type="text/javascript" src="JavaScript.js"></script>
</head>
<style type="text/css">/**/
body{
	margin:0px;
	padding:0px;
    font-family:"宋体",Arial, Helvetica, sans-serif;
	line-height:1.5em;
	width:100%;                      /*主体样式*/
}
h1 {
    font-size: 70px;
    font-weight: 500;
    letter-spacing: 4px;     /*h1标签*/
    margin: 60px 0px;
    color: #FFFFFF;
}

p{
	 text-indent:2em;      /*p标签*/
	font-size:18px;}
	
#container{
	width:100%;             
	margin:auto;}
	
#top{
	width:100%;
	height:1000px;          /*开头背景图*/
	background:url(images/图片1.jpg) no-repeat;
}

#location{
	text-indent:2em;
	color:#333;}
#location a{
	color:#333;}
#location a:hover{
	color:#1693ff;}    /*位置导航*/

#nav{
	float:right;
	width:900px;
	height:60px;
}
#nav-menu{
	float:right;
	width:900px;
	padding-top:30px;}
#nav-menu ul{
	list-style:none;
	padding:0px;
	margin:0px;}        /*菜单*/
#nav-menu li{
	display:inline;}
#nav-menu li a{
	float:left;
	text-align:center;
	font-size:20px;
	font-weight:bold;
	width:100px;
	height:40px;
	padding:140x 0px 0px 5px;}
#nav-menu li a:hover{
	color:#91e30c;
	text-decoration:underline;}
	

#content{
	width:1200px;
	height:1200px;
	overflow:auto;               /*内容盒子*/
	margin:50px 0px 10px 160px;
	padding:6px;
}
#content_left{
	float:left;
	width:300px;
	margin:0px 0px 10px 0px;
	padding:0px;
	border-style:solid;
}
#section{
	margin:0px 0px 15px 0px;
	padding:0px;
}
#section_1_top{
		width:232px;
		height:36px;
		font-family:"黑体";
		font-weight:bold;
		font-size:20px;
		color:#09F;
		background: #666 no-repeat;
		margin:0px;
		padding:15px 0px 0px 70px;
	}
#section_1_mid{
		width:270px;
		background:#666 repeat-y;
		margin:0px;
		padding:5px 15px ;
	}
#section_1_mid .myform{
		margin:0px;
		padding:0px;
	}
.myform .frm_cont{
		margin-bottom:8px;
	}
.myform .username iuput,.myform .password input{
		width:120px;
		height:18px;
		padding:2px 0px 2px 0px;
		border:solid 1px #aacfe4;
	}
.myform .btns{
		text-align:center;
	}
#section_1_bottom{
		width:300px;
		height:17px;
		background:#666 no-repeat;
	}
#section2{
		margin:50px 0px 15px 0px;
		padding:0px;
	}
#section_2_top{
		width:176px
		height:42px; 
		font-family:"黑体";
		font-weight:bold;
		font-size:20px;
		color:#09F;
		background:#666 no-repeat;
		margin:0px;
		padding:15px 0px 0px 70px;
	}
#section_2_mid{
		width:300px;
		background:#666 repeat-y;
		margin:0px;
		padding:5px 0px;
	}
#section_2_mid ul{
		list-style:none;
		margin:0px 20px;
		padding:0px;
	}
#section_2_mid li{
		border-bottom:1px dotted #fff;
		margin:0;
		padding:5px;
	}
#section_2_mid li a{
		color:#fff;
		text-decoration:none;
	}
#section_2_mid li a:hover{
		color:#363;
		text-decoration:none;
	}
#section_2_bottom{
		width:300px;
		height:18px;
		background:#666 no-repeat;
	}
#content_right{
		float:right;
		width:800px;
		padding:10px;
		height:1000px;
	    border-style:double;
	}
#content_right2{
		float:none;
		width:780px;
		padding:10px;
	    border-style:double;
	}
.post{
		padding:10px;
		height:300px;
	}
.post h1{
		font-family:Tahoma, Geneva, sans-serif;
		font-size:30px;
		color:#588970;
		margin:0px 0px 15px 0px ;
		padding:0px;
	}
.post p{
		font-family:Arial, Helvetica, sans-serif;
		font-size:20px;
		color:#46574d;
		text-align:justify;
		margin:0px 0px 30px 0px;
		padding:0px;
	}
.post img {
		margin:0px 0px 0px 25px;
		padding:0px;
		border:1px solid #333;
		}
		
.banner{
 	width:1700px;
 	height:600px;
 	margin:13px auto 15px 160px;
 	position:relative;
 	overflow: hidden;
 }
.banner .banner_pic .pic{display:none;}
.banner .banner_pic .current{display:block;}/* 第一个轮播图*/
.banner ol{
	position:absolute;
	left:520px;
	top:465px;
 }
.banner ol .but{
 	float:left;
	width:20px;
	height:20px;
	border:1px solid #eee;
	margin-right:20px;
 }
.banner ol li{cursor:pointer;}
.banner ol .current{
	background:#fe0048;
	float:left;
	width:20px;
	height:20px;
	border:1px solid #fe0048;
	margin-right:20px;
}

.main{ width:1200px; height:400px; margin:0px auto;}
.indemo{ width:800%; height:100%;}
.demo{ width:1200px; height:400px; overflow:hidden;} /*第二个轮播图*/
.demo1{ float:left;}
.demo2{ float:left;}
#bgm{
	width:1700px; height:300px;
	background:url(images/漫威海贼王风格.jpg) no-repeat;}
#footer{
	clear:both;
	width:100%;
	height:50px;
	margin-top:30px;
	background-color:gray;    /*底部样式*/
	text-align:center;
	padding-top:10px;}
</style>
<body>
<div id="container">

   <div id="nav">
    <div id="nav-menu">
         <li><a href="海贼王首页.html">网站首页</a></li>
         <li><a href="人物介绍.html">人物介绍</a></li>
         <li><a href="狂热行动.html">狂热行动</a></li>
         <li><a href="精彩篇章.html">精彩篇章</a></li>
         <li><a href="会员注册.html">会员注册</a></li>
     </ul>
    </div>
   </div>

<div id="top"></div> 

<div class="banner">
	<div class="banner_pic" id="banner_pic">
    <div class="pic"><img src="images/和之国2.jpg" alt="" width="1200" height="520" /></div>
	<div class="current"><img src="images/黑色礼服.jpg" alt="" width="1200" height="520" /></div>
	<div class="pic"><img src="images/潮图1.jpg" alt="" width="1200" height="520" /></div>
	<div class="pic"><img src="images/潮图2.jpg" alt="" width="1200" height="520" /></div>
    <div class="pic"><img src="images/潮图3.jpg" alt="" width="1200" height="520" /></div>
	</div>
	<ol id="button">
		<li class="current"></li>
		<li class="but"></li>
		<li class="but"></li>
        <li class="but"></li>
        <li class="but"></li>
	</ol>
</div>

<div id="location">您现在的位置是:<a href="海贼王首页.html">网站首页</a>><a href="人物介绍.html">人物介绍</a>><a href="狂热行动.html">狂热行动</a>><a href="精彩篇章.html">精彩篇章</a>><a href="会员注册.html">会员注册</a>

<audio controls="controls">
  <source src="/i/song.ogg" type="audio/ogg">
  <source src="音乐素材/浜口史郎 - ルフィ猛攻!.mp3" type="audio/mpeg">
</audio>  

<div id="content">
<div id="content_left">
<div id="section">
<div id="section_1_top">用户登录</div>
<div id="section_1_mid">
<div class="myform">
 <form method="post" name="form1" action="#" οnsubmit="return myCheck()"  >
<div class="frm_cont username">账户:
<label for="username"></label>
<input type="text" name="username" id="username"  placeholder="admin"/>
</div>
<div class="frm_cont password">密码:
<label for="password"></label>
<input type="password" name="password" id="password" maxlength="12"  placeholder="123456"/>
</div>

<div class="btns">

<a href="表单.html"><input type="submit" name="button1" id="button1" value="登录"/></a>
<a href="会员注册.html"><input type="button" name="button2" id="button2" value="注册"/></a>
</div>
</form>
</div>
</div>
<script type="text/javascript">
function myCheck(){
	for(var i=0;i< document.form1.elements.length-1;i++)
	{
		if(document.form1.elements[i].value=="")
		{
			alert("当前表单不能有空项，请按照指示填写信息");
			document.form1.elements[i].focus();
			return false;
		}
	}	
	alert("欢迎来到海贼王这个大家庭");
	return true;
}
</script>

<div id="section_1_bottom"></div>
</div>
<div id="section2">
<div id="section_2_top">海贼王电影</div>
<div id="section_2_mid">
<ul>
<li><a href="https://www.iqiyi.com/v_19rro4gqbg.html" target="_blank">海贼王追逐草帽大冒险</a></li>
<li><a href="https://www.iqiyi.com/v_19rro4hb8o.html" target="_blank">海贼王之乔巴身世之谜</a></li>
<li><a href="https://www.iqiyi.com/v_19rro4gobc.html" target="_blank">海贼王机关城机械巨兵</a></li>
<li><a href="http://www.iqiyi.com/lib/m_221880614.html" target="_blank">海贼王之强者世界</a></li>
<li><a href="https://www.iqiyi.com/v_19rro4ggp4.html" target="_blank">海贼王之最强之敌Z</a></li>
<li><a href="https://www.iqiyi.com/v_19rrknan6g.html" target="_blank">海贼王之3D2Y</a></li>
<li><a href="https://www.iqiyi.com/v_19rr9tounc.html" target="_parent">海贼王之黄金城</a></li>
<li><a href="http://www.iqiyi.com/lib/m_221880614.html" target="_blank">海贼王之狂热行动</a></li>
</ul>
</div>

<div id="section_2_bottom"></div>
</div>

<div id="section2">
<div id="section_2_top">最新动态</div>
<div id="section_2_mid">
<ul>
<li><a href="https://ac.qq.com/ComicView/index/id/505430/cid/982" target="_blank">第965话 黑炭家的阴谋</a></li>
<li><a href="https://ac.qq.com/ComicView/index/id/505430/cid/983" target="_parent">第964话 御殿的冒险</a></li>
<li><a href="https://ac.qq.com/ComicView/index/id/505430/cid/984" target="_blank">第963话 成为武士</a></li>
<li><a href="https://ac.qq.com/ComicView/index/id/505430/cid/985" target="_blank">第962话 大名与家臣</a></li>
<li><a href="https://ac.qq.com/ComicView/index/id/505430/cid/981" target="_blank">第961话 山神事件</a></li>
<li><a href="https://ac.qq.com/ComicView/index/id/505430/cid/980" target="_blank">第960话 光月御殿登场</a></li>
<li><a href="https://ac.qq.com/ComicView/index/id/505430/cid/979" target="_blank">第959话 武士</a></li>
<li><a href="https://ac.qq.com/ComicView/index/id/505430/cid/978" target="_blank">第958话 约定的港口</a></li>
</ul>
</div>

<div id="section_2_bottom"></div>
</div>
</div>

<div id="content_right">
<div class="post">
<h1>海贼王简介</h1>
<p>  《海贼王》是日本漫画家尾田荣一郎作画的少年漫画作品，在《周刊少年Jump》1997年第34号开始连载，电子版由漫番漫画连载。</p><p>改编的电视动画《海贼王》于1999年10月20日起在富士电视台首播。2012年5月11日，《海贼王》获得第41回日本漫画家协会赏。截至2015年6月15日，《海贼王》以日本本土累计发行了3亿2086万6000本，被吉尼斯世界纪录官方认证为“世界上发行量最高的单一作者创作的系列漫画”。2017年7月21日，日本纪念日协会通过认证，将每年的7月22日设立为"ONE PIECE"纪念日。</p>
</div>

<div class="post">
<h1>图片欣赏</h1>
<img src="images/悬赏单.jpg" width="150" height="170"/>
<img src="images/和之国路飞.jpg" width="150" height="170"/>
<img src="images/索隆3.jpg" width="150" height="170"/>
<img src="images/万里阳光号.jpg" width="150" height="170"/>
</div>

<div class="post">
<h1>角色介绍</h1>
<p>  主人公蒙奇·D·路飞所带领的海贼团，旗帜图案是戴着草帽的骷髅。</p><p>从东海进入伟大航路，经过"司法岛事件"后，名扬天下。至香波地群岛，全员被巴索罗米·熊弹飞分散到世界各地。经由"冥王"西尔巴兹·雷利的指点，给船员们两年期间各自修炼。之后全员重新聚集于香波地群岛，进入"新世界"。</p>
<p>截止佐乌篇后全部成员共九人，甚平在托特兰篇宣布加入草帽海贼团，但还未正式入队。旗下有7队团体组成的“草帽大船团”，分别为俊美海贼团、巴托俱乐部、八宝水军、XXX健身房格斗联合、咚塔塔族咚塔兵团、巨兵海贼团以及约塔玛利亚大船团。</p>
</div>
</div>
</div>
</div>
</div>
<hr/>

<div>
<h2 align="center">Top1水之都-司法岛战役</h2>
<strong><p>集数：228-325</p></strong>
<p>这一场战役持续的时间非常长，从剧情到内容到战斗，一直是我认为的海贼王中最优秀的篇章，虽然可能在战斗能力上面，那个时候没有现在这么强，但是战斗非常热血，从乌索普与路飞战斗开始，到营救罗宾，再到最后的路飞与路奇的战斗，充满激情热血。</p><hr />

<h2 align="center">Top2恐怖三帆船</h2>
<strong><p>集数：337-381</p></strong>
<p>这次的战斗是对战七武海之一的月光莫利亚，草帽团也是打的十分辛苦，不过好歹获得了胜利。最燃的是大熊出现的时候，众人已经精疲力尽，无力再战，这个时候索隆挺身而出，宁愿牺牲自己也要保护船长，事后一句什么也没发生，此情此景，只能说索隆此刻最帅。</p><hr />

<h2 align="center">Top3顶上战争</h2>
<strong><p>集数：459-489</p></strong>
<p>顶上战争也是海贼王中数一数二的战役，这一战不仅描述了四皇之一的白胡子以及他的白胡子海贼团各队长，而且还集合了众多的海贼王众多的有名的大佬人物集中在马林梵多，三大将聚集，七武海聚集，最后连红发海贼团也出场了。感触最深的当然是对艾斯以及白胡子的描述，顶上战争他们谱写了超级感人的篇章。</p><hr />

<h2 align="center">Top4鱼人岛战役</h2>
<strong><p>集数：523-574</p></strong>
<p>鱼人岛对比前面的战役，就显得普通了很多，让人印象深刻主要还是因为草帽团一行人两年后出现的实力展示，因为鱼人岛实在是没有多么强大的对手，所有人都没有真正的发挥出两年来修炼的实力，但是路飞一伙对战十万敌人看起来还是很燃的。</p><hr />

<h2 align="center">Top5德雷斯罗萨战役</h2>
<strong><p>集数：639-746</p></strong>
<p>这一次的战役对战的是七武海中的大佬多弗朗明哥，这一次战役最惹人的就是草帽海贼团的众人直接展露了两年来的修炼成果，尤其是路飞，路飞的霸王色霸气配合自身橡胶果实，直接开四档对战明哥，虽然打的十分辛苦，但是战斗很燃。另外就是乌索普大神，觉醒见闻色，赏金全面提升，乌索普此次战役直接封神。</p><hr />
</div>

<div id="demo2" class="demo2"></div>
</div></div></div>


<script type="text/javascript">
var speed=30;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function marquee(){
	if(tab2.offsetWidth-tab.scrollLeft<=0){ tab.scrollLeft=0}
	else{ tab.scrollLeft++;}
	}
var timer= setInterval(marquee,speed);
tab.οnmοuseοver=function(){ clearInterval(timer)};
tab.οnmοuseοut=function(){ timer=setInterval(marquee,speed)};
</script>
</div></div>

<div id="footer">Copyright @ 2019 海贼王:网站首页 | Designed by 陈泽楷</div>
</body>
</html>

会员注册页面效果：
在这里插入图片描述

会员注册主要实现代码：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>会员注册</title>
<script type="text/javascript">
function myCheck(){
	for(var i=0;i< document.form1.elements.length-1;i++)
	{
		if(document.form1.elements[i].value=="")
		{
			alert("当前表单不能有空项");
			document.form1.elements[i].focus();
			return false;
		}
	}	
	
	alert("恭喜你成功的加入我们海贼王的一员!!!");
	return true;
}
</script>

</head>

<div id="container">
 <div id="nav">
    <div id="nav-menu">
         <li><a href="海贼王首页.html">网站首页</a></li>
         <li><a href="人物介绍.html">人物介绍</a></li>
         <li><a href="狂热行动.html">狂热行动</a></li>
         <li><a href="精彩篇章.html">精彩篇章</a></li>
         <li><a href="会员注册.html">会员注册</a></li>
     </ul>
    </div>
   </div>
   
  <div id="top"></div> 
  
  <div id="location">您现在的位置是:<a href="会员注册.html">会员注册</a>><a href="海贼王首页.html">网站首页</a>><a href="人物介绍.html">人物介绍</a>><a href="狂热行动.html">狂热行动</a>><a href="精彩篇章.html">精彩篇章</a>
  
  <div id="content">
      <h1 align="center">会员注册</h1><br />
        <p id="content">欢迎您加入我们海贼王的一员，请输入你的详细个人信息，然后点击”注册“按钮，加入我们叭！</p></div>
        
<marquee id="affiche
" align="left" bgcolor="#00CCFF"  direction="right" height="500" width="150%" hspace="70" vspace="30" loop="-1" scrollamount="10" scrolldelay="110" οnmοuseοut="this.start()" οnmοuseοver="this.stop()" >
<h1 align="center">海贼王</h1>
<h1 align="left">大爱海贼王</h1>
<h1>快填写下面信息加入我们叭</h1>
<h1 align="right">欢迎您的加入</h1>
</marquee>
        
      <div id="contact">
       <form method="post" name="form1" action="#" οnsubmit="return myCheck()"  >
         <table width="1000" border="1" bordercolor="#0033FF" align="center" cellpadding="3" cellspacing="2">
         <tr>
         <td width="100" height="20" align="right">用户名:</td>
         <td width="400" headers="20" align="left">        
       <input type="text" id="name" name="name" placeholder="admin" size="12" maxlength="12" />
          </td>
          </tr>
          
         <tr>
         <td width="100" height="20" align="right">密码:</td>
         <td width="400" headers="20" align="left">        
        <input type="password" id="pass" name="pass"  placeholder="123456 "size="12" maxlength="12" />
          </td>
          </tr>
          
          <tr>
         <td width="100" height="20" align="right">确认密码:</td>
         <td width="400" headers="20" align="left">        
        <input type="password" id="pass" name="pass"  placeholder="123456 "size="12" maxlength="12" />
          </td>
          </tr>
        
         <tr>
         <td width="100" height="20" align="right">性别:</td>
         <td width="400" headers="20" align="left">        
        <input type="radio" name="sex" value="男" checked />男
        <input type="radio" name="sex" value="女" />女
          </td>
          </tr>
          
           <tr>
         <td width="100" height="20" align="right">出生日期:</td>
         <td width="400" headers="20" align="left">        
        <input type="text" id="date" placeholder="2019年5月20日"  name="date" size="30"/>
          </td>
          </tr>
          
          <tr>
         <td width="100" height="20" align="right">联系电话:</td>
         <td width="400" headers="20" align="left">        
        <input type="text" id="phone" name="phone" placeholder="13412345678" size="13" maxlength="13" />
          </td>
          </tr>
          
          <tr>
         <td width="100" height="20" align="right">出生地:</td>
         <td width="400" headers="20" align="left">        
        <input type="radio" name="place" value="东海" checked />东海
        <input type="radio" name="place" value="南海" />南海
        <input type="radio" name="place" value="西海" />西海
        <input type="radio" name="place" value="北海" />北海
          </td>
          </tr>
          
           <tr>
         <td width="100" height="20" align="right">爱好:</td>
         <td width="400" headers="20" align="left">        
        <input type="checkbox" name="hobby" value="航海" checked />航海
        <input type="checkbox" name="hobby" value="赏金" />赏金
        <input type="checkbox" name="hobby" value="吃饭" />吃饭
        <input type="checkbox" name="hobby" value="发明" />发明
          </td>
          </tr>
          
          <tr>
         <td width="100" height="20" align="right">职业:</td>
         <td width="400" headers="20" align="left"> 
         <select name="work">
           <option value="海贼">海贼</option>
           <option value="海军">海军</option>
           <option value="革命军">革命军</option>
           <option value="七武海">七武海</option>
           <option value="四皇">四皇</option>
           </select>
          </td>
          </tr> 
                   
         <tr>
         <td width="100" height="20" align="right">邮件:</td>
         <td width="400" headers="20" align="left">        
        <input type="text" id="emails" name="emails" size="30" maxlength="30" />
          </td>
          </tr>
         
  
        <tr>
        <td height="20" colspan="2">
        <input type="submit" name="submit" value="提交" />
        <input type="reset" name="reset" value="重置" />
        </td>
        </tr>
        </table>
        </form>
        </div>
        
       <div id="footer">Copyright @ 2019 海贼王:会员注册 | Designed by 陈泽楷</div> 
       
      </div>
</body>
</html>

人物简介页面效果截图：
在这里插入图片描述

人物简介页面主要代码实现：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>人物介绍</title>
<script type="text/javascript" src="JavaScript.js"></script>

</head>

<body>
<div id="container">
 <div id="nav">
    <div id="nav-menu">
         <li><a href="海贼王首页.html">网站首页</a></li>
         <li><a href="人物介绍.html">人物介绍</a></li>
         <li><a href="狂热行动.html">狂热行动</a></li>
         <li><a href="精彩篇章.html">精彩篇章</a></li>
         <li><a href="会员注册.html">会员注册</a></li>
     </ul>
    </div>
   </div>
   
  <div id="top"></div> 
  
   <div id="location">您现在的位置是:<a href="人物介绍.html">人物介绍</a>><a href="海贼王首页.html">网站首页</a>><a href="狂热行动.html">狂热行动</a>><a href="精彩篇章.html">精彩篇章</a>><a href="会员注册.html">会员注册</a>
  
<audio controls="controls">
  <source src="/i/song.ogg" type="audio/ogg">
  <source src="音乐素材/浜口史郎 - 最,最,最強!!!(H43).mp3" type="audio/mpeg">
</audio>    
  
     <div id="content"> 
    <h1 align="left" >草帽海贼团</h1>    
<p>草帽海贼团成员有<em>路飞、山治、索隆、乌索普、娜美、罗宾、乔巴、弗兰奇、布鲁克</em>九个人，并贯穿于海贼王的主线</p>
    
    <div id="caomao">
    <p><img src="images/路飞.jpg" alt="" height="560" width="127"/></p>
   <p>“草帽”蒙奇·D·路飞（モンキーD·ルフィ/Monkey D. Luffy<br />  
初次登场：漫画第1话<br />
年龄：17岁→19岁<br />
生日：5月5日<br />
血型：F型<br />
身高：172cm→174cm<br />
故乡：东海·风车村<br />
身份：草帽海贼团船长<br />
喜欢的食物：所有美食，首先是肉。<br />
爱好：喜欢探险，感兴趣于新奇怪异的事物<br />
梦想：找到ONE PIECE，并成为海贼王。<br />
恶魔果实：超人系橡胶果实<br />
身世：父亲是革命军首领蒙奇·D·龙，爷爷是海军中将英雄卡普。<br />
悬赏:15亿（蛋糕岛事件）<br />
    </p>
    </div>
     <br />
    <div id="caomao">
      <p><img src="images/索隆.jpg" alt="" height="560" width="127" /></p>
  <p>“海贼猎人”罗罗诺亚·索隆（ロロノア·ゾロ/Roronoa Zoro） <br />
初次登场：漫画第3话<br />
年龄：19岁→21岁<br />
生日：11月11日<br />
血型：XF型<br />
故乡：东海·霜月村<br />
身份：东海海贼赏金猎人→草帽海贼团战斗员<br />
身高：178cm→181cm<br />
喜欢的食物：白米，海兽的肉，适合下酒的食物<br />
爱好：睡觉、修炼、喝酒。<br />
缺点：路痴<br />
梦想：世界第一大剑豪<br />
悬赏：6千万（阿拉巴斯坦事件）→1亿2000万（司法岛事件）→3亿2000万（德雷斯罗萨篇）  <br />
    </p>
    </div>
    <br />

 <div id="caomao">
  <p><img src="images/山治.jpg" alt="" height="560" width="127" /></p>
 <p>
 “黑足”山治（サンジ/Sanji） <br />
初次登场：漫画第43话<br />
年龄：19岁→21岁<br />
生日：3月2日<br />
血型：S型RH阴性<br />
身份：海上餐厅巴拉蒂副料理长→草帽海贼团厨师<br />
故乡：北海<br />
身高：177cm→180cm<br />
喜欢的食物：辣味海鲜面，适合红茶的食物<br />
爱好：下厨，抽烟，浪漫幻想<br />
身世：文斯莫克一族三子<br />
梦想：寻找传说中的奇迹之海－ALL BLUE<br />
悬赏：7700万（司法岛事件）→1亿7700万（德雷斯罗萨篇）→3亿3000万（蛋糕岛事件）<br />
 </p>
 </div>
  </div>
  <br />

<div class="banner">
	<div class="banner_pic" id="banner_pic">
    <div class="pic"><img src="images/路飞2.jpg" alt="" width="1200" height="600" /></div>
    <div class="pic"><img src="images/山治2.jpg" alt="" width="1200" height="600" /></div>
    <div class="pic"><img src="images/索隆2.jpg" alt="" width="1200" height="600" /></div>
    <div class="pic"><img src="images/布鲁克2.jpg"alt="" width="1200" height="600" /></div>
    <div class="pic"><img src="images/弗兰奇2.jpg" alt="" width="1200" height="600" /></div>
    <div class="pic"><img src="images/罗宾2.jpg" alt="" width="1200" height="600" /></div>
    <div class="pic"><img src="images/娜美2.jpg" alt="" width="1200" height="600" /></div>
	<div class="pic"><img src="images/乌索普2.jpg" alt="" width="1200" height="600" /></div>
	<div class="pic"><img src="images/乔巴2.jpg" alt="" width="1200" height="600" /></div>
	</div>
	<ol id="button">
		<li class="current"></li>
		<li class="but"></li>
		<li class="but"></li>
        <li class="but"></li>
        <li class="but"></li>
        <li class="but"></li>
        <li class="but"></li>
        <li class="but"></li>
        <li class="but"></li> 
	</ol>
</div>
  <hr/>  
  

  <div id="sihuang">
  <h1 align="center">四皇</h1>
  <table width="1200" height="1000" border="3" align="center" cellpadding="5" cellspacing="5">
  <tr bgcolor="#CCCCCC">
  <th align="center">称号</th>
  <th align="center">姓名</th>
  <th align="center">简介</th>
  </tr>
  
  <tr>
  <td>白胡子 </td>
  <td>爱德华·纽盖特</td>
  <td>白胡子海贼团船长，被称为世界最强男人，过去与罗杰、金狮子，并成为三大传说中的海贼。曾经是洛克斯海贼团船员。震震果实能力者，顶上战争上被黑胡子海贼团杀死，享年72岁。原赏金50亿4600万贝里。</td>
  </tr>
  
  <tr>
  <td >红发</td>
  <td>香克斯</td>
  <td>红发海贼团船长，原罗杰海贼团的实习员，拥有强大的霸王色霸气，是路飞海贼之路的引路人，为了救路飞失去了左臂。六年前成为四皇。赏金40亿4890万贝里。</td>
  </tr>
  
    <tr>
  <td >百兽</td>
  <td>凯多</td>
  <td>百兽海贼团船长，被称为世界最强生物。曾经是洛克斯海贼团实习员。现与和之国将军霸占着和之国，并于BIG·MOM海贼团结盟。赏金46亿1110万贝里。</td>
  </tr>
   
   <tr>
  <td >BIG·MOM</td>
  <td>夏洛特·玲玲</td>
  <td>BIG·MOM海贼团船长，曾经是洛克斯海贼团船员。四皇中的唯一女性，魂魂果实能力者，托特兰王国统治者。与百兽海贼团结盟。赏金43亿8800万贝里。</td>
  </tr>
  
   <tr>
  <td >黑胡子</td>
  <td>马歇尔·D·蒂奇</td>
  <td>黑胡子海贼团提督，原白胡子海贼团二番队成员，暗暗果实、震震果实双能力者，极恶的世代之一，顶上战争杀死白胡子，夺取其果实能力，一年后成为四皇。赏金22亿4760万贝里。</td>
  </tr>
  </table>
  </div>
  
 <div id="main" class="main">
<div id="demo" class="demo">
<div id="indemo" class="indemo">
<div id="demo1" class="demo1">
<img src="images/白胡子.jfif"/>
<img src="images/红发.jpg"/>
<img src="images/凯多.jpg" height="300"/>
<img src="images/大妈.jpg"/>
<img src="images/黑胡子.jfif"/>

<div id="demo2" class="demo2"></div>
</div></div></div>
<script type="text/javascript">
var speed=30;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function marquee(){
	if(tab2.offsetWidth-tab.scrollLeft<=0){ tab.scrollLeft=0}
	else{ tab.scrollLeft++;}
	}
var timer= setInterval(marquee,speed);
tab.οnmοuseοver=function(){ clearInterval(timer)};
tab.οnmοuseοut=function(){ timer=setInterval(marquee,speed)};
</script>
<hr />

    <div id="haijun">
  <h1 align="center">海军</h1>
  <table width="1200" height="1000" border="3" align="center" cellpadding="5" cellspacing="5">
  <tr bgcolor="#CCCCCC">
  <th align="left">军衔</th>
  <th align="left">姓名</th>
  <th align="left">简介</th>
  </tr>
  
  <tr>
  <td rowspan="3">海军元帅 </td>
  <td>空</td>
  <td>现已升为世界政府全军统帅。</td>
  </tr>
  
  <tr>
  <td >战国</td>
  <td>人称佛之战国，前任元帅，罗杰时期的大将。人人果实幻兽种大佛形态能力者，顶上战争后辞去元帅职务。现任海军本部大督查。</td>
  </tr>
  
    <tr>
  <td>萨卡斯基</td>
  <td>称号赤犬，原三大将之一，岩浆果实能力者。顶上战争后在与青稚的元帅之战中获胜，成为海军元帅，并将海军本部迁往新世界。</td>
  </tr>
   
   <tr>
  <td rowspan="5">海军大将</td>
  <td>泽法</td>
  <td>人称黑腕，二十年前的海军大将。和卡普、战国是同期生，赤犬、青雉和黄猿等人的老师，因为不满杀死自己学生的海贼成为七武海而离开海军。</td>
  </tr>
  
   <tr>
  <td >波鲁萨利诺</td>
  <td>称号黄猿，现任大将，闪闪果实能力者。两年后率领海军讨伐了泽法。</td>
  </tr>
  
  <tr>
  <td >库赞</td>
  <td>称号青稚，原三大将之一，冰冻果实能力者。顶上战争后在与赤犬的元帅之战中败北，失去左腿，后离开海军，行踪不明。目前疑似与黑胡子合作。</td>
  </tr>
  
  <tr>
  <td >一笑</td>
  <td>称号藤虎，现任大将，拥有控制重力的能力，盲人。顶上战争后两年间通过世界征兵;破格提升的大将。其目的是废除王下七武海制度。</td>
  </tr>
  
  <tr>
  <td >绿牛</td>
  <td>本名不详，现任大将。顶上战争后两年间通过“世界征兵”破格提升的大将，被多弗朗明哥称作“实力强得没边的怪物”。</td>
  </tr>
  </table>
  <p><img src="images/三大将.jpg"  width="1120"/></p>
   <hr />
   
  <div id="gemingjun">
  <h1 align="center">革命军</h1>
  <table width="1200" height="1000" border="3" align="center" cellpadding="5" cellspacing="5">
  <tr bgcolor="#CCCCCC">
  <th align="center">职位</th>
  <th align="center">姓名</th>
  <th align="center">简介</th>
  </tr>
  
  <tr>
  <td>革命军总司令 </td>
  <td>蒙奇·D·龙</td>
  <td>革命军总司令，被政府认定为“世界最凶恶的罪犯”，是路飞的父亲、卡普的儿子。</td>
  </tr>
  
  <tr>
  <td >革命军参谋总长</td>
  <td>萨博</td>
  <td>革命军参谋总长，也是革命军的二把手，路飞的义兄，继承了艾斯的烧烧果实，出身于贵族。</td>
  </tr>
  
    <tr>
  <td >卡玛巴卡王国国王</td>
  <td>安布里奥·伊万科夫</td>
  <td>人妖，卡玛巴卡王国女王，被称作人妖王、奇迹之人，荷尔蒙果实能力者，曾被关进海底监狱，成为5.5层的女王，后与路飞等人成功越狱，顶上战争后曾指导山治。</td>
  </tr>
   
   <tr>
  <td >西军军队长</td>
  <td>茉莉</td>
  <td>巨人族，说话方式很娘的大叔，拥有将地面变成黏土一样的能力。</td>
  </tr>
  
   <tr>
  <td >东军军队长</td>
  <td>贝洛·贝蒂</td>
  <td>鼓舞果实能力者，可以通过鼓舞唤起人们潜藏在心底的力量。</td>
  </tr>
  
  <tr>
  <td >北军军队长</td>
  <td>乌鸦</td>
  <td>拥有控制乌鸦的能力，说话声音很小。</td>
  </tr>
  
  <tr>
  <td >南军军队长</td>
  <td>林德伯格</td>
  <td>疑似为毛皮族，用自己发明的武器战斗。</td>
  </tr>
  </table>
  </div>
  
  
<img src="images/龙.jpg" alt="" width="580" height="440" class="test"/>
<img src="images/萨博.jpg" alt="" width="580" height="440" class="test"/>
<img src="images/革命军队长1.jpg" alt="" width="580" height="440" class="test"/>
<img src="images/革命军队长2.jpg"alt="" width="580" height="440" class="test"/>
<img src="images/革命军队长3.jpg" alt="" width="580" height="440" class="test"/>
<img src="images/革命军队长4.jpg" alt="" width="580" height="440" class="test"/>
  
<div id="footer">Copyright @ 2019 海贼王:人物介绍 | Designed by</div>  
  
</div>
</body>
</html>

经常篇章页面效果截图：

在这里插入图片描述

精彩篇章主要代码实现：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>精彩篇章</title>
<script type="text/javascript" src="JavaScript.js"></script>
</head>

</head>

<body>
<div id="container">
 <div id="nav">
    <div id="nav-menu">
         <li><a href="海贼王首页.html">网站首页</a></li>
         <li><a href="人物介绍.html">人物介绍</a></li>
         <li><a href="狂热行动.html">狂热行动</a></li>
         <li><a href="精彩篇章.html">精彩篇章</a></li>
         <li><a href="会员注册.html">会员注册</a></li>
     </ul>
    </div>
   </div>
  <div id="top"></div>   
  
   <div id="location">您现在的位置是:<a href="精彩篇章.html">精彩篇章</a>><a href="海贼王首页.html">网站首页</a>><a href="人物介绍.html">人物介绍</a>><a href="狂热行动.html">狂热行动</a>><a href="会员注册.html">会员注册</a><hr />
   </div>

<audio controls="controls">
  <source src="/i/song.ogg" type="audio/ogg">
  <source src='音乐素材/田中公平,浜口史郎 - 生きる限り戦いはつづく.mp3' type="audio/mpeg">
</audio> 

<div class="banner">
	<div class="banner_pic" id="banner_pic">
    <div class="current"><img src="images/和之国.jpg" alt="" width="1200" height="520" /></div>
    <div class="pic"><img src="images/索隆5.jpg" alt="" width="1200" height="520" /></div>
	<div class="pic"><img src="images/索隆4.jpg" alt="" width="1200" height="520" /></div>
	</div>
	<ol id="button">
		<li class="current"></li>
		<li class="but"></li>
		<li class="but"></li>

      
	</ol>
</div>


<P>海贼王从1999年出版到现在，已经有20年整了，故事内容非常丰富，下面就是海贼王这20年来的精彩篇章。</P>
 <div id="content">
  <h1 align="center">精彩篇章</h1>
  <table width="1280" height="1000" border="3" align="center" cellpadding="5" cellspacing="5">
  <tr bgcolor="#CCCCCC">
  <th align="center">篇章</th>
  <th align="center">漫画</th>
  <th align="center">漫画集数</th>
  <th align="center">动漫</th>
  <th align="center">动漫集数</th>
  </tr>
  
  <tr>
  <td bgcolor="#CCCCCC">东海篇</td>
  <td>1~100</td>
  <td>100</td>
  <td>1~53</td>
  <td>53</td>
  </tr>
  
  <tr>
  <td bgcolor="#CCCCCC">前往伟大航道篇</td>
  <td>101~154</td>
  <td>54</td>
  <td>61~91</td>
  <td>31</td>
  </tr>
  
  <tr>
  <td bgcolor="#CCCCCC">阿拉巴斯坦篇</td>
  <td>155~216</td>
  <td>63</td>
  <td>92~129</td>
  <td>38</td>
  </tr>
  
  <tr>
  <td bgcolor="#CCCCCC">空岛篇</td>
  <td>217~302</td>
  <td>86</td>
  <td>144~195</td>
  <td>52</td>
  </tr>
  
  <tr>
  <td bgcolor="#CCCCCC">长链篇</td>
  <td>303~321</td>
  <td>19</td>
  <td>207~219</td>
  <td>13</td>
  </tr>
  
  <tr>
  <td bgcolor="#CCCCCC">水之都篇</td>
  <td>322~374</td>
  <td>53</td>
  <td>229~262</td>
  <td>34</td>
  </tr>
  
  <tr>
  <td bgcolor="#CCCCCC">司法岛篇</td>
  <td>375~441</td>
  <td>67</td>
  <td>263~325</td>
  <td>63</td>
  </tr>
  
  <tr>
  <td bgcolor="#CCCCCC">恐怖三桅帆船篇</td>
  <td>442~489</td>
  <td>48</td>
  <td>337~381</td>
  <td>45</td>
  </tr>
  
  <tr>
  <td bgcolor="#CCCCCC">香波地群岛篇</td>
  <td>490~513</td>
  <td>24</td>
  <td>385~405</td>
  <td>21</td>
  </tr>
  
  <tr>
  <td bgcolor="#CCCCCC">女儿岛篇</td>
  <td>514~523</td>
  <td>10</td>
  <td>408~417</td>
  <td>10</td>
  </tr>
  
  <tr>
  <td bgcolor="#CCCCCC">推进城篇</td>
  <td>524~549</td>
  <td>26</td>
  <td>422~452</td>
  <td>27</td>
  </tr>
  
  <tr>
  <td bgcolor="#CCCCCC">顶上战争篇</td>
  <td>550~597</td>
  <td>48</td>
  <td>459~516</td>
  <td>58</td>
  </tr>
  
  <tr>
  <td bgcolor="#CCCCCC">鱼人岛篇</td>
  <td>598~653</td>
  <td>56</td>
  <td>517~574</td>
  <td>58</td>
  </tr>
  
  <tr>
  <td bgcolor="#CCCCCC">庞克哈萨德篇</td>
  <td>654~699</td>
  <td>46</td>
  <td>579~625</td>
  <td>47</td>
  </tr>
  
  <tr>
  <td bgcolor="#CCCCCC">德雷斯罗萨篇</td>
  <td>700~801</td>
  <td>102</td>
  <td>629~746</td>
  <td>118</td>
  </tr>
  
  <tr>
  <td bgcolor="#CCCCCC">佐乌篇</td>
  <td>802~822</td>
  <td>21</td>
  <td>751~779</td>
  <td>29</td>
  </tr>
  
  <tr>
  <td bgcolor="#CCCCCC">蛋糕岛篇</td>
  <td>823~902</td>
  <td>80</td>
  <td>783~878</td>
  <td>96</td>
  </tr>
  
  <tr>
  <td bgcolor="#CCCCCC">世界会议篇</td>
  <td>903~908</td>
  <td>6</td>
  <td>879~890</td>
  <td>12</td>
  </tr>
  
  <tr>
  <td bgcolor="#CCCCCC">和之国篇</td>
  <td>909~还在更新</td>
  <td>还在更新</td>
  <td>889~还在更新</td>
  <td>还在更新</td>
  </tr>
</table>

<form >
<p>想观看更多点击这里--><a href="https://manhua.fzdm.com/02/?_=1514527725"><input type="button" name="更多" id="更多" value="更多" /></a></p>
</form>

<div id="bgm"></div>
  
<div id="footer">Copyright @ 2019 海贼王:精彩篇章 | Designed by 陈泽楷</div>  
  
</div>
<body>
</body>
</html>

更多源文件请到资源哪里下载！！！

@逆风boy

关注

39
点赞
踩
347

收藏

觉得还不错? 一键收藏
打赏
15
评论
基于Html+Css+javascript的动漫网站

1.前端三门技术学习Web前端技术需要掌握三门基本技术：HTML，CSS，JavaScript：HTML：HTML是网页内容的载体。内容就是网页制作者放在页面上想要用户浏览的信息，可以包含文件、图片、视频等CSS：CSS样式是表现，就像网页的外衣比字体、颜色变化等JavaScript：JavaScript用来实现网页上的特效效果。比如鼠标滑过弹出下拉菜单、鼠标滑过北京颜色改变等本次项目主要是介绍海贼王主题的简介，使用html+css+javascript来制作网站，实现项目的效果；index.h
复制链接

扫一扫