纯HTML+CSS网页设计期末作业（海贼王主题网站——图片可换，主题可换）

博主：命运之光
专栏：web网页制作大作业

网页最底下有视频可以观看网页效果，喜欢的可以在博主主页资源里免费下载(●’◡’●)让我们一起加油吧！！！（大一web课上的大作业展示，现在发出来分享给大家，不足之处后面会慢慢改正）

目录

  • 纯HTML+CSS网页设计期末作业（海贼王主题网站——图片可换，主题可换）
    • 效果展示
      • 海贼王首页
      • 海贼王首页源码
      • 海贼王图片欣赏
      • 海贼王图片欣赏源码
      • 海贼王人物简介
      • 海贼王人物简介源码
      • 海贼王网站时间线
      • 海贼王网站时间线源码
      • 海贼王人物集
      • 海贼王人物集源码
    • 说明
    • 视频展示

效果展示

海贼王首页

海贼王首页源码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta name="description" content=""><meta name="author" content="BBQ"><title>二次元网站  </title><meta name="keywords" content=""><meta name="description" content=""><link rel="shortcut icon" type="image/x-icon" href="海贼王网站统一.css"><link rel="stylesheet" href="海贼王网站统一.css"><link rel="stylesheet" href="海贼王网站统一.css"><!--[if lte IE 8]><link rel="stylesheet" href="css/iehack.css"><script src="js/html5shiv.min.js"></script><script src="js/respond.min.js"></script><![endif]--><script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "//hm.baidu.com/hm.js?05e4a554b37e54a1436450128ce7173c";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();</script><style type="text/css">.expertbox{width:840px;margin:40px auto 0 auto;}.it_expert{height:50px;position:relative;color:#686868;line-height:50px;}.it_expertp1{width:120px;height:50px;font-size:18px;text-indent:2em;color:#686868;line-height:50px;float:left;}.it_expertp2{width:200px;height:50px;float:right;text-align:center;}#it_awewe a{display:inline-table!important;}.it_expertspan1{margin-right:10px;color:#868585;display:inline-table;text-align:center;line-height:30px;}.it_expertspan2{color:#868585;display:inline-block;text-align:center;line-height:30px;}.it_expert3{}.it_expertxt{height:126px;border-bottom:1px solid #e4e4e4;position:relative;}.it_expertit{color:#434343;font-size:16px;padding-left:30px;padding-top:30px;padding-bottom:6px;position:relative;}.it_experconter{width:700px;padding:6px;padding-left:30px;color:#7d858c;position:relative;}</style>
</head>
<body>
<!-- Header -->
<header id="header" class=""><div class="container"><div class="global-nav"><button class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="brand" href="index.html"></a><nav class="navbar"><ul class="nav"><li class="active"><a href="海贼王首页.html" class="home-current">首页</a></li><li class=""><a href="海贼王图片欣赏.html">图片欣赏</a></li><li class=""><a href="海贼王人物简介.html">人物简介</a></li><li class=""><a href="海贼王网站时间线.html">时间线</a></li><li class=""><a href="海贼王人物集.html">人物集</a></li></ul></nav></div></div>
</header>
<!--Banner-->
<section class="carousel-top"><div class="banner"><div class="b-img"><a><img src="2006.jpg" height="483.99px" width="1576.1px"></a></div><div class="b-list"></div><a class="bar-left" href="#"><em></em></a><a class="bar-right" href="#"><em></em></a></div><!-- News -->
<section id="philosophy"><div class="container"><div class="row"><div class="item-title" style="padding-bottom:30px"><h1>《海贼王》</h1></div><div class="col-5 item-news"><div class="item-lists"><div class="news-img"><a href="#"><img src="9999.gif" alt=""></a></div><div class="news-text"><h4><a href="news-page.html">视频欣赏</a></h4><p>尾田荣一郎创作的漫画作品</p><p class="news-large">1997</p><p>7月22日</p></div></div></div><div class="col-7 item-axis"><div class="item-axis-list clearfix"><div class="item-sou"><form action=""><input  type="text" placeholder="人物搜索"><i class="icon-sou"></i><button>搜索</button></form></div><div class="it_expert3"><div id="hot_ranks2"><ul class="clearfix current" style="display:block"><li><a href="news-page.html"><div class="axis-time"><h4>路飞</h4><span>船长</span></div><div class="axis-title"><h5>橡胶人</h5><p>路飞是超人系“ 橡胶果实 ”能力者，全身拥有橡胶体质，在战斗中路飞利用发挥了这一体质，并在不断的战斗中升级自己的招式。 果实特点： 能够将身体的任何部位依自己的意思伸长和反弹，使普通的打击具有更强的威力，身体不会因为反作用力而受到伤害。</p></div></a></li><li><a href="#"><div class="axis-time"><h4>索隆</h4><span>剑士</span></div><div class="axis-title"><h5>大剑豪</h5><p>索隆是路飞第二个上船的伙伴，同时也是草帽团名副其实的副团长，自身是一名三刀流剑客，目标是成为世界第一大剑豪，在跟随米霍克修行两年之后，实力大增</p></div></a></li><li><a href="#"><div class="axis-time"><h4>山治</h4><span>厨师</span></div><div class="axis-title"><h5>黑脚</h5><p>草帽一伙 的厨师，因踢技快准狠被海军称之为“ 黑足 ”，悬赏金为3亿3000万贝里</p></div></a></li></ul><ul class="clearfix current" style="display:none"><li><a href="#"><div class="axis-time"><h4></h4><span></span></div><div class="axis-title"><h5></h5><p></p></div></a></li><li><a href="#"><div class="axis-time"><h4></h4><span></span></div><div class="axis-title"><h5></h5><p> </p></div></a></li><li><a href="#"><div class="axis-time"><h4></h4><span></span></div><div class="axis-title" style="border-bottom:none"><h5></h5><p></p></div></a></li></ul><ul class="clearfix current" style="display:none"><li><a href="#"><div class="axis-time"><h4></h4><span></span></div><div class="axis-title"><h5></h5><p></p></div></a></li><li><a href="#"><div class="axis-time"><h4></h4><span></span></div><div class="axis-title"><h5></h5><p></p></div></a></li><li><a href="#"><div class="axis-time"><h4></h4><span></span></div><div class="axis-title" style="border-bottom:none"><h5></h5><p></p></div></a></li></ul></div></div><div class="button-cut"><span id="it_awewe" class="it_awewe"><a href="javascript:volid(0);" class="cut-up it_expertspan1" id="previous2"></a><a href="javascript:volid(0);" class="cut-dow it_expertspan2" id="next2"></a></span></div></div></div></div></div>
</section><!-- Taste -->
<section id="net"><div class="container"><div class="row"><div class="col-3"><div class="items"><img src="2001.jpg" alt=""><h3>世界海军</h3></div></div><div class="col-3"><div class="items"><img src="2002.jpg" alt=""><h3>海贼</h3></div></div><div class="col-3"><div class="items"><img src="2003.jpg" alt=""><h3>革命军</h3></div></div><div class="col-3"><div class="items"><img src="2004.jpg" alt=""><h3>世界政府</h3></div></div></div></div>
</section><!-- Footer -->
<footer id="footer"><div class="container"><div class="copy">制作</div><div class="copy">天羽组</span>   </div></div>
</footer><script src="js/jquery-1.8.3.min.js"></script>
<script src="js/banner.js"></script>
<script src="js/navbar.js"></script>
<script src="js/web.core.js"></script>
<script src="js/web.adtabs.js"></script>
<script src="js/web.subnav.js"></script>
<script src="js/web.ui.js"></script>
<script type="text/javascript">$(function(){abc2();});function abc2(){var $obj = $('#hot_ranks2 ul');var len  = $obj.length;var i = 0;$("#next2").click(function(){i++;if(i==len){i = 0;}$obj.stop(true,true).hide().eq(i).fadeIn(600);return false;});$("#previous2").click(function(){i--;if(i==-1){i = len-1;}$obj.stop(true,true).hide().eq(i).fadeIn(600);return false;});}$(".it_expertxt").hover(function(){$(this).find(".it_expertit").css("color","#fff");$(this).find(".it_experconter").css("color","#fff");var div = $(this).find(".it_expertit");var div2 = $(this).find(".it_experconter")div.addClass("dest").animate({left: 20}, 200);div2.addClass("dest").animate({left: 20}, 200);},function(){var div = $(this).find(".it_expertit");var div2 = $(this).find(".it_experconter")$(this).find(".it_expertit").css("color","#434343");$(this).find(".it_experconter").css("color","#7d858c");div.addClass("dest").animate({left: 0}, 200);div2.addClass("dest").animate({left: 0}, 200);});</script>
</body>
</html>

海贼王图片欣赏

海贼王图片欣赏源码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta name="description" content=""><meta name="author" content="BBQ"><title>二次元网站</title><meta name="keywords" content=""><meta name="description" content=""><link rel="shortcut icon" type="image/x-icon" href="海贼王图片欣赏.css"><link rel="stylesheet" href="海贼王图片欣赏.css"><link rel="stylesheet" href="海贼王图片欣赏.css"><!--[if lte IE 8]><link rel="stylesheet" href="css/iehack.css"><script src="js/html5shiv.min.js"></script><script src="js/respond.min.js"></script><![endif]--><script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "//hm.baidu.com/hm.js?05e4a554b37e54a1436450128ce7173c";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();</script>
</head>
<body>
<!-- Header -->
<header id="header" class=""><div class="container"><div class="global-nav"><button class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="brand" href="index.html"></a><nav class="navbar"><ul class="nav"><li class=""><a href="海贼王首页.html">首页</a></li><li class="active"><a href="海贼王图片欣赏.html">图片欣赏</a></li><li class=""><a href="海贼王人物简介.html">人物简介</a></li><li class="-ente"><a href="海贼王网站时间线.html">时间线</a></li><li class=""><a href="海贼王人物集.html">人物集</a></li></ul></nav></div></div>
</header><!-- Product -->
<section id="Taste" class="Talents" style="margin-bottom:0;"><div class="container"><div class="item-title"><h1>四皇</h1></div><div class="row clearfix" style="padding-top:10px"><div class="col-12 clearfix"><div class="item-ad-img"><img src="22222.jpg" alt="香克斯"></div></div><div class="taste-text clearfix "><h3>红发海贼团</h3><p>红发海贼团是强大的海贼团，干部个个大名鼎鼎，团内悬赏金的平均值非常高，被称作是最平衡的铁壁海贼团。是实力与悬赏金额最平均的海贼团。主船为雷德·佛斯号。</p></div><div class="col-12 clearfix"><div class="item-ad-img"><img src="22223.jpg" alt="白胡子"></div></div><div class="taste-text clearfix "><h3>白胡子海贼团</h3><p>白胡子海贼团被世人称之为是罗杰海贼团解散后的最强海贼团，本团有1600人，分16队，每队由1位队长带领。旗下有43个新世界海贼团，共5万人。主船为莫比迪克号。</p></div><div class="col-12 clearfix"><div class="item-ad-img"><img src="22224.jpg" alt="百兽"></div></div><div class="taste-text clearfix "><h3>百兽海贼团</h3><p>百兽海贼团是以动物系为主的强大海贼团，高级干部都是恶魔果实动物系的稀有种，下级成员为人造恶魔果实动物系能力者，团里有500名人造动物系恶魔果实能力者。</p></div><div class="col-12 clearfix"><div class="item-ad-img"><img src="22225.jpg" alt="big"></div></div><div class="taste-text clearfix "><h3>BIGMOM海贼团</h3><p>BIG·MOM海贼团是以国家和家族为主的强大海贼团，领地有34座岛屿，分别由34个大臣治理。BIG·MOM有43位丈夫、46个儿子、39个女儿，核心成员共129人，主船为女王妈妈唱歌号。</p></div></div><div class="row"><div class="col-3"><div class="item-food item-food-4"><a href="#" target="dialog"><h3>弗兰克</h3></a></div></div><div class="col-3"><div class="item-food item-food-5"><a href="#" target="dialog"><h3>乔巴</h3></a></div></div><div class="col-3"><div class="item-food item-food-6"><a href="#" target="dialog"><h3>火拳艾斯</h3></a></div></div><div class="col-3"><div class="item-food item-food-7"><a href="#" target="dialog"><h3>骷髅音乐家</h3></a></div></div><div class="col-3"><div class="item-food item-food-8"><a href="#" target="dialog"><h3>天龙人</h3></a></div></div><div class="col-3"><div class="item-food item-food-9"><a href="#" target="dialog"><h3>机器弗兰克</h3></a></div></div><div class="col-3"><div class="item-food item-food-10"><a href="#" target="dialog"><h3>娜美</h3></a></div></div><div class="col-3"><div class="item-food item-food-11"><a href="#" target="dialog"><h3>黑胡子</h3></a></div></div><div class="col-3"><div class="item-food item-food-12"><a href="#" target="dialog"><h3>白胡子</h3></a></div></div><div class="col-3"><div class="item-food item-food-13"><a href="#" target="dialog"><h3>绿胖子</h3></a></div></div><div class="col-3"><div class="item-food item-food-14"><a href="#" target="dialog"><h3>黑帽子</h3></a></div></div><div class="col-3"><div class="item-food item-food-15"><a href="#" target="dialog"><h3>罗宾</h3></a></div></div></div></div>
</section><!-- Footer -->
<footer id="footer"><div class="container"><div class="copy">制作</div><div class="copy"><span>天羽组</span>   </div></div>
</footer>
<div class="dialog"><div class="dialog-inner"><div class="dialog-container"><div class="dialog-heading"><a class="close" href="javascript:web.dialog.close()"><span></span><span></span></a></div><div class="dialog-body"><div class="dialog-text"><h1></h1><img src="img/food/f-t.jpg" alt=""><p></p><p></p><p></p><p></p></div></div></div></div>
</div>
<div class="dialog-backdrop"></div>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/banner.js"></script>
<script src="js/navbar.js"></script>
<script src="js/web.core.js"></script>
<script src="js/web.adtabs.js"></script>
<script src="js/web.subnav.js"></script>
<script src="js/web.ui.js"></script>
</body>
</html>

海贼王人物简介

海贼王人物简介源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta name="description" content=""><meta name="author" content="BBQ"><title>主烤官</title><meta name="keywords" content=""><meta name="description" content=""><link rel="shortcut icon" type="image/x-icon" href="海贼王网站统一.css"><link rel="stylesheet" type="text/css" href="海贼王网站统一.css"><!--[if lte IE 8]><link rel="stylesheet" href="css/iehack.css"><script src="js/html5shiv.min.js"></script><script src="js/respond.min.js"></script><![endif]--><script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "//hm.baidu.com/hm.js?05e4a554b37e54a1436450128ce7173c";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();</script></head>
<body>
<!-- Header -->
<header id="header" class=""><div class="container"><div class="global-nav"><button class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="brand" href="index.html"></a><nav class="navbar"><ul class="nav"><li><a href="海贼王首页.html" >首页</a></li><li ><a href="海贼王图片欣赏.html">图片欣赏</a></li><li class="active"><a href="海贼王人物简介.html">人物简介</a></li><li ><a href="海贼王网站时间线.html">时间线</a></li><li><a href="海贼王人物集.html">人物集</a></li></ul></nav></div></div>
</header><!-- Product -->
<section id="greenx" class="carousel-top clearfix"><div class="container"><div class="row"><div class="item-title"><h1>人物简介</h1></div><div class="col-4"><div class="item"><div class="item-mind-1"><img src="1001.jpg" alt=""></div><h2>路飞</h2><p>草帽海贼团船长，路飞的标志性 草帽一伙中的战斗员，是悬赏过 草帽海贼团厨师，金发，有着卷 草帽海贼团的航海士，特征是橘</p></div></div><div class="col-4"><div class="item"><div class="item-mind-2"><img src="1002.jpg" alt=""></div><h2>索隆</h2><p>东海霜月村出身，是使用三把刀战斗的三刀流剑士。立志成为世界第一大剑豪。之后加入“草帽一伙” ，随着“草帽一伙”以成为世界第一大剑豪的目标航行</p></div></div><div class="col-4"><div class="item"><div class="item-mind-3"><img src="1003.jpg" alt=""></div><h2>山治</h2><p>草帽一伙 的厨师，因踢技快准狠被海军称之为“ 黑足 ”，悬赏金为3亿3000万贝里。</p></div></div></div></div>
</section><!-- money -->
<section id="sub-shipping"><div class="container" style="padding-top:0;"><div class="row"><div class="item-title item-title-money"><h1>草帽海贼团三小强</h1></div></div></div></section><section id="sub-shipping1" class="clearfix"><div class="containe clearfix" style="padding-top:0;"><div class=""><div class="item-title"><h1>路飞</h1></div><div class="col-12"><div class="item-string"><img src="777.jpg" alt=""></div></div></div></div>
</section><section id="sub-shipping2" class="clearfix"><div class="containe clearfix" style="padding-top:0;"><div class=""><div class="item-title"><h1>索隆</h1></div><div class="col-12"><div class="item-string"><img src="888.jpg" alt=""></div></div></div></div>
</section><section id="sub-shipping3" class="clearfix"><div class="containe clearfix" style="padding-top:0;"><div class=""><div class="item-title"><h1>山治</h1></div><div class="col-12"><div class="item-string"><img src="999.jpg" alt=""></div></div></div></div>
</section><section id="sub-shipping5" class="clearfix"><div class="containe clearfix" style="padding-top:0;"><div class=""><div class="item-title"><h1>草帽一伙</h1></div><div class="col-12"><div class="item-string"><img src="1000.jpg" alt=""></div></div></div></div>
</section><!-- Footer -->
<footer id="footer"><div class="container"><div class="copy">制作</div><div class="copy"><span>天羽组</span>   </div></div>
</footer><script src="js/navbar.js"></script>
<script src="js/web.core.js"></script>
<script src="js/web.adtabs.js"></script>
<script src="js/web.subnav.js"></script>
<script src="js/web.ui.js"></script>
</body>
</html>

海贼王网站时间线

海贼王网站时间线源码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta name="description" content=""><meta name="author" content="BBQ"><title>企业概况-主烤官</title><meta name="keywords" content=""><meta name="description" content=""><link rel="shortcut icon" type="image/x-icon" href="海贼王网站统一.css"><link rel="stylesheet" href="海贼王网站统一.css"><link rel="stylesheet" href="海贼王网站统一.css"><!--[if lte IE 8]><link rel="stylesheet" href="css/iehack.css"><script src="js/html5shiv.min.js"></script><script src="js/respond.min.js"></script><![endif]--><script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "//hm.baidu.com/hm.js?05e4a554b37e54a1436450128ce7173c";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();</script>
</head>
<body>
<!-- Header -->
<header id="header" class=""><div class="container"><div class="global-nav"><button class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="brand" href="index.html"></a><nav class="navbar"><ul class="nav"><li class=""><a href="海贼王首页.html">首页</a></li><li class=""><a href="海贼王图片欣赏.html">图片欣赏</a></li><li class=""><a href="海贼王人物简介.html">人物简介</a></li><li class="active"><a href="海贼王网站时间线.html" class="ente-current">时间线</a></li><li class=""><a href="海贼王人物集.html">人物集</a></li></ul></nav></div></div>
</header><!-- Product -->
<section id="" class="Talents profile"><div class="container profile-color"><div class="item-title"><h1>经历概述</h1></div><div class="profile-text"><p>ONE PIECE”在故事中为“一个大秘宝”之意。故事描述男主角‘草帽’蒙其·D·路飞为了当上“海贼王”而踏上“伟大航道”及与其伙伴的经历。传说中‘海贼王’哥尔·D·罗杰在死前说出他留下了具有财富、名声、力量世界第一的宝藏“ONE PIECE”，许多人为了争夺“ONE PIECE”，争相出海，许多海贼开始树立霸权，而形成了“大海贼时代”。十年后，路飞为了要实现与因救他而断臂的四皇‘红发’香克斯的约定而出海，在遥远的路途上找寻着志同道合的伙伴，一起进入“伟大航道”，目标当上“海贼王”。</p></div></div>
</section><!-- News -->
<section class="profile profile-s"><div class="item-title"><h1 style="color:#cd172c">大事记</h1></div><div><div class="container"><div id="timeline"><div class="timeline-item"><div class="timeline-icon"><img src="img/icon/icon-time.png" alt=""><span>2009</span></div><div class="timeline-content right"><h2>聚集伙伴</h2><p>ONE PIECE”在故事中为“一个大秘宝”之意。故事描述男主角‘草帽’蒙其·D·路飞为了当上“海贼王”而踏上“伟大航道”及与其伙伴的经历。传说中‘海贼王’哥尔·D·罗杰在死前说出他留下了具有财富、名声、力量世界第一的宝藏“ONE PIECE”，许多人为了争夺“ONE PIECE”，争相出海，许多海贼开始树立霸权，而形成了“大海贼时代”。十年后，路飞为了要实现与因救他而断臂的四皇‘红发’香克斯的约定而出海，在遥远的路途上找寻着志同道合的伙伴，一起进入“伟大航道”，目标当上“海贼王”。</p></div></div><div class="timeline-item"><div class="timeline-icon"><img src="img/icon/icon-time.png" alt=""><span>2010</span></div><div class="timeline-content right"></div></div><div class="timeline-item"><div class="timeline-icon timeline-icon-s"><img src="img/icon/icon-time-s.png" alt=""></div><div class="timeline-content timeline-content-s text-right"><h2>遭遇挫折 </h2><p>ONE PIECE”在故事中为“一个大秘宝”之意。故事描述男主角‘草帽’蒙其·D·路飞为了当上“海贼王”而踏上“伟大航道”及与其伙伴的经历。传说中‘海贼王’哥尔·D·罗杰在死前说出他留下了具有财富、名声、力量世界第一的宝藏“ONE PIECE”，许多人为了争夺“ONE PIECE”，争相出海，许多海贼开始树立霸权，而形成了“大海贼时代”。十年后，路飞为了要实现与因救他而断臂的四皇‘红发’香克斯的约定而出海，在遥远的路途上找寻着志同道合的伙伴，一起进入“伟大航道”，目标当上“海贼王”。</p></div></div><div class="timeline-item"><div class="timeline-icon"><img src="img/icon/icon-time.png" alt=""><span>2011</span></div><div class="timeline-content right"></div></div><div class="timeline-item"><div class="timeline-icon timeline-icon-s"><img src="img/icon/icon-time-s.png" alt=""></div><div class="timeline-content right  timeline-content-s"><h2>重新出发</h2><p>ONE PIECE”在故事中为“一个大秘宝”之意。故事描述男主角‘草帽’蒙其·D·路飞为了当上“海贼王”而踏上“伟大航道”及与其伙伴的经历。传说中‘海贼王’哥尔·D·罗杰在死前说出他留下了具有财富、名声、力量世界第一的宝藏“ONE PIECE”，许多人为了争夺“ONE PIECE”，争相出海，许多海贼开始树立霸权，而形成了“大海贼时代”。十年后，路飞为了要实现与因救他而断臂的四皇‘红发’香克斯的约定而出海，在遥远的路途上找寻着志同道合的伙伴，一起进入“伟大航道”，目标当上“海贼王”。</p></div></div><div class="timeline-item"><div class="timeline-icon"><img src="img/icon/icon-time.png" alt=""><span>2015</span></div><div class="timeline-content text-right"><h2>被封五皇</h2><p>ONE PIECE”在故事中为“一个大秘宝”之意。故事描述男主角‘草帽’蒙其·D·路飞为了当上“海贼王”而踏上“伟大航道”及与其伙伴的经历。传说中‘海贼王’哥尔·D·罗杰在死前说出他留下了具有财富、名声、力量世界第一的宝藏“ONE PIECE”，许多人为了争夺“ONE PIECE”，争相出海，许多海贼开始树立霸权，而形成了“大海贼时代”。十年后，路飞为了要实现与因救他而断臂的四皇‘红发’香克斯的约定而出海，在遥远的路途上找寻着志同道合的伙伴，一起进入“伟大航道”，目标当上“海贼王”。</p></div></div></div></div></div>
</section>
<!-- Footer -->
<footer id="footer"><div class="container"><div class="copy">制作</div><div class="copy">天羽组</span>   </div></div>
</footer><script src="js/jquery-1.8.3.min.js"></script>
<script src="js/banner.js"></script>
<script src="js/navbar.js"></script>
<script src="js/web.core.js"></script>
<script src="js/web.adtabs.js"></script>
<script src="js/web.subnav.js"></script>
<script src="js/web.ui.js"></script>
</body>
</html>

海贼王人物集

海贼王人物集源码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="format-detection" content="telephone=no"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta name="description" content=""><meta name="author" content="BBQ"><title>联系我们-主烤官</title><meta name="keywords" content=""><meta name="description" content=""><link rel="shortcut icon" type="image/x-icon" href="海贼王网站统一.css"><link rel="stylesheet" href="海贼王网站统一.css"><link rel="stylesheet" href="海贼王网站统一.css"><!--[if lte IE 8]><link rel="stylesheet" href="css/iehack.css"><script src="js/html5shiv.min.js"></script><script src="js/respond.min.js"></script><![endif]--><script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "//hm.baidu.com/hm.js?05e4a554b37e54a1436450128ce7173c";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();</script>
</head>
<body>
<!-- Header -->
<header id="header" class=""><div class="container"><div class="global-nav"><button class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="brand" href="index.html"></a><nav class="navbar"><ul class="nav"><li class=""><a href="海贼王首页.html" >首页</a></li><li class=""><a href="海贼王图片欣赏.html">图片欣赏</a></li><li class=""><a href="海贼王人物简介.html">人物简介</a></li><li class=""><a href="海贼王网站时间线.html">时间线</a></li><li class="active"><a href="海贼王人物集.html" class="menn-current">人物集</a></li></ul></nav></div></div>
</header><!-- Product -->
<section id="greenx" class="Talents"><div class="container"><div class="item-title"><h1>人物集</h1></div><div class="list"><div class="jobs-box"> <!-- jobs-box 循环列表 --><div class="jobs-title">人物</div><div class="jobs-content" style="display: block;"><div class="jobs-list clearfix"><ul><li>海军  </li><li>海贼</li><li>革命军</li><li>海贼王</li></ul></div><h3>海军：</h3><p>1、海军组织结构：海军组织分为本部与支部，海军本部原驻扎于伟大航路前半段城市“马林梵多”，被称为世界上最坚固的要塞，顶上战争后与原G-1支部交换位置，迁往新世界。</p><p>2、军衔架构：元帅大将中将少将准将大佐中佐少佐大尉中尉少尉准尉曹长军曹伍长一等兵二等三等兵杂用</p><p>3、海军制服：海贼王中的海军，官阶尉官（含）以上的，都穿着写着正义二字的外套。</p><h3>海贼：</h3><p>时值“大海贼时代”，为了寻找传说中海贼王罗杰所留下的大秘宝“ONE PIECE”，无数海贼扬起旗帜，互相争斗。有一个梦想成为海贼王的少年叫路飞，他因误食“恶魔果实”而成为了橡皮人，在获得超人能力的同时付出了一辈子无法游泳的代价。十年后，路飞为实现与因救他而断臂的香克斯的约定而出海，他在旅途中不断寻找志同道合的伙伴，开始了以成为海贼王为目标的冒险旅程</p><h3>革命军：</h3><p>1、革命军由蒙奇·D·龙领导，目的是推翻支配着世界政府的天龙人的不平等统治。原本的根据地在伟大航路的白土之岛“巴尔迪哥”，后被黑胡子海贼团摧毁。漫画904话透漏根据地迁移到了人妖岛的“桃色乐园”卡玛巴卡王国上。</p><p>2、组织设定：世界政府将之视为世界稳定的最大威胁；然而，其性质却有别于海贼，因一般海贼并不会主动去攻击政府或海军，但革命军却会策动推翻国家的政权。</p><p>3、组织成员：蒙奇·D·龙，萨博，贝洛·贝蒂，林德伯格。</p><p>4、具有敬业精神，有强烈的竞争意识，能积极面对工作挑战</p><h3>海贼王：</h3><p>拥有财富、名声、权力，这世界上的一切的男人 “海贼王”哥尔·D·罗杰，在被行刑受死之前说了一句话，让全世界的人都涌向了大海。“想要我的宝藏吗？如果想要的话，那就到海上去找吧，我全部都放在那里。</p><div class="jobs-ads"><p></p><p></p></div></div></div></div></div>
</section>
<!-- News -->
<section id="philosophy"><div class="container"><div class="item-title"><h1>海贼王</h1></div><div class="jobs-add clearfix"><div class="txt-bj"><h2></h2><p></p><p></p></div></div></div></section>
<!-- Beijing -->
<!-- Footer -->
<footer id="footer"><div class="container"><div class="copy">制作</div><div class="copy">天羽组</span>   </div></div>
</footer><script src="js/jquery-1.8.3.min.js"></script>
<script src="js/banner.js"></script>
<script src="js/navbar.js"></script>
<script src="js/web.core.js"></script>
<script src="js/web.adtabs.js"></script>
<script src="js/web.subnav.js"></script>
<script src="js/web.ui.js"></script>
</body>
</html>

说明

由于上传CSS文件，会导致字数太多，所以将网页的所有文件源代码包括图片CSS文件都上传到了博主主页中的资源里面，免费的，有需要的自取哈(●’◡’●)

视频展示

纯HTML+CSS网页设计期末作业（海贼王主题网站图片可换）

需要网页的可以到博主的主页资源里面免费下载(●’◡’●)，后续有时间博主会持续更新之前大一做过的网站和自己在学习中收集的网页模板，资源和网站，谢谢大家的支持

纯HTML+CSS网页设计期末作业（海贼王主题网站——图片可换，主题可换）相关推荐

  1. 纯HTML+CSS网页设计期末作业

    目录 效果展示: index页面 EDG战队 页面 选手介绍 页面 获奖记录 页面 夺冠瞬间 页面 海贼王 页面 海贼王(其二) 页面 精彩视频 页面 部分HTML代码 部分CSS代码 Hello,小 ...

  2. HTML+CSS网页设计期末课程大作——轮滑运动-人物介绍主题(10页)

    HTML+CSS网页设计期末课程大作--轮滑运动-人物介绍主题(10页) 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. ...

  3. HTML+CSS网页设计期末课程大作——运动系列NBA篮球主题(7页) 大学生运网页作品 篮球设计作业模板

    HTML+CSS网页设计期末课程大作--运动系列NBA篮球主题(7页) 大学生运网页作品 篮球设计作业模板 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶 ...

  4. HTML+CSS网页设计期末课程大作——绿色精美全民健身网站(10页) dreamweaver作业静态HTML网页设计模板

    HTML+CSS网页设计期末课程大作--绿色精美全民健身网站(10页) dreamweaver作业静态HTML网页设计模板 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物 ...

  5. HTML5+CSS大作业——彭于晏明星(15页) _网页设计期末作业

    HTML5+CSS大作业--彭于晏明星(15页) _网页设计期末作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明 ...

  6. html网页设计代码作业——家乡介绍-长治(8页) HTML+CSS+JavaScript 学生DW网页设计作业成品 html网页制作期末大作业成品_网页设计期末作业

    HTML5期末大作业:家乡介绍网站设计--家乡介绍-长治(8页) HTML+CSS+JavaScript 学生DW网页设计作业成品 html网页制作期末大作业成品_网页设计期末作业 常见网页设计作业题 ...

  7. html期末作业代码网页设计——云南民族文化(8页) HTML+CSS+JavaScript html网页制作期末大作业成品_网页设计期末作业

    HTML5期末大作业:家乡文化网站设计--云南民族文化(8页) HTML+CSS+JavaScript html网页制作期末大作业成品_网页设计期末作业 常见网页设计作业题材有 个人. 美食. 公司. ...

  8. HTML+CSS网页设计期末课程大作——体育篮球(5页面)大学生体育运动网页设计模板代码 校园篮球网页作业成品

    HTML+CSS网页设计期末课程大作--体育篮球(5页面)大学生体育运动网页设计模板代码 校园篮球网页作业成品 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. ...

  9. 学生网页设计与制作成品 HTML5+CSS大作业——黑色主题个人博客(5页) 网页设计期末作业个人主页

    HTML5+CSS大作业--黑色主题个人博客(5页) 网页设计期末作业个人主页 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. ...

最新文章

  1. arduino点阵声音频谱_基于Arduino和频谱分析的LED音乐课节拍器
  2. Android Thread第二次Thread.start()报错的疑问
  3. RemoveError: ‘requests‘ is a dependency of conda and cannot be removed from conda‘s operating envir
  4. 【Linux开发】V4L2应用程序框架
  5. 如何用matlab测a相相电流,电流平均值谐波检测方法MATLAB仿真
  6. java类的两个基本成分_Java类文件的基本结构
  7. 2+22+222+2222（直到n个2的精确计算）
  8. Bugtags 2016-06-16 更新内容
  9. 计算机内存不足吃鸡怎么办,Win10玩吃鸡游戏提示虚拟内存不足怎么办？
  10. To be a tough man
  11. Vmware、Hyper-V、Virtual PC虚拟机运用usb server使用USB加密狗设备
  12. 高精度ua级恒流源_一种高精度可调恒流源电路的制作方法
  13. 2022 极术通讯-安谋科技纷争尘埃落定，本土半导体产业基石更稳
  14. 1908： 【18NOIP提高组】填数游戏
  15. 前端如何实现商品规格
  16. System Development Life Cycle(SDLC)系统生命周期
  17. 笔记本外接二个显示器
  18. 计算机颜色系统是三大色彩体系,色彩体系三大属性学习
  19. Altium designer 在原理图及PCB中高亮某一条网络的三种方法
  20. 求自然数e的近似值，要求误差小于10 -6

热门文章

  1. python中常见的漏洞_Python常见安全漏洞及修复方法集合！你所不会的这里都有！...
  2. 【Python】大数据挖掘课程作业1——使用爬虫爬取B站评论、弹幕与UP主的投稿视频列表
  3. 迅捷CAD编辑器中我们怎么快速选择工具，提高绘图效率？
  4. ubuntn卸载显卡驱动后无法进入图形界面
  5. vue简单实现模糊搜索
  6. docker搭建jira
  7. firefox 全平台，同步书签
  8. 字节流（IO流）概述、字节流(写入/输出)数据(3种)和换行、追加写入、异常处理办法、字节缓冲流、字节流复制图片视频案例
  9. 小米商城html代码_微服务架构实战：商城的用户登录与账户切换设计、订单查询设计...
  10. npm ERR! enoent This is related to npm not being able to find a file.解决