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

標籤：png   img   瀏覽器   asc   操作   ima   需求   http   www.   

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

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

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

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

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

 

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

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

開啟瀏覽器的偵錯模式，查看網頁的html代碼。

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

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

對於像圖片檔案沒有另存新檔選項的，我們可以訪問這個圖片檔案的url，通過儲存圖片來擷取圖片資源。

 

最後擷取的結果下所示

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

 

 

 

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

 

 

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

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

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

 

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