今天上午在實驗室裏學習，無意中看到湖北老鄉群裏爆出了一則外包的消息。

是問有沒有回搭建網站。我接了這單活兒。需求很簡單，仿照這一個已知的網站做一個靜態頁面。

工作量不大。他說了，做一個靜態網站。因為之前，我曾做過類似的工作，所以我就答應了。

遇到的第一個問題就是評價。他讓我開個價。說實話，我當時也蒙了。這個外包估價這個事情，我之前也沒做過。在網上搜了下，每個人說法都不一樣。看到一個我覺得可以參考的回答。按照做的頁面收費。

每個30~50。於是我給他報價是500，理由就是 大概做10個左右的頁面，每個50。他答應了。第一次估價的經歷就這樣結束了。我覺得還好。整個事情的工作量不是很大。

好，回到今天的主題。怎麽仿寫已知網址的網頁。

我要走的第一步工作就是把已知的網址 www.sorbushouseware.com

打開瀏覽器的調試模式，查看網頁的html代碼。

也就是說把顯示這個網頁的相關代碼，包括需要的html, css, javascript, font, images 全部搞到你的項目中，就能顯示這個效果。

在操作的過程中，對每個文件進行“右鍵-》另存為-》確定”即可。在操作的過程中，註意文件目錄的一致性。

對於像圖片文件沒有另存為選項的，我們可以訪問這個圖片文件的url，通過保存圖片來獲取圖片資源。

最後獲取的結果下所示

最後在瀏覽器的效果跟原網址的效果100%的一致。

至此，就完成了已知網址的頁面仿寫。怎麽樣，有沒有覺得很好玩呢? 你也可以去嘗試著仿寫著www.baidu.com 的網頁哦。

----------------------------------------------------------------------------

雖然說功能是實現了，但是我們要搞清楚它的原理。

其實每個網頁在瀏覽器的呈現都是以網頁形式的。既然是網頁，就要了解網頁的構成。除了從代碼層面上知道header body外。我們還得知道這個網頁引用了哪些文件，加載了哪些圖片，加載順序是什麽。所謂的動態網頁，要搞懂這些，我們就要搞清楚在瀏覽器加載網頁的原理和過程。當然了，這也不是我一句兩句話可以解釋清楚的。但我總結的一句就是可以通過瀏覽器的調試模式開來清網頁加載的過程。

怎麽樣仿寫已知網址的網頁？