---
# System prepended metadata

title: 切版任務二 - 切版心得

---

# 切版任務二 - 切版心得

## 工具介紹
有經驗的朋友應該會先設定好CSS檢查框線，但新手的我經驗不足，無法確認在設定排版時位移了多少，這時需要些插件來幫助我檢查版面。
* 瀏覽器插件 
    * CSS Peeper 
    ![](https://i.imgur.com/4gtqzkG.png)
    * CSSViewer 
    ![](https://i.imgur.com/Hf4us01.png)

這二個插件在Chrome及Edge中的`擴充插件`都可以新增，檢查自己的版型時我會用Css Peeper來檢查，查看別人Css有用什麼屬性時會用CssViewer，如果有同學有更好用的工具可以推薦給我。
    
###     使用CSS Peeper
開啓時用滑鼠移動到要檢查的各區塊，就會出現紅色虛線，可以很方便檢查版型上有那些問題。
下圖是我第一次設定的版型，在你愛我像誰？這個區塊，明顯的跟老師的設計圖位移了，
![](https://i.imgur.com/lTYU4aB.png)

滑鼠點選你愛我像誰這段字，在移動點選外邊框，插件就會出現偏移距離有多少px，明顯的左邊偏移了30px。
![](https://i.imgur.com/JsTkPje.png)

對比老師的設計圖
![](https://i.imgur.com/HizBsah.png)

---

### 提示小視窗
可以不用按F12就能看到盒模型的padding、border、margin設定了多少，以及一些CSS的設定。
當然這無法取代F12各種強大功能，只是能快讓我很快的檢查設定有無問題。
![](https://i.imgur.com/pVtfysG.png)

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

### 相似的排版一起做
在三大平台及任何角色這三個區塊非常相似，都是大標加圖上文下並排方式，可以做完其中一個框架，複製一份做另一個，只要一開始編排的很好，基本上另一個不會出錯。
![](https://i.imgur.com/PKaCbDp.png)

### 一即是全
"一即是全，全即是一"成為鋼之鍊金術士
這份排版按鈕出現次數很多，第一次交作品時我的作法很低能，不同的位置會另外再做一次CSS(如下)
A:![](https://i.imgur.com/q1wkUvG.png) B:![](https://i.imgur.com/q1wkUvG.png) C:![](https://i.imgur.com/E6WyffJ.png)
``` = HTML
<div class="A"><a hrtf="#">方案費用</a></div>
<div class="B"><a hrtf="#">方案費用</a></div>
<div class="C"><a hrtf="#">方案費用</a></div>
```
``` = CSS
.A{
    a{
        ...
    }
}
.B{
    a{
        ...
    }
}
.C{
    a{
        ...
    }
}
```
在退件後，重做一次學乖了，重復的事情不要多做一次
``` = HTML
<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>
```
``` = CSS
.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
