---
tags: Cmoney_Web_檢討
---
WEEK2_HW
===

檢討後
---

1. 偽類 visited 只支援部分屬性如 color 、 background-color，而且要當 a 標籤的偽類才有用，[此外 a 標籤裡要先有這個屬性，才能在 visited 時更改](https://www.zhangxinxu.com/wordpress/2018/10/css-visited-pseudo-class/#:~:text=%E7%BA%A2%E8%89%B2%EF%BC%8C%E5%AE%8C%E5%85%A8%E4%B8%8D%E9%80%8F%E6%98%8E%E3%80%82-,%E5%9B%9B%E3%80%81%E5%8F%AA%E8%83%BD%E9%87%8D%E7%BD%AE%EF%BC%8C%E4%B8%8D%E8%83%BD%E5%87%AD%E7%A9%BA%E8%AE%BE%E7%BD%AE,-%E8%AF%B7%E9%97%AE%E4%B8%8B%E9%9D%A2%E8%BF%99)

[參考](https://www.zhangxinxu.com/wordpress/2018/10/css-visited-pseudo-class/)

2. 01
1. h1 顏色有變
2. 字放前面 SEO 比較快
3. 每個標籤盡量都給 class
4. img vertival-align:bottom 解決空隙問題 ==補充[HTML img 下方有不明空隙？！](https://tzuhui.github.io/2020/01/08/HTML/html-img-blank/)==
5. 陰影 rgba(0,0,0,0.5)
6. nth-child 耗效能 少用 用套 class

3. 02
1. 只有第一個是 h1 其他是 p 用 strong
2. 盡量一個 h1

4. 04
1. 滑入不用全部都亮

5. 07
1. 當螢幕往內縮，一行的文字被擠到兩行時，行距要注意
2. text-align:justify 文字對齊
3. RWD 不只 display:none ， javascript 也要停掉
4. cdnjs 拉特定的 font awesome ， 減少載入不必要的東西

6. 不要用 background 如果只有顏色的話

評語
---

**01_week2_column: 96**
1. 還原圖稿: 區塊的標題無分色
2. CSS: 選取器有 2 處全域污染的危機
3. 不扣分 - CSS: 少用效率較差的選取器

**02_week2_column: 95**
1. 還原圖稿: 多處不應有粗體字
2. SEO: 標題定義有誤
3. 不扣分 - CSS: 少用效率較差的選取器

**03_week2_btn: 94**
1. 不扣分 - CSS: 建議區塊置中，盡量以 width、margin 來處理
2. CSS: 請習慣使用 class 來定義選取器，避免全域汙染
3. CSS: li 中的 width、height 多設定的，line-height 移到 a 元素設定較好

**04_week2_blog: 84**
1. 還原圖稿: 麵包屑的分隔符號空間分配不均
2. 還原圖稿: 側邊欄兩個區塊的最後一則清單的下方距離過大
3. 還原圖稿: 側邊欄的文章標題沒有行距
4. SEO: 不應該有 \<h1>
5. SEO: 側邊欄的文章名稱應設定標題
6. SEO: 側邊欄的區塊名稱不應設定這麼高的標題編號
7. 不扣分 - SEO: 影像的 alt 可定義標題名稱
8. HTML: 文章清單內 5 處需要定義 \<a> 元素，不應在最外處定義 \<a> 元素
9. CSS: 3 個選取器有全域污染的危險。header、article、aside
10. CSS: 使用太多後代選取器導致效率較差，巢狀太深會不好管理。為每個元素定義好 className 可避免使用效率較差的選取器
11. CSS: 只有控制背景顏色，卻使用縮寫導致渲染速度降低

**05_week2_dropdown: 100**
1. 不扣分 - CSS: 滑入 icon 可增加滑鼠指標的反饋

**06_week2_dropdown: 89**
1. 還原圖稿: 子選單滑入沒有圓角
2. 還原圖稿: 子選單商品名稱不應該是粗體字
3. 還原圖稿: 子選單文字內容皆沒有行距
4. SEO: 商品名稱的標題層級應提高
5. HTML: 活動、贈品不應該是超連結
6. HTML: 結構過於複雜，可以用一組清單搞定所有的事情
7. CSS: 2 個選取器有全域污染的危險。header、h1
8. CSS: 使用太多後代選取器導致效率較差，巢狀太深會不好管理。為每個元素定義好 className 可避免使用效率較差的選取器
9. CSS: 左側選單文字應製作滑入的反饋效果