本文適用如下場(chǎng)景
領(lǐng)導(dǎo)指著一個(gè)網(wǎng)頁說害淤，這個(gè)不錯(cuò)挖息，咱們頁面也按這個(gè)布局和風(fēng)格做据块。這時(shí)你直接用html+css+js生寫還是挺費(fèi)工的码邻。最快的方法當(dāng)然是直接照抄網(wǎng)頁。本文不需要其它工具另假，只用瀏覽器的“另存頁面為”和“查看頁面源代碼”兩個(gè)功能來搞定照抄網(wǎng)頁像屋，結(jié)果證明，不考慮js功能边篮，僅看網(wǎng)頁外觀己莺，是完全可以做出一模一樣的網(wǎng)頁的。
舉個(gè)例子
以下面網(wǎng)頁為例戈轿，布局簡(jiǎn)單凌受，但是要自己從頭開始寫，肯定要調(diào)試很久思杯。
image
網(wǎng)頁上鼠標(biāo)右鍵胜蛉，查看頁面源代碼
image
瀏覽器的新標(biāo)簽中會(huì)打開一個(gè)完整的html文件挠进，
image
復(fù)制html全部?jī)?nèi)容到testindex.html，這個(gè)文件就是我們網(wǎng)頁的主頁面誊册。將紅框中引入的css文件和js文件的目錄去掉../../领突，這是為了我們建立目錄方便，改完后只需要在testindex.html同級(jí)目錄下建立common目錄案怯，避免到testindex.html所在目錄的外面建立目錄君旦。
image
頁面源代碼頁面點(diǎn)擊js和css文件名稱，會(huì)在新標(biāo)簽頁打開js文件嘲碱，如下圖金砍。如果復(fù)制js css文件內(nèi)容到對(duì)應(yīng)文件，有些亂碼會(huì)影響最終顯示麦锯，我試驗(yàn)是失敗了恕稠。
image
要獲得需要的js和css文件用“另存頁面為”可以得到
image
箭頭指向的文件夾內(nèi)有testindex.html需要的全部js和css
image
image
在testindex.html目錄下建立js和css需要的目錄，將對(duì)應(yīng)文件拷貝進(jìn)去
image
然后用瀏覽器打開testindex.html
image
發(fā)現(xiàn)中文部分是亂碼离咐，用UltraEdit對(duì)文件進(jìn)行轉(zhuǎn)換
image
轉(zhuǎn)換完重新打開谱俭，中文顯示正常了奉件。彈窗是因?yàn)閖s和后臺(tái)服務(wù)交互的問題宵蛀，我們只抄外觀，所以這個(gè)問題不用處理县貌，后期把js文件對(duì)應(yīng)動(dòng)作注釋即可术陶。
image
現(xiàn)在還差圖片無法顯示，Login.css里配置了圖片的相對(duì)位置煤痕，
image
通過相對(duì)位置可以猜測(cè)圖片url梧宫，瀏覽器打開url
image
下載圖片放到目錄里，同時(shí)修改css中圖片的目錄為url("img/frame/banner.jpg")摆碉，
image
刷新瀏覽器塘匣，看到圖片也成功加載上了。其它圖片也都同樣處理
image
總結(jié)
只用瀏覽器的“頁面另存為”和“查看頁面源代碼”兩個(gè)功能可以實(shí)現(xiàn)照抄網(wǎng)頁外觀的目的巷帝，是否對(duì)所有網(wǎng)頁都可行并不確定忌卤。
如果使用頁面另存為也可以保存頁面的大部分元素，但是文件的目錄結(jié)構(gòu)會(huì)很混亂楞泼，主文件里面會(huì)有亂碼表示的目錄位置驰徊，不利于后續(xù)維護(hù)和管理。所以建議主文件還是直接復(fù)制的頁面源代碼堕阔，圖片棍厂、css、 js文件位置也自己手動(dòng)設(shè)置超陆，這樣項(xiàng)目結(jié)構(gòu)合理清晰牺弹，后續(xù)維護(hù)也方便。
圖片其實(shí)不用下載，我們的網(wǎng)頁不可能用人家的原圖例驹，自己做好圖片放到正確的目錄下捐韩，頁面會(huì)展示我們自己的圖。
js文件涉及和后臺(tái)服務(wù)的交互鹃锈，我們只需要模仿外觀荤胁，可以把引入的js文件都注釋掉。
