當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

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

發布時間：2023/12/8 javascript 50 豆豆

生活随笔收集整理的這篇文章主要介紹了基于Html+Css+javascript的动漫网站小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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:176pxheight: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" 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>

經常篇章頁面效果截圖：

精彩篇章主要代碼實現：

更多源文件請到資源哪里下載！！！

總結

以上是生活随笔為你收集整理的基于Html+Css+javascript的动漫网站的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：《关键信息基础设施安全保护条例》解读
下一篇： Spring Boot2 总结(二) S