切版任務二 - 切版心得

工具介紹

有經驗的朋友應該會先設定好CSS檢查框線，但新手的我經驗不足，無法確認在設定排版時位移了多少，這時需要些插件來幫助我檢查版面。

• 瀏覽器插件
  • CSS Peeper
    
  • CSSViewer
    

這二個插件在Chrome及Edge中的擴充插件都可以新增，檢查自己的版型時我會用Css Peeper來檢查，查看別人Css有用什麼屬性時會用CssViewer，如果有同學有更好用的工具可以推薦給我。

使用CSS Peeper

開啓時用滑鼠移動到要檢查的各區塊，就會出現紅色虛線，可以很方便檢查版型上有那些問題。
下圖是我第一次設定的版型，在你愛我像誰？這個區塊，明顯的跟老師的設計圖位移了，

滑鼠點選你愛我像誰這段字，在移動點選外邊框，插件就會出現偏移距離有多少px，明顯的左邊偏移了30px。

對比老師的設計圖

---

提示小視窗

可以不用按F12就能看到盒模型的padding、border、margin設定了多少，以及一些CSS的設定。
當然這無法取代F12各種強大功能，只是能快讓我很快的檢查設定有無問題。

---

我如何切版

純新手因為經驗的不足，到目前還是從 header 標籤的html及css做完，才接著往下做到 footer 標籤結束，無法跟老手一樣先編寫css基本樣式後，再編排所有框架。不過被退稿一次後重做，有些許的進步一點，所以退稿也不是什麼壞事，多練習讓自己進步也是挺不錯的。

相似的排版一起做

在三大平台及任何角色這三個區塊非常相似，都是大標加圖上文下並排方式，可以做完其中一個框架，複製一份做另一個，只要一開始編排的很好，基本上另一個不會出錯。

一即是全

"一即是全，全即是一"成為鋼之鍊金術士
這份排版按鈕出現次數很多，第一次交作品時我的作法很低能，不同的位置會另外再做一次CSS(如下)
A:

B: C:

<div class="A"><a hrtf="#">方案費用</a></div>
<div class="B"><a hrtf="#">方案費用</a></div>
<div class="C"><a hrtf="#">方案費用</a></div>

.A{
    a{
        ...
    }
}
.B{
    a{
        ...
    }
}
.C{
    a{
        ...
    }
}

在退件後，重做一次學乖了，重復的事情不要多做一次

<div class="A"><a class="button" hrtf="#">方案費用</a></div>
<div class="B"><a class="button" hrtf="#">方案費用</a></div>
<div class="C"><a class="button button-red" hrtf="#">方案費用</a></div>

.button{
    a{
        ...
    }
}
.button-red{
    background-color: #FF5D50;
}

雖然依舊寫的不太好，但還是有些微的進步XD，繼續再努力。

多利用SCSS變數、巢狀、函式、混入、繼承等

第一次交件時只用了巢狀這功能，使得CSS看起來特別龐大
被退件後，就盡量練習繼承、混入等寫法，降低CSS中重複性。
函式還沒用過，想不到可以什麼時機用到，讓我之後再好好練習。

問題解決

在discord頻道上同學及老師、助教是很好的幫助。
我所在的二組裡，蠻多有經驗的同學們，都給我很多很好的見解，讓我及時的做修改。
以下觀看我們平時的討論內容
https://youtu.be/_wO2CJ708c4

---

結論

我在參加六角體驗營前CSS是0經驗的，所以很多不懂的地方很常詢問同組同學，非常感謝二組的同學們 @BEAN#8402 @Feng#1218 @SSARZ 札#4102 @eileen1003#3685 @kevin嘉軒#3254 @TTsuei#9284 @小天#7177 @靜宜#6866 @饅頭#3907，讓我受益良多，也謝謝六角的老師助教們的指導。

以上是我這個前端入門人士的微薄經驗，希望各位專家們不吝指教。

下面是我所作的任務二切版，有任何需要改進的，再麻煩告知我進行修改，感謝!
https://hiphop825.github.io/chattalker/
https://github.com/hiphop825/chattalker.git