时间：2023-10-15 13:54:01 | 来源：网站运营
时间：2023-10-15 13:54:01 来源：网站运营
HTML+CSS+JS网页设计期末课程大作业——海贼王(8个页面)动漫网页设计：HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
在线咨询
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>海贼王</title> <style type="text/css"> @import"修饰.css"; </style></head><body> <p style="text-align: center;"> <img src="素材/顶部长图.jpg" width="80%" height="300px" border="1"> </p> <table style="color: white;" width = "80%" height = "50%" border = "1" cellspacing = "0" align = "center" > <tr> <th bgcolor="DarkRed"> <a href="网站首页.html " style="color: white;" class="abc">网站首页</a> </th> <th bgcolor="DarkRed"> <a href="TV版目录.html " style="color: white;" class="abc">TV版目录</a> </th> <th bgcolor="DarkRed"> <a href="角色资料.html " style="color: white;" class="abc">角色资料</a> </th> <th bgcolor="DarkRed"> <a href="精选壁纸.html " style="color: white;" class="abc">精选壁纸</a> </th> <th bgcolor="DarkRed"> <a href="衍生作品.html " style="color: white;" class="abc">衍生作品</a> </th> <th bgcolor="DarkRed"> <a href="果实大全.html " style="color: white;" class="abc">果实大全</a> </th> <th bgcolor="DarkRed"> <a href="海贼论坛.html " style="color: white;" class="abc">海贼论坛</a> </th> <th bgcolor="DarkRed"> <a href="关于我们.html " style="color: white;" class="abc">关于我们</a> </th> </tr> </table> <div class="div11"><font color="white" size="7">海贼王</font></div> <p class="p" style="font-size: 20px; color:white"> <img src="素材/首页.jpg" width = "30%" height = "50%" class="img"></img> 基本简介 <br></br> 《海贼王》是日本漫画家尾田荣一郎的作品，描述的是一个名叫路飞的少年想成为海贼王， 因误食了香克斯收藏的恶魔果实，变成了橡胶人的故事。恶魔果实使路飞永远不能游泳， 但他始终没有改变成为海贼王的理想“找到传说中哥尔•D•罗杰的秘宝，并且成为海贼王”开始了冒险之旅。 <br></br><br></br> 剧情简介 <br></br> 财富、名声、权力，曾经拥有世界上一切的“海贼王”哥尔·D·罗杰，在临死前留下了一句话， 让全世界的人们，趋之若鹜，奔向大海：“想要我的财宝吗？想要的话可以给你，去伟大的航道找吧！ 我把一切都放在那里了！”于是所有的人们开始起航，趋之若鹜的奔向大海，世界迎来了“大海贼时代” </p> <div class="div12"></div> <br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br> <br></br><br></br><br></br> <div class="div12"><font color="white" size="7">原声资料</font></div> <br></br><br></br> <div class="div12"><font color="white" size="5">OP 片头曲</font></div> <br></br> <table style="color: white;" width = "80%" height = "50%" border = "1" cellspacing = "0" align = "center" > <tr> <th bgcolor="DarkRed">序号</th> <th bgcolor="DarkRed">集数</th> <th bgcolor="DarkRed">歌名</th> <th bgcolor="DarkRed">主唱</th> </tr> <tr> <td>OP1</td> <td>1～47</td> <td>ウィーアー!（WE ARE！）</td> <td>北谷洋</td> </tr> <tr> <td>OP2</td> <td>48～115</td> <td>Believe</td> <td>Folder5</td> </tr> <tr> <td>OP3</td> <td>116～168</td> <td>ヒカリヘ（向着阳光)</td> <td>The Babystars</td> </tr> <tr> <td>OP4</td> <td>169～206</td> <td>BON VOYAGE!（一路顺风)</td> <td>BON-BON BLANCO </td> </tr> <tr> <td>OP5</td> <td>207～263</td> <td>ココロのちず （心之航海图)</td> <td>BOYSTYLE </td> </tr> <tr> <td>OP6</td> <td>264～278</td> <td>BRAND NEW WORLD</td> <td>D-51 </td> </tr> <tr> <td>OP7</td> <td>279～283</td> <td>ウィーアー!（WE ARE！）</td> <td>7人の麦わら海贼団</td> </tr> <tr> <td>OP8</td> <td>284～325</td> <td>Crazy Rainbow</td> <td>タッキー&翼</td> </tr> <tr> <td>OP9</td> <td>326～372</td> <td>Jungle P</td> <td>5050</td> </tr> <tr> <td>OP10</td> <td>373～394</td> <td>ウィーアー!（WE ARE！）</td> <td>东方神起</td> </tr> <tr> <td>OP11</td> <td>395～425</td> <td>share the world</td> <td>东方神起</td> </tr> <tr> <td>OP12</td> <td>426～458</td> <td>风をさがして（寻找风)</td> <td>矢口真里とストローハット</td> </tr> </table> <br></br><br></br> <br></br><br></br> <div class="div12"><font color="white" size="5">ED 片尾曲</font></div> <br></br> <table style="color: white;" width = "80%" height = "50%" border = "1" cellspacing = "0" align = "center" > <tr> <th bgcolor="DarkRed">序号</th> <th bgcolor="DarkRed">集数</th> <th bgcolor="DarkRed">歌名</th> <th bgcolor="DarkRed">主唱</th> </tr> <tr> <td>ED1</td> <td>1～30</td> <td>Memories</td> <td>大槻真希</td> </tr> <tr> <td>ED2</td> <td>31～63</td> <td>RUN! RUN! RUN!</td> <td>大槻真希</td> </tr> <tr> <td>ED3</td> <td>64～73</td> <td>私がいるよ（I'm Right Here!）</td> <td>TOMATO CUBE</td> </tr> <tr> <td>ED4</td> <td>74～81</td> <td>しょうちのすけ （That's a fact!）</td> <td>推定少女</td> </tr> <tr> <td>ED5</td> <td>82～94</td> <td>BEFORE DAWN</td> <td>AI-SACHI</td> </tr> <tr> <td>ED6</td> <td>95～106</td> <td>Fish</td> <td>The Kaleidoscope</td> </tr> <tr> <td>ED7</td> <td>107～118</td> <td>GLORY-君がいるから（因为有你）</td> <td>上原多香子</td> </tr> <tr> <td>ED8</td> <td>119～127 129～132</td> <td>Shining Ray</td> <td>Janne Da Arc</td> </tr> <tr> <td>ED9</td> <td>133～156</td> <td>Free Will</td> <td>Ruppina</td> </tr> <tr> <td>ED10</td> <td>157～168</td> <td>Faith</td> <td>Ruppina</td> </tr> <tr> <td>ED11</td> <td>169～181</td> <td>A to Z ～ONE PIECE Edition～</td> <td>ZZ</td> </tr> </table> <br></br><br></br> <br></br><br></br> <br></br><br></br> </body> </html>.div11{ position: absolute; left: 160px; top: 390px;}.div12{ position: absolute; left: 160px;}.div21{ position: absolute; left: 160px;}.img21{ position: absolute; left: 160px; top: 800px;}.p3 { width: 1240px; height: 800px; position: absolute; left: 140px; top: 440px;}.img3 { float:left; margin:0px 0px 15px 20px;}.p32 { width: 1240px; height: 800px; position: absolute; left: 140px; top: 900px;}.img32 { float:left; margin:0px 0px 15px 20px;}.p33 { width: 1240px; height: 800px; position: absolute; left: 140px; top: 1360px;}.img33 { float:left; margin:0px 0px 15px 20px;}.p34 { width: 1240px; height: 800px; position: absolute; left: 140px; top: 1820px;}.img34 { float:left; margin:0px 0px 15px 20px;}.p35 { width: 1240px; height: 800px; position: absolute; left: 140px; top: 2280px;}.img35 { float:left; margin:0px 0px 15px 20px;}.p36 { width: 1240px; height: 800px; position: absolute; left: 140px; top: 2740px;}.img36 { float:left; margin:0px 0px 15px 20px;}.a31{ position: absolute; left: 160px; top: 3220px; text-decoration: none;}.p37 { width: 1240px; height: 800px; position: absolute; left: 140px; top: 3250px;}.p4{ position: absolute; left: 160px;}【点赞收藏博文】 三连支持下吧，你的支持是我创作的动力, 【观注作者 |获取更多源码| 优质文章】。关键词：设计,课程,作业
