---
tags: 網頁切版直播班 - 2021 夏季班
---

# 檢核點 - 第一週

**重點觀念：**

1px 也不差的重點：

* 圖片底部留白
* margin padding 個數值是否正確
* 字體大小、行高
* border-box

**回覆參考：**

在 margin、padding 練習蠻好的，整體寫得很好唷！

---

建議：

**先檢查會影響到 px 的因素：**
* img 需要設定 display block 讓下方留白消失(寫 verticle-align 也可以)
* 間距部分設定有誤，例如：，其他可以再多注意
* 字體無論是使用哪一種，建議都要補上 sans-serif（無襯線字體），確保所有裝置都能正確瀏覽，可參考 -> https://www.w3schools.com/cssref/css_websafe_fonts.asp
* 可以在 body 設定 line-height:1.5，這樣文字都可以不需要設定行高
* 有文字的部分都需要設定字體大小（只有 16px 可以不寫）
* 建議加上 border-box 的設定
* hr 可以思考用 border-bottom 來處理

**再來看 container 寬度**
* container 內只能設定 width: 1200px; 和 margin: 0 auto;

**最後看結構和一些常見問題：**
* 使用 ul li 結構（可以一個ul li 也可以兩個 ul li)
* 工作經驗的結構
* 是否有寫 h1，或是有多個 h1
* 不要寫死樣式在 HTML 標籤上，因為一個網站的頁面，會有很多個 h2 或 p 樣式，這樣在覆蓋樣式上會比較困難
* 副標題可以用 h2 裡面包 span 的方式來設計，有些學員會用兩個 span 來做
* skills 區塊是否有用 margin-left 硬推，建議用 margin: 0 auto 來水平居中
* 不寫死 div 寬高度
* 不需用到 flex 來設計，運用 div 區塊元素與 padding 產生留白來設計
* work h2, .profile h2, .education h2 可以思考用一個名稱共用，例如 .title，這樣才可避免內容越來越多時，要一直增加自訂名稱
* 作品連結記得使用 a 標籤
* 網頁下方會出現 x 捲軸，表示有寬度寫死造成超過瀏覽器的正常大小，這邊要注意一下技能區塊和聯絡區塊的寬度
* 聯絡區塊的電話和信箱寫法

    <a href="tel:+..."></a>
    <a href="mailto:..."></a>

助教新增建議：

*