學(xué)生網(wǎng)頁設(shè)計(jì)作業(yè)源碼(HTML+CSS)——海賊王6頁代碼質(zhì)量好

時(shí)間：2023-10-16 15:54:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-10-16 15:54:01 來源：網(wǎng)站運(yùn)營

學(xué)生網(wǎng)頁設(shè)計(jì)作業(yè)源碼(HTML+CSS)——海賊王6頁代碼質(zhì)量好：

HTML實(shí)例網(wǎng)頁代碼, 本實(shí)例適合于初學(xué)HTML的同學(xué)。該實(shí)例里面有設(shè)置了css的樣式設(shè)置，有div的樣式格局，這個(gè)實(shí)例比較全面，有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過從頭開始設(shè)計(jì)個(gè)人網(wǎng)站并將其轉(zhuǎn)換為代碼的過程來實(shí)踐設(shè)計(jì)。

---

?精彩專欄推薦

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

---

@TOC

一、網(wǎng)頁介紹

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

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

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

---

一、網(wǎng)頁效果

---

二、代碼展示

---

1.HTML代碼結(jié)構(gòu)

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

頭部導(dǎo)航欄

<div id="header"> <a href="#"><img src="images/logo.png" class="logo"/></a> </div> <div id="menu"> <ul> <li><a href="index.html">海賊王</a></li> <li><a href="jieshao.html">故事介紹</a></li> <li><a href="renwu.html">主要人物</a></li> <li><a href="meitu.html">海賊美圖</a></li> <li><a href="zhuce.html">注冊(cè)用戶</a></li> <li><a href="liuyan.html">隨筆留言</a></li> </ul> </div>

左邊部分

<div id="main"> <div class="content"> <ul class="list"> <li> <img src="images/zy1.jpg" /> <h5>“草帽”蒙奇·D·路飛</h5> <p>初次登場(chǎng)：漫畫第1話 年齡：17歲→19歲 生日：5月5日 血型：F型 身高：172cm→174cm 身份：草帽海賊團(tuán)船長 故鄉(xiāng)：東?！わL(fēng)車村 ...</p> <a href="#">詳情...</a> </li> <li> <img src="images/zy2.jpg" /> <h5>“小賊貓”娜美</h5> <p>初次登場(chǎng)：漫畫第8話 年齡：18歲→20歲 生日：7月3日 血型：X型 身份：阿龍海賊團(tuán)測(cè)量員→草帽海賊團(tuán)航海士 故鄉(xiāng)：東海?可可亞西村...</p> <a href="#">詳情...</a> </li> <li> <img src="images/zy3.jpg" /> <h5>“海賊獵人”羅羅諾亞·索隆</h5> <p>初次登場(chǎng)：漫畫第3話 年齡：19歲→21歲 生日：11月11日 血型：XF型 身份：東海海賊賞金獵人→草帽海賊團(tuán)戰(zhàn)斗員 故鄉(xiāng)：東海·霜月村...</p> <a href="#">詳情...</a> </li> <li> <img src="images/zy4.jpg" /> <h5>“GOD”?烏索普</h5> <p>初次登場(chǎng)：漫畫第23話 年齡：17歲→19歲 生日：4月1日 血型：S型 身份：烏索普海賊團(tuán)船長→草帽海賊團(tuán)狙擊手 故鄉(xiāng)：東海?西羅普村...</p> <a href="#">詳情...</a> </li> </ul> </div>

右邊部分

<div class="sidebar"> <div class="denglu"> <h2>用戶登錄</h2> <p><span>賬號(hào)：</span><input type="text" /></p> <p><span>密碼：</span><input type="password" /></p> <div class="btn"> <a href="#"><img src="images/denglu.png" /></a> <a href="#"><img src="images/zhuce.png" /></a> </div> </div> <div class="chengyuan"> <h2>草帽海賊團(tuán)成員</h2> <ul> <li><a href="#">“草帽”蒙奇·D·路飛</a></li> <li><a href="#">“海賊獵人”羅羅諾亞·索隆</a></li> <li><a href="#">“小賊貓”娜美</a></li> <li><a href="#">“GOD”?烏索普</a></li> <li><a href="#">“黑足”山治</a></li> <li><a href="#">“愛吃棉花糖的馴鹿”托尼托尼·喬巴</a></li> <li><a href="#">“惡魔之子”妮可·羅賓</a></li> <li><a href="#">“改造人”弗蘭奇</a></li> <li><a href="#">“靈魂之王”布魯克 </a></li> </ul> <img src="images/chengyuan.jpg" /> </div> </div> </div>

---

2.CSS樣式代碼

