作個別人家的網頁

本文適用以下場景

領導指着一個網頁說,這個不錯,我們頁面也按這個佈局和風格作。這時你直接用html+css+js生寫仍是挺費工的。最快的方法固然是直接照抄網頁。本文不須要其它工具,只用瀏覽器的「另存頁面爲」和「查看頁面源代碼」兩個功能來搞定照抄網頁,結果證實,不考慮js功能,僅看網頁外觀,是徹底能夠作出如出一轍的網頁的。 css

舉個例子

如下面網頁爲例,佈局簡單,可是要本身從頭開始寫,確定要調試好久。
作個別人家的網頁
網頁上鼠標右鍵,查看頁面源代碼
作個別人家的網頁
瀏覽器的新標籤中會打開一個完整的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"),
作個別人家的網頁
刷新瀏覽器,看到圖片也成功加載上了。其它圖片也都一樣處理
作個別人家的網頁 html

總結

只用瀏覽器的「頁面另存爲」和「查看頁面源代碼」兩個功能能夠實現照抄網頁外觀的目的,是否對全部網頁均可行並不肯定。
若是使用頁面另存爲也能夠保存頁面的大部分元素,可是文件的目錄結構會很混亂,主文件裏面會有亂碼錶示的目錄位置,不利於後續維護和管理。因此建議主文件仍是直接複製的頁面源代碼,圖片、css、 js文件位置也本身手動設置,這樣項目結構合理清晰,後續維護也方便。
圖片其實不用下載,咱們的網頁不可能用人家的原圖,本身作好圖片放到正確的目錄下,頁面會展現咱們本身的圖。
js文件涉及和後臺服務的交互,咱們只須要模仿外觀,能夠把引入的js文件都註釋掉。瀏覽器

相關文章
相關標籤/搜索