照抄一個網頁
本文适用如下場景
上司指着一個網頁說，這個不錯，咱們頁面也按這個布局和風格做。這時你直接用html+css+js生寫還是挺費工的。最快的方法當然是直接照抄網頁。本文不需要其它工具，隻用浏覽器的“另存頁面為”和“檢視頁面源代碼”兩個功能來搞定照抄網頁，結果證明，不考慮js功能，僅看網頁外觀，是完全可以做出一模一樣的網頁的。
舉個例子
以下面網頁為例，布局簡單，但是要自己從頭開始寫，肯定要調試很久。
網頁上滑鼠右鍵，檢視頁面源代碼
浏覽器的新标簽中會打開一個完整的html檔案，
複制html全部内容到testindex.html，這個檔案就是我們網頁的首頁面。将紅框中引入的css檔案和js檔案的目錄去掉../../，這是為了我們建立目錄友善，改完後隻需要在testindex.html同級目錄下建立common目錄，避免到testindex.html所在目錄的外面建立目錄。
頁面源代碼頁面點選js和css檔案名稱，會在新标簽頁打開js檔案，如下圖。如果複制js css檔案内容到對應檔案，有些亂碼會影響最終顯示，我試驗是失敗了。
要獲得需要的js和css檔案用“另存頁面為”可以得到
箭頭指向的檔案夾内有testindex.html需要的全部js和css
在testindex.html目錄下建立js和css需要的目錄，将對應檔案拷貝進去
然後用浏覽器打開testindex.html
發現中文部分是亂碼，用UltraEdit對檔案進行轉換
轉換完重新打開，中文顯示正常了。彈窗是因為js和背景服務互動的問題，我們隻抄外觀，是以這個問題不用處理，後期把js檔案對應動作注釋即可。
現在還差圖檔無法顯示，Login.css裡配置了圖檔的相對位置，
通過相對位置可以猜測圖檔url，浏覽器打開url
下載下傳圖檔放到目錄裡，同時修改css中圖檔的目錄為url("img/frame/banner.jpg")，
重新整理浏覽器，看到圖檔也成功加載上了。其它圖檔也都同樣處理
總結
隻用浏覽器的“頁面另存為”和“檢視頁面源代碼”兩個功能可以實作照抄網頁外觀的目的，是否對所有網頁都可行并不确定。
如果使用頁面另存為也可以儲存頁面的大部分元素，但是檔案的目錄結構會很混亂，主檔案裡面會有亂碼表示的目錄位置，不利于後續維護和管理。是以建議主檔案還是直接複制的頁面源代碼，圖檔、css、 js檔案位置也自己手動設定，這樣項目結構合理清晰，後續維護也友善。
圖檔其實不用下載下傳，我們的網頁不可能用人家的原圖，自己做好圖檔放到正确的目錄下，頁面會展示我們自己的圖。
js檔案涉及和背景服務的互動，我們隻需要模仿外觀，可以把引入的js檔案都注釋掉。