@charset "utf-8";* { margin: 0; padding: 0;}li { list-style-type: none;}a { text-decoration: none; color: #999999;}body { margin: 0px; padding: 0px; color: #666666; font-family: arial; font-size: 12px; background: #010206;}#wrapper { width: 1020px; margin: 0 auto; border: #333 1px solid; overflow: hidden;}/*頭部*/#header { width: 1020px; height: 410px; background-image: url(../images/banner.jpg); overflow: hidden;}#header .logo { display: block; height: 150px; margin-left: 10px; margin-right: 10px;}/*導(dǎo)航*/#menu { width: 100%; height: 53px; margin-bottom: 10px; background: url(../images/menu.jpg) no-repeat;}#menu ul li { display: block;}#menu ul li a { float: left; display: block; width: 170px; height: 53px; line-height: 53px; font-size: 16px; color: #fff; text-align: center; background: url(../images/menu_bian.jpg) center left no-repeat;}#menu ul li a:hover { color: #00ccff;}/*中間*/#main { width: 960px; padding: 30px; line-height: 2; overflow: hidden;}#main .content { float: left; width: 560px}.content .list { overflow: hidden;}.content .list li { height: 136px; overflow: hidden; margin-bottom: 30px;}.content .list li img { width: 200px; height: 130px; border: 3px solid #35373b; float: left; margin-right: 20px;}.content .list li h5 { font-size: 16px; color: #d82b82;}.content .jianjie li { line-height: 30px;}#main .sidebar { float: right; width: 320px;}.sidebar .denglu h2 { text-align: center; color: #fff; margin-bottom: 20px;}.sidebar .denglu p { height: 30px; line-height: 30px; margin-bottom: 10px;}.sidebar .denglu p span { display: block; width: 60px; float: left;}.sidebar .denglu p input { display: block; width: 260px; height: 30px; border: none; float: left;}.sidebar .denglu .btn img { float: left; margin-left: 60px;}.sidebar .chengyuan { clear: both; padding-top: 30px;}.sidebar .chengyuan h2 { text-align: center; color: #fff; margin-bottom: 20px;}.sidebar .chengyuan li { line-height: 30px; border-bottom: 1px dashed #999;}.sidebar .chengyuan li a:hover { color: #00ccff;}.sidebar .chengyuan img { width: 100%; margin-top: 20px;}/*故事介紹*/.jieshao h2 { margin-bottom: 10px;}.jieshao p { text-indent: 32px;}.jieshao img { width: 100%;}/*主要人物*/.renwu h2 { text-align: center;}.renwu li { width: 220px; float: left; margin: 10px; text-align: center;}.renwu li img { width: 220px; height: 220px;}.renwu { width: 100%;}.renwu .page { clear: both; padding-top: 20px; text-align: center; font-size: 20px;}/*海賊美圖*/.meitu h2 { text-align: center;}.meitu img { width: 100%; margin-top: 20px;}/*注冊(cè)*/.zhuce h2 { text-align: center;}.zhuce .input-box { width: 500px; overflow: hidden; margin: auto; margin-bottom: 20px;}.zhuce .input-box p { height: 26px; width: 100px; float: left; line-height: 26px;}.zhuce .input-box input { width: 400px; height: 26px; border: none; float: left;}.zhuce .btn { display: block; width: 92px; height: 59px; background: url(../images/zhuce.png); border: none; margin: auto; outline: none; cursor: pointer;}/*留言*/.liuyan h2 { text-align: center;}.liuyan .input-box { width: 500px; overflow: hidden; margin: auto; margin-bottom: 20px;}.liuyan .input-box p { height: 26px; width: 100px; float: left; line-height: 26px;}.liuyan .input-box input { width: 400px; height: 26px; border: none; float: left;}.liuyan .input-box textarea { display: block; width: 400px; height: 100px; border: none; float: left;}.liuyan .btn { display: block; width: 92px; height: 59px; background: url(../images/tijiao.png); border: none; margin: auto; outline: none; cursor: pointer;}#footer { clear: both; width: 960px; padding: 30px 0; text-align: center; color: #fff; font-size: 14px; background: url(../images/footer.jpg) bottom center no-repeat;}

---

三、個(gè)人總結(jié)

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

---

四、更多干貨

1.如果我的博客對(duì)你有幫助、如果你喜歡我的博客內(nèi)容，請(qǐng) “ 點(diǎn)贊” “??評(píng)論” “ 收藏”一鍵三連哦！

2.??【關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識(shí)，互相學(xué)習(xí)」！

3.以上內(nèi)容技術(shù)相關(guān)問題 歡迎一起交流學(xué)習(xí)【主頁—— 獲取更多優(yōu)質(zhì)源碼】