# 如何觀看其他勇者的攻略?

### 開始前注意事項
* 本篇針對以 Github Pages 方式回報任務的攻略來進行說明
* 如果對於不知道該如何挑選適合自己學習的攻略可以參考當週專門提供給新手勇者學習的入門攻略

### 下載其他勇者的攻略(Git Pages 原始碼)

假設你已經進到某一位勇者的攻略(Github Pages)中，
在網址列中看到類似這樣的網址: https://yingming25.github.io/web-layout-resume/

在網址中 .github 前面的 yingming25 是勇者的 Github 帳號，我們需要先回到 Github 首頁，再把勇者的帳號貼到左上的搜尋框中查找勇者的 Github:

在搜尋框輸入完勇者的 Github 使用者帳號後按下 Enter 後會看到以下畫面:

接著透過以下步驟進到勇者的 Github:
1. 點擊 Users 超連結
2. 點擊勇者的 Github 使用者帳號以進入勇者的 Github


進入到勇者的 Github 後會看到以下畫面:


接著點擊 Repositories 超連結以進入勇者的遠端儲存庫:


進入勇者的遠端儲存庫後，找尋與勇者 Github Pages 網址中 github.io 後名稱面相同的遠端儲存庫，像是原本的網址是 https://yingming25.github.io/web-layout-resume/ ，我們要找的勇者的遠端儲存庫名稱就是 web-layout-resume :


點擊要找的遠端儲存庫的超連結後進入該遠端儲存庫，進入後畫面如下:

接著點擊畫面中綠色的 Clone 按鈕:

點選 Download Zip 按鈕將遠端存儲庫中的專案下載到自己電腦:

下載完 Zip 檔後請先進到儲存 Zip 檔的資料夾位置:

解壓縮 Zip 檔:

將 Zip 檔解壓縮後，在 VS Code 中開啟解後縮後的專案資料夾:

接著就可以在 VS Code 中觀看其他勇者的攻略了:


### 使用 Chrome 開發者工具來查看元素結構
先在網頁中按右健再點選檢查或按 F12 開啟開發者工具:

透過網頁中捲軸來移動到想要查看的元素後，在開發中工具的左上角，有一個鍵頭的圖示，點擊該圖示後，將滑鼠游標移動到想要查看元素上:
也可以透過同時按住 Ctrl(Command) + Shift + C 後將游標移動到想要查看元素上，:

### 使用 Chrome 開發者工具來查看元素的樣式
透過同時按住 Ctrl(Command) + Shift + C 後將游標移動到一個想要查看樣式的元素上時(移到元素上後先不要按左鍵)，會出現一些基本樣式可以查看:

也可以在同時按住 Ctrl(Command) + Shift + C 後將游標移動到一個想要查看樣式的元素上後點擊該元素，接著在開發者工具中查看樣式:


按住 Ctrl(Command) + Shift + C 後將游標移動到一個想要查看樣式的元素上後可以在開發者工具中查看網頁的盒模型與其他樣式，需要在剛才查看樣式的地方，點選 Computed 頁簽後查看:

在該區塊內透過往下拖動捲軸可以查看其他更多樣式:

也可以透過篩選器搜尋想要查看的樣式:

### 使用 Chrome 開發者工具將 HTML 內容複製到編輯器中方便查看
在網頁中按右健後點選檢查(也可以按 F12)開啟開發者工具後，在開發者工具中找到 body 元素後按右健點選 Copy 再點選 Copy outerHTML


接著在 VS Code 編輯器中，開啟一個新檔案檔案:

開啟檔案後再到右下方將檔案類型調整為 HTML 格式:

接著將剛才複製下來的網頁內容貼到 HTML 檔案裡，如果貼上後沒有內容請重新在開選者工具中找到 body 元素後按右健點選 Copy 再點選 Copy outerHTML 來複製網頁內容後貼進編輯器 HTML　檔案中:

### 使用 Chrome 開發者工具將 CSS 樣式複製到編輯器中方便查看

在開發者工具中找到 head 元素裡的網頁樣式 CSS 檔案:
將滑鼠游標移到該檔案的路徑(下圖紅框裡)上:

在該路徑上點擊滑鼠右鍵開啟選單，在選單中點選 Open in new tab:

接著會在新分頁中開啟該 CSS 檔案:

在該頁面中透過 Ctrl(Command) + A 全選網頁內容:


接著到 VS Code 編輯器中開啟一個新檔案:

開啟檔案後再到右下方將檔案類型調整為 CSS 格式:

接著將剛才全選複製的 CSS 貼到 VS Code 中剛才新開啟的 CSS 檔案裡:


## 感謝牆
> 謝謝 這篇文章，幫助我很多~ [name=洧杰]