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

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

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

二、代碼展示

? ? ? ?<div id="header"> ? ? ? ? ? ?<a href="#" rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ><img src="images/logo.png" class="logo"/></a> ? ? ? ?</div> ? ? ? ?<div id="menu"> ? ? ? ? ? ?<ul> ? ? ? ? ? ? ? ?<li><a href="index.html" rel="external nofollow" >海賊王</a></li> ? ? ? ? ? ? ? ?<li><a href="jieshao.html" rel="external nofollow" >故事介紹</a></li> ? ? ? ? ? ? ? ?<li><a href="renwu.html" rel="external nofollow" >主要人物</a></li> ? ? ? ? ? ? ? ?<li><a href="meitu.html" rel="external nofollow" >海賊美圖</a></li> ? ? ? ? ? ? ? ?<li><a href="zhuce.html" rel="external nofollow" >注冊(cè)用戶</a></li> ? ? ? ? ? ? ? ?<li><a href="liuyan.html" rel="external nofollow" >隨筆留言</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)船長(zhǎng) 故鄉(xiāng)：東海·風(fēng)車村 ...</p> ? ? ? ? ? ? ? ? ? ? ? ?<a href="#" rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" >詳情...</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="#" rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" >詳情...</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="#" rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" >詳情...</a> ? ? ? ? ? ? ? ? ? ?</li> ? ? ? ? ? ? ? ? ? ?<li> ? ? ? ? ? ? ? ? ? ? ? ?<img src="images/zy4.jpg" /> ? ? ? ? ? ? ? ? ? ? ? ?<h5>“GOD”

烏索普</h5> ? ? ? ? ? ? ? ? ? ? ? ?<p>初次登場(chǎng)：漫畫第23話 年齡：17歲→19歲 生日：4月1日 血型：S型 身份：烏索普海賊團(tuán)船長(zhǎng)→草帽海賊團(tuán)狙擊手 故鄉(xiāng)：東海

西羅普村...</p> ? ? ? ? ? ? ? ? ? ? ? ?<a href="#" rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" >詳情...</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="#" rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ><img src="images/denglu.png" /></a> ? ? ? ? ? ? ? ? ? ? ? ?<a href="#" rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ><img src="images/zhuce.png" /></a> ? ? ? ? ? ? ? ? ? ?</div> ? ? ? ? ? ? ? ?</div> ? ? ? ? ? ? ? ?<div class="chengyuan"> ? ? ? ? ? ? ? ? ? ?<h2>草帽海賊團(tuán)成員</h2> ? ? ? ? ? ? ? ? ? ?<ul> ? ? ? ? ? ? ? ? ? ? ? ?<li><a href="#" rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" >“草帽”蒙奇·D·路飛</a></li> ? ? ? ? ? ? ? ? ? ? ? ?<li><a href="#" rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" >“海賊獵人”羅羅諾亞·索隆</a></li> ? ? ? ? ? ? ? ? ? ? ? ?<li><a href="#" rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" >“小賊貓”娜美</a></li> ? ? ? ? ? ? ? ? ? ? ? ?<li><a href="#" rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" >“GOD”

烏索普</a></li> ? ? ? ? ? ? ? ? ? ? ? ?<li><a href="#" rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" >“黑足”山治</a></li> ? ? ? ? ? ? ? ? ? ? ? ?<li><a href="#" rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" >“愛(ài)吃棉花糖的馴鹿”托尼托尼·喬巴</a></li> ? ? ? ? ? ? ? ? ? ? ? ?<li><a href="#" rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" >“惡魔之子”妮可·羅賓</a></li> ? ? ? ? ? ? ? ? ? ? ? ?<li><a href="#" rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" >“改造人”弗蘭奇</a></li> ? ? ? ? ? ? ? ? ? ? ? ?<li><a href="#" rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" ?rel="external nofollow" >“靈魂之王”布魯克 </a></li> ? ? ? ? ? ? ? ? ? ?</ul> ? ? ? ? ? ? ? ? ? ?<img src="images/chengyuan.jpg" /> ? ? ? ? ? ? ? ?</div> ? ? ? ? ? ?</div> ? ? ? ?</div>

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è)應(yīng)該包含(具體可根據(jù)個(gè)人要求而定)

1. 頁(yè)面分為頁(yè)頭、菜單導(dǎo)航欄（最好可下拉）、中間內(nèi)容板塊、頁(yè)腳四大部分；

2. 所有頁(yè)面相互超鏈接，可到三級(jí)頁(yè)面，有5-10個(gè)頁(yè)面組成；

3. 頁(yè)面樣式風(fēng)格統(tǒng)一布局顯示正常，不錯(cuò)亂，使用Div+Css技術(shù)；

4. 菜單美觀、醒目，二級(jí)菜單可正常彈出與跳轉(zhuǎn)；

5. 要有JS特效，如定時(shí)切換和手動(dòng)切換圖片新聞；

6. 頁(yè)面中有多媒體元素，如gif、視頻、音樂(lè)，表單技術(shù)的使用；

7. 頁(yè)面清爽、美觀、大方，不雷同。

8. 網(wǎng)站前端程序不僅要能夠把用戶要求的內(nèi)容呈現(xiàn)出來(lái)，還要滿足布局良好、界面美觀、配色優(yōu)雅、表現(xiàn)形式多樣等要求。