国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > HTML+CSS+JS網(wǎng)頁設計期末課程大作業(yè)——海賊王(8個頁面)動漫網(wǎng)頁設計

HTML+CSS+JS網(wǎng)頁設計期末課程大作業(yè)——海賊王(8個頁面)動漫網(wǎng)頁設計

時間：2023-10-15 13:54:01 | 來源：網(wǎng)站運營

時間：2023-10-15 13:54:01 來源：網(wǎng)站運營

HTML+CSS+JS網(wǎng)頁設計期末課程大作業(yè)——海賊王(8個頁面)動漫網(wǎng)頁設計：
HTML實例網(wǎng)頁代碼, 本實例適合于初學HTML的同學。該實例里面有設置了css的樣式設置，有div的樣式格局，這個實例比較全面，有助于同學的學習,本文將介紹如何通過從頭開始設計個人網(wǎng)站并將其轉(zhuǎn)換為代碼的過程來實踐設計。
精彩專欄推薦

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

@TOC

一、網(wǎng)頁介紹

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

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

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

一、網(wǎng)頁效果




在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述



二、代碼展示

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="網(wǎng)站首頁.html " style="color: white;" class="abc">網(wǎng)站首頁</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> &nbsp;&nbsp;基本簡介 <br></br> &nbsp;&nbsp;&nbsp;&nbsp;《海賊王》是日本漫畫家尾田榮一郎的作品，描述的是一個名叫路飛的少年想成為海賊王， 因誤食了香克斯收藏的惡魔果實，變成了橡膠人的故事。惡魔果實使路飛永遠不能游泳， 但他始終沒有改變成為海賊王的理想“找到傳說中哥爾?D?羅杰的秘寶，并且成為海賊王”開始了冒險之旅。 <br></br><br></br> &nbsp;&nbsp;劇情簡介 <br></br> &nbsp;&nbsp;&nbsp;&nbsp;財富、名聲、權力，曾經(jīng)擁有世界上一切的“海賊王”哥爾·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">集數(shù)</th> <th bgcolor="DarkRed">歌名</th> <th bgcolor="DarkRed">主唱</th> </tr> <tr> <td>OP1</td> <td>1～47</td> <td>ウィーアー!（WE ARE?。?span ></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?。?span ></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?。?span ></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">集數(shù)</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>

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

三、個人總結

一套合格的網(wǎng)頁應該包含(具體可根據(jù)個人要求而定) 1. 頁面分為頁頭、菜單導航欄（最好可下拉）、中間內(nèi)容板塊、頁腳四大部分； 2. 所有頁面相互超鏈接，可到三級頁面，有5-10個頁面組成； 3. 頁面樣式風格統(tǒng)一布局顯示正常，不錯亂，使用Div+Css技術； 4. 菜單美觀、醒目，二級菜單可正常彈出與跳轉(zhuǎn)； 5. 要有JS特效，如定時切換和手動切換圖片新聞； 6. 頁面中有多媒體元素，如gif、視頻、音樂，表單技術的使用； 7. 頁面清爽、美觀、大方，不雷同。
8. 網(wǎng)站前端程序不僅要能夠把用戶要求的內(nèi)容呈現(xiàn)出來，還要滿足布局良好、界面美觀、配色優(yōu)雅、表現(xiàn)形式多樣等要求。

四、更多干貨

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

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

3.以上內(nèi)容技術相關問題可以相互學習交流

【主頁—— 獲取更多優(yōu)質(zhì)源碼】



關鍵詞：設計,課程,作業(yè)

74
73
25
news

版權所有? 億企邦 1997-2025 保留一切法律許可權利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關閉