開發中會遇到領導指著一個網頁說，這個不錯，咱們頁面也按這個布局和風格做吧。直接用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文件都注釋掉。

舉報/反饋

總結

以上是生活随笔為你收集整理的css抄页面,如何照抄别人家的网页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。