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

HTML

HTML+CSS+JS网页设计期末课程大作业——海贼王(8个页面)动漫网页设计

發布時間：2024/5/8 HTML 53 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML+CSS+JS网页设计期末课程大作业——海贼王(8个页面)动漫网页设计小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

HTML實例網頁代碼, 本實例適合于初學HTML的同學。該實例里面有設置了css的樣式設置，有div的樣式格局，這個實例比較全面，有助于同學的學習,本文將介紹如何通過從頭開始設計個人網站并將其轉換為代碼的過程來實踐設計。

精彩專欄推薦👇🏻👇🏻👇🏻👇🏻

? 【作者主頁——獲取更多優質源碼】
? 【web前端期末大作業——畢設項目精品實戰案例(1000套)】

文章目錄

一、網頁介紹
一、網頁效果
二、代碼展示
- 1.HTML代碼
- 2.CSS代碼
三、個人總結
四、更多干貨

一、網頁介紹

1 網頁簡介：此作品為學生個人主頁網頁設計題材，HTML+CSS 布局制作,web前端期末大作業,大學生網頁設計作業源碼，這是一個不錯的網頁制作，畫面精明，代碼為簡單學生水平, 非常適合初學者學習使用。

2.網頁編輯：網頁作品代碼簡單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作）。

3.知識應用：技術方面主要應用了網頁知識中的: Div+CSS、鼠標滑過特效、Table、導航欄效果、Banner、表單、二級三級頁面等，視頻、音頻元素、Flash，同時設計了Logo（源文件）所需的知識點。

一、網頁效果

二、代碼展示

1.HTML代碼

代碼如下（示例）：以下僅展示部分代碼供參考~

<!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～127129～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>

2.CSS代碼

.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; }

三、個人總結

一套合格的網頁應該包含(具體可根據個人要求而定)

頁面分為頁頭、菜單導航欄（最好可下拉）、中間內容板塊、頁腳四大部分；

所有頁面相互超鏈接，可到三級頁面，有5-10個頁面組成；

頁面樣式風格統一布局顯示正常，不錯亂，使用Div+Css技術；

菜單美觀、醒目，二級菜單可正常彈出與跳轉；

要有JS特效，如定時切換和手動切換圖片新聞；

頁面中有多媒體元素，如gif、視頻、音樂，表單技術的使用；

頁面清爽、美觀、大方，不雷同。

網站前端程序不僅要能夠把用戶要求的內容呈現出來，還要滿足布局良好、界面美觀、配色優雅、表現形式多樣等要求。

四、更多干貨

1.看到這里了就【點贊收藏博文】三連支持下吧，你的支持是我創作的動力, 【觀注作者 |獲取更多源碼| 優質文章】。

2.關注我帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板、大學生畢業HTML模板、期末大作業模板、等! 「在這里有好多前端開發者，一起探討前端 Node 知識，互相學習」！

3.以上內容技術相關問題可以相互學習交流

總結

以上是生活随笔為你收集整理的HTML+CSS+JS网页设计期末课程大作业——海贼王(8个页面)动漫网页设计的全部內容，希望文章能夠幫你解決所遇到的問題。

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