用了2小時寫了一套學生作業水準的網站首頁，希望這篇文章和代碼能讓更多新手了解HTML DIV+CSS布局的方法和原理，而不是被一些人copy走從中獲利…該網站的主題為《去旅行吧》，整個首頁下來有1800字符的代碼量，當然你可以直接將首頁提交作業使用但記得修改網頁內的版權資訊欄，也可以根據首頁框架去試著做出自己主題的頁面以及幾個超連結頁面，一般的作業需要4-6個頁面左右【截圖及源碼在下方】。
這個首頁代碼運用了DIV盒子的使用方法，如盒子的嵌套、浮動、margin、border、background等屬性的使用，外部大盒子設定居中，內部左中右布局，下方橫向浮動排列，大學學習的前端知識點和布局方式都有運用，CSS的代碼量也很足、很細緻，使用hover來完成過渡效果、滑鼠滑過效果等，使用表格、表單補充模塊，為方便新手學習頁面中沒有使用js有需要的可以自行添加。
能看懂或寫出這個首頁的，恭喜你已經掌握了HTML前端網頁設計的大部分知識點，已經能夠寫出來一個完整的網站頁面了，同時如LOGO圖的設計、漸變的使用、布局上色塊、陰影的使用、js的引入可能就是你下一步需要攻克的點了...尤其是頁面的美觀度以及個人審美的提升將會是一條漫長的道路…
源碼有價，僅供學習，請勿轉售，有用點讚。
源碼保存方法（下方為保存及使用的視頻）：
1. 複製下方所有源碼
2. 電腦右鍵桌面空白 - 新建 - 文本文檔 雙擊打開文本文檔，Ctrl V粘貼源碼到空白文本文檔內
3. 點擊 文件 - 另存為，保存類型選擇 所有文件， 文件名填寫為 index.html 點擊保存即可在瀏覽器預覽
也可以直接將源碼複製進Dreamweaver、Hbuilder X、Editplus等網頁設計軟體內保存為Html此處就不多說了…
源碼共享如下，記得點在看~
<!doctype html><html><head><meta charset="utf-8"><title>去旅行吧-PsdHtml.CN原創作品，僅供個人學習使用，禁止轉賣</title><style type="text/css">#father { position: absolute; width: 100%; height: 1418px; z-index: 1; left: 0px; top: 0px;}#father #top { height: 120px; width: 1000px; margin-right: auto; margin-left: auto;}#father #title { height: 42px; width: 1000px; margin-right: auto; margin-left: auto; background-image: url(http://cdn.psdhtml.cn/title-skin.jpg); border: 1px solid #fafafa;}#father #line1 { height: 5px; width: 100%; background-color: #333;}#father #title #daohang { font-family: "微軟雅黑"; font-size: 16px; color: #333; float: left; height: 42px; width: 140px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-top-color: #fafafa; border-right-color: #ececec; border-bottom-color: #fafafa; border-left-width: 1px; border-left-style: solid; border-left-color: #ffffff; line-height: 42px; text-align: center;}.d_over{ background-color:#217aff; transition-duration: 1s;}.d_out{ background-color:rgba(0,0,0,0);}
a:link { color: #333; text-decoration: none;}a:visited { text-decoration: none; color: #000;}a:hover { text-decoration: none; color: #FFFFFF;}a:active { text-decoration: none; color: #333;}#father #main { height: 600px; width: 1000px; margin-top: 1px; margin-right: auto; margin-left: auto; background-color: #FFF; font-family: "微軟雅黑"; font-size: 12px; line-height: 28px; color: #333;}#father #main #left { float: left; height: 600px; width: 249px;}#father #main #left #left-text #m-249 { height: 272px; margin-top: 15px;}#father #main #left #left-text #m-245 { height: 245px;}#father #main #central { float: left; height: 600px; width: 500px; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #f2f2f2; border-left-color: #f2f2f2;}#father #main #left #left-text { height: 520px; width: 195px; margin-top: 30px; margin-left: 28px;}.dabiaoti { font-family: "微軟雅黑"; font-size: 18px; color: #333; font-weight: bold;}.axiaozi { font-family: "微軟雅黑"; font-size: 13px; line-height: 35px; color: #000;}.bxiaozi { font-family: "微軟雅黑"; font-size: 10px; line-height: 27px; color: #000;}a.black:link { color: #000000; text-decoration: none;}a.black:visited { text-decoration: none; color: #000000;}a.black:hover { text-decoration: none; color: #2a7cf5;}a.black:active { text-decoration: none;}
a.black1:link { color: #000000; text-decoration: none;}a.black1:visited { text-decoration: none; color: #2a7cf5;}a.black1:hover { text-decoration: underline; color: #217aff;}a.black1:active { text-decoration: none; color: #2199ff;}#father #main #central #text2 { font-family: "微軟雅黑"; font-size: 12px; line-height: 25px; color: #333; height: 290px; width: 500px; margin-top: 0px; background-color: #f5fffa;}
#father #footer_all { height: 241px; width: 100%; margin-right: auto; margin-left: auto; font-family: "微軟雅黑"; font-size: 13.4px; color: #696969; margin-top: 0px;}#father #footer_all #f1000-167 { height: 167px; width: 1000px; margin-right: auto; margin-left: auto; padding-top: 67px; background-color: #f6faff; border-top-width: 1px; border-top-style: solid; border-top-color: #CCC;}#father #footer_all #f1000-167 #logo-175-40 { float: left; height: 40px; width: 160px; margin-top: 40px; margin-left: 45px;}#father #footer_all #f1000-167 #login { float: left; height: 40px; width: 70px; margin-top: 40px; margin-left: 40px;}#father #footer_all #f1000-167 #right828-167 { float: left; height: 167px; width: 300px; margin-left: 236px;}#father #footer_all #f1000-167 #right828-167 #l-828-80 { height: 80px; width: 300px; margin-top: 30px; letter-spacing: 2px;}#father #footer_all #f1000-167 #right828-167 #l-828-80 #r-150-42 { float: left; height: 42px; width: 70px; margin-top: 13px; text-align: center; line-height: 42px;}#father #footer_all #f1000-167 #right828-167 #l-828-80 #r-150-42-1 { float: left; height: 42px; width: 70px; margin-top: 13px; margin-left: 32px; text-align: center; line-height: 42px;}#father #footer_all #f1000-167 #right828-167 #l-828-80 #r-erweima { float: left;height: 75px;width: 75px;margin-top: 0px;margin-left: 48px;}#father #footer_all #f1000-167 #right828-167 #link { height: 33px; width: 721px; margin-top: 24px; margin-left: 108px; text-align: right; line-height: 20px; font-family: "微軟雅黑"; font-size: 13px;}#father #tuijian { height: 315px; width: 1000px; margin-right: auto; margin-left: auto; background-color: #FFF; padding-top: 40px; margin-top: 1px;}#father #tuijian #tuijian01 { float: left; height: 270px; width: 290px; margin-left: 35px;}
#father #tuijian #tuijian02 { float: left; height: 270px; width: 290px; margin-left: 30px;}#father #tuijian #tuijian01 #tuijiantu { height: 204px;}#father #tuijian #tuijian01 #tuijiantu:hover { height: 204px; border: 2px solid #2376F6;}#father #tuijian #tuijian01 #tuijianwenzi { height: 66px; font-family: "微軟雅黑"; font-size: 14px; color: #999999; width: 290px;}#father #tuijian #tuijian02 #tuijiantu2 { height: 204px;}#father #tuijian #tuijian02 #tuijiantu2:hover { height: 204px; border: 2px solid #2376F6;}#father #tuijian #tuijian02 #tuijianwenzi2 { height: 66px; font-family: "微軟雅黑"; font-size: 14px; color: #999999; width: 290px;}#father #footer_all #down1 { background-color: #f2f2f; height: 1px; width: 1000px; margin-right: auto; margin-left: auto;}#father #main #left #left-text #m-245 #a195 { height: 115px; background-image: url(http://cdn.psdhtml.cn/index1.jpg);}#father #main #left #left-text #m-245 #a195:hover { height: 115px; background-image: url(http://cdn.psdhtml.cn/index2.jpg); transition-duration: 1s;}#father #main #left #left-text #m-245 #a196 { height: 115px; margin-top: 9px; background-image: url(http://cdn.psdhtml.cn/index3.jpg);}#father #main #left #left-text #m-245 #a196:hover { height: 115px; background-image: url(http://cdn.psdhtml.cn/index4.jpg); transition-duration: 1s;}#father #main #central #banner { height: 310px; width: 500px; background-image: url(http://cdn.psdhtml.cn/banner.gif);}#father #main #left #left-text #m-249 table tr td #textfield { height: 36px; width: 170px; font-family: "微軟雅黑"; font-size: 14px; color: #999;}#father #main #left #left-text #m-249 table tr td #textfield2 { height: 36px; width: 170px; font-family: "微軟雅黑"; font-size: 14px; color: #999;}.wenben {font-family: "微軟雅黑"; font-size: 15px; color: #000;}#father #footer_all #banquan { height: 36px; width: 1000px; margin-right: auto; margin-left: auto; border-top-width: 1px; border-top-style: solid; border-top-color: #f2f2f2; background-image: url(http://cdn.psdhtml.cn/lxidw7.svg); background-color: #FFF;}</style><script type="text/javascript">function MM_jumpMenu(targ,selObj,restore){ //v3.0 eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); if (restore) selObj.selectedIndex=0;}function MM_popupMsg(msg) { //v1.0 alert(msg);}function MM_goToURL() { //v3.0 var i, args=MM_goToURL.arguments; document.MM_returnValue = false; for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");}</script></head>
<body bgcolor="#f2f2f2"><div id="father"><div id="line1"></div><div id="top"><a href="index.html"><img src="http://cdn.psdhtml.cn/title.jpg" width="1000" height="120"></a></div> <div id="title"> <div id="daohang" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a href="index.html">首 頁</a></div> <div id="daohang" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?ym">推薦風景</a></div> <div id="daohang" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?ym">圖庫</a></div> <div id="daohang" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?ym">視頻</a></div> <div id="daohang" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?ym">註冊</a></div> </div> <div id="main"> <div id="left"> <div id="left-text"> <table width="100%" border="0"> <tr> <td height="45">推薦內容 </td> </tr> <tr> <td> <img src="http://cdn.psdhtml.cn/arrow_01.gif" width="5" height="7"> <a href="#">出遊攻略看這裡</a><br> <img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"> <a href="#">出行日本注意事項 </a><br> <img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"> <a href="#">上帝的花園——吐瓦魯</a><br> <img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"> <a href="#">世界上最浪漫十大酒店 </a><br> <img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"> <a href="#">聞所未聞10個世界之最</a><br> <img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"> <a href="#">塞班島 / 馬紹爾群島</a><br> <img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"> <a href="#">埃及金字塔 </a><br> <img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"> <a href="#">布達拉宮</a><br> <img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"> <a href="#">自助旅遊實用手冊</a><br> <img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"> <a href="#">籤證基本知識 </a><br> <img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"> 蘇州 <br> <span><a href="#">蘇州園林</a> </span> <span><a href="#">寒山寺</a></span> <a href="#"><span>七裡山塘</span></a><br> <img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"> <a href="#">鳳凰古城 </a></td> </tr> </table> </div> </div> <div id="central"> <div id="banner"></div> <div id="text2"><table width="100%" border="0"> <tr> <td height="287" align="center"><table width="80%" border="0"> <tr> <td><span>"</span> 因為有些事要趁早，現在不做，也許一輩子都不會再做了，等有時間了，可不曾想，其實我們什麼時候都很忙，也許真到了你覺得有時間的時候，身邊的他（她）已不在，或者是到了樓下走走都困難的年紀。因為旅行的腳步，永遠是向前的，「世界那麼大，我想去看看」，很贊的一句網絡語，世界那麼大，想要在有生之年看完，就只能步步向前，確定計劃出發，將會讓你心靈和身體都在向前的路上。 </td> </tr> </table></td> </tr> </table></div>
</div> <div id="left"> <div id="left-text"> <div id="m-245"> <div id="a195"></div> <div id="a196"></div> </div><div id="m-249"> <table width="100%" border="0"> <tr> <td height="36">歡迎登陸</td> </tr> <tr> <td height="51"><label for="textfield"></label> <input name="textfield" type="text" id="textfield" value="用戶名"></td> </tr> <tr> <td height="53"><input name="textfield2" type="password" id="textfield2" value="."></td> </tr> <tr> <td height="37" align="left" bgcolor="#f8f8f8"><label for="select"></label> <select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu('parent',this,0)"> <option value="http://www.psdhtml.cn/index.php?c=thread&fid=18?ym">男</option> <option value="http://www.psdhtml.cn/index.php?c=thread&fid=18?ym">女</option> </select></td> </tr> <tr> <td height="42" align="left"><input type="checkbox" name="checkbox" id="checkbox">同意註冊協議 <br></td> </tr> <tr> <td align="center"><input name="button2" type="submit" id="button2" onclick="MM_popupMsg('註冊成功，點擊確定跳轉至首頁。');MM_goToURL('parent','http://www.psdhtml.cn/index.php?c=thread&fid=18?tz');return document.MM_returnValue" value="登 錄" /></td> </tr> </table>
</div> </div> </div> </div>
<div id="tuijian"> <div id="tuijian01"> <div id="tuijiantu"><a href="http://www.psdhtml.cn/read.php?tid=1108&fid=18?ym" target="_blank"><img src="http://cdn.psdhtml.cn/tuijian01.jpg" width="286" height="204" /></a></div> <div id="tuijianwenzi"><table width="100%" border="0"> <tr> <td height="40">美麗的海島度假不想了解一下？</td> </tr> <tr> <td><a href="#">了解更多</a></td> </tr></table></div> </div>
<div id="tuijian02"> <div id="tuijiantu2"><a href="http://www.psdhtml.cn/read.php?tid=1108&fid=18?ym" target="_blank"><img src="http://cdn.psdhtml.cn/tuijian02.jpg" width="286" height="204" /></a></div> <div id="tuijianwenzi2"><table width="100%" border="0"> <tr> <td height="40">一個能夠淨化靈魂的地方</td> </tr> <tr> <td><a href="#">了解更多</a></td> </tr></table></div> </div> <div id="tuijian02"> <div id="tuijiantu2"><a href="http://www.psdhtml.cn/read.php?tid=1108&fid=18?ym" target="_blank"><img src="http://cdn.psdhtml.cn/tuijian03.jpg" width="286" height="204" /></a></div> <div id="tuijianwenzi2"><table width="100%" border="0"> <tr> <td height="40">這個視頻美哭了，不看後悔...</td> </tr> <tr> <td><a href="#">了解更多</a></td> </tr></table></div> </div>
</div> <div id="footer_all"> <div id="f1000-167"> <div id="logo-175-40"><a href="index.html"><img src="http://cdn.psdhtml.cn/logodibu.png" width="159" height="47"></a></div> <div id="login"> <table width="103" border="0"> <tr> <td width="97" height="37" align="left"><a href="http://www.psdhtml.cn/read.php?tid=1108&fid=18?ym">查看更多</a></td> </tr> </table> </div>
<div id="login"> <table width="103" border="0"> <tr> <td width="97" height="37" align="left"><a href="http://www.psdhtml.cn/read.php?tid=1108&fid=18?ym"><span><img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"></span> 免費網頁源碼</a><a href="Login.html"></a></td> </tr> </table> </div>
<div id="right828-167"> <div id="l-828-80"> <div id="r-150-42"><a href="#"><img src="http://cdn.psdhtml.cn/fb.png" width="45" height="45"></a></div> <div id="r-150-42-1"><a href="#"><img src="http://cdn.psdhtml.cn/tw.png" alt="" width="45" height="45"></a></div> <div id="r-150-42-1"><a href="#"><img src="http://cdn.psdhtml.cn/ins.png" alt="" width="45" height="45"></a></div> </div> <div id="r-lianjie"><table width="100%" border="0"> <tr> <td align="right">© 去旅行吧 </td> </tr></table></div> </div> </div> <div id="down1"></div> <div id="banquan"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?ym" target="_blank"><img src="http://cdn.psdhtml.cn/lxidw7.svg" width="1000" height="36"></a></div> </div></div>
</body></html>需要更多網頁源碼成品可以複製連結到瀏覽器打開http://www.psdhtml.cn/index.php?c=thread&fid=18?zgh 我在業餘時間也會代做各類網頁設計作業，有遇到網頁設計問題的看到也會回復。
上次共享了一份7頁的疫情主題源碼成品，仍然可以在公眾號後臺回復【疫情記憶】來獲取。
最近有遇到幾位學生找我做期末大作業說被別人代做作業「騙」了，一問才知道不是卷錢拉黑那種騙，而是有些需求點代做不會做實現不了，比如一些框架不會寫，js驗證實現不了，再比如老師讓兼容ie，代做說不會做兼容ie的甚至說ie老舊他的代碼是新的（兼容ie自有兼容的道理噴ie還不實現需求過分了）…還有個常見的就是做出來美觀度很低… 這幾位同學最後找到我以後說希望我能優惠一些因為他們不得不第二次付費，我只能給大家提醒，首先要做的需求提前123列清楚避免扯皮，然後要評估這個人的水平，很多代做是學生水平和你旗鼓相當，代碼也都是寫一部分網上找一部分，不會調整兼容，用潘叔的話說就是「你還年輕 你駕馭不了…」
來自某校學生的真實評價
來自某校學生的真實評價
來自某校學生的真實評價
我目前在某大廠工作，業餘時間代做，對於學生作業代做有6年經驗了，不會用力過猛超出學生作業範圍，更不會滿足不了你的需求，原創作品超300套，自主設計運營的源碼網站通過工信部、公安部備案，運營有6年時間了，會認真對待每一份需求。