---
tags: Cmoney_Web_檢討
---
WEEK1_QUIZ
===

1. nav 裡的按鈕錨點應該設置在 section 而不是 h2 ，不然會切到圖片，如下圖：


2. 文字應該置中

article {
  display: flex;
  flex-direction: column;
  justify-content: center;
}


3. 取消換行

p{
    white-space: nowrap;
}

4. 如果不同裝置上顯示不同斷行，可以把某不用換行裝置的 br 改成不顯示

br{
    display: none;
}

5. 加下面這個，當按上面連結時，不會直接跳到要到的地方，會用滑的

html {
  scroll-behavior: smooth;
}

6. 如果只有單頁網頁，可以考慮把 CSS 寫在 html 的 head 裡

7. 使用百分比控制寬高比較好，如果有多欄，使用直覺性的數字，並輔以 box-sizing : border-box ，避免為了算 box 寬度，設置 23.5% 等不直觀的數字

8. 如果只有單行文字，要設定成垂直置中可以使用給 line-height 的方式

9. article 拿來包這些東西太少了，可以改用 div

10. 可加 og 來增加 SEO

<meta property="og:title" content="小資女艾蜜莉APP" />
<meta property="og:image" content="https://jaosn60810.github.io/2021_cm_frontend_practice/week1_all/week1_quiz_v5/img/pic1.png" />
<meta property="og:image:alt" content="小資女艾蜜莉APP" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="488" />
<meta property="og:image:height" content="410" />
<meta property="og:description" content="這是小資女艾蜜莉APP的功能介紹" />

評語
---
1. HTML: HTML5 沒關門標籤不需要加 /

2. HTML: 加了很多 \<br> 導致版型寬度變動時，內容會莫名斷行

3. HTML: 如果有需要就定兩、三個 \<p> 沒關係，重複的 \<br> 不是正確的排版方式

4. CSS: 不應該在 body 上設定 flex

5. HTML: 錨點所制定的位置在 section 較優，否則，圖會被切到

6. CSS: 該網頁只有一個，應使用文件樣式較為符合

7. CSS: 要調整影像與文案置中，不應使用 padding-top

8. 還原圖稿: 頁首與文件邊緣有莫名的空間
> body 有預設 8 px 的 margin
<br>

9. CSS: 建議可在 \<a> 元素上定義連結所需要的所有樣式，\<li> 元素來處理距離，會比較好管理(不扣分)
>像是顏色就寫在 a 裡面