---
tags: 網頁切版直播班 - 2021 夏季班
---
# 學生 pixel perfect kata

* [Gui Ting Liu](https://youtu.be/6dyXWsuyNsQ)
* [YuriT](https://www.youtube.com/watch?v=dXjNR8zyUpw)
* [肉鬆](https://www.youtube.com/watch?v=oq-_3_jdoOE)
* [Vic](https://youtu.be/xVldvQuSQnI )
* [Yao Lin](https://www.youtube.com/watch?v=uFwGIGXtx4k)
* [Kent](https://www.youtube.com/watch?v=Ov9v2uDN-78)
* [Harold](https://www.youtube.com/watch?v=XFgbsW7cj_Q)

## 大家常錯的地方
1. footer 寫死高度。
2. 相同區塊沒有使用 ul li 管理。
3. 網頁只有一個 h1 標籤。
4. 類別 父子層 命名的問題。
[參考文獻-校長的css命名/階層優化教學文](https://ithelp.ithome.com.tw/articles/10237687)

## [YuriT](https://www.youtube.com/watch?v=dXjNR8zyUpw)
1. 結構部分有誤，，左邊區塊，應該是兩則消息，一則消息是 li> 裡面有 img H2+p。

## [肉鬆](https://www.youtube.com/watch?v=oq-_3_jdoOE)
1. 表尾可嘗試 align-item:center; 讓他置中
2. p{font-size:16px} 你忘記寫了

## [Vic](https://youtu.be/xVldvQuSQnI )
1. 提醒下你有寫 html 標籤選擇器，若是中大網站，要注意各個 頁面標籤樣式是否樣式一樣，否則覆蓋上會有點麻煩。

## [Yao Lin](https://www.youtube.com/watch?v=uFwGIGXtx4k)
1. aside 不能在 .news 裡面。

## [Jeff H](https://www.youtube.com/watch?v=fXOIHC5ZPWw)
1. .news-fraction 會是 ul li
2. 新聞裡面的標題跟段落是 h2+p 不會是 ul li
3. .footer 在課堂上有提及不要寫死高度。

## [Dida](https://www.youtube.com/watch?v=SSqDfLqDjFw)
1. products 可以不用下 display flex，因為 ul li 本身就是區塊元素，會從上到下排列，有時可善用元素本身特性，這樣就可減少樣式複雜度。

## [周周](https://www.youtube.com/watch?v=_uwBpg504Aw&feature=youtu.be)
1. 一個網頁只會有一個 h1，可用 h2 標籤。
2. 圖片、標題、段落請讓他們在同個 li 群組內，不要拆開他們。

## [小將](https://www.youtube.com/watch?v=wrntWCp1aAA)
1. .list 那裡請用 ul li 結構。
2. title 標題請用 h2

## [J](https://www.youtube.com/watch?v=vjCal67lG_k)
1. .Kate 可以移除。
2. b 標籤請換成 h2。
3. .news 請換成 ul li 結構。
4. foot 請不要寫死高度，用 padding 產生留白。
5. 寫 scss 時，不要讓 class 階層太長，盡量在四五層內，像是 .news 不用放在 .wrap 階層內，可以拉出來讓他獨立。

## [irene](https://www.youtube.com/watch?v=AELUIjj-fJo)
1. .photo 沒用到可移除。
2. 若是 article 是 .news 底下子區塊，建議命名為 .news-article，單純寫 .article 很難看出他跟 .news 的依賴關係 。
3. .footer 嘗試移除高度，用 padding 產生留白。

## [Jim Hwang](https://www.youtube.com/watch?v=38GeZ7wDTa8)
1. 左側是 消息列表，可嘗試 class 命名優化，例如 .news。
2. 左側 列表請嘗試一個 ul 包兩個消息。
3. 這個 kata 不會用到 column，善用區塊元素特性從上到下排列。

## [Moose](https://www.youtube.com/watch?v=O4y0EDqePCQ)
1. 一個小建議設置，你在 html 標籤選擇器設定了 li 樣式，這裡建議改成 .news li，確保該設定在特定範圍內，往後網頁擴充才不會影響到其他的 li 樣式。

## [Joseph Tang](https://www.youtube.com/watch?v=ZtdTU6qcBUY)
1. 若是刻意練習Bem的話提醒一點。
你寫的 .list 元件，__ 區塊正確，但 p 卻沒有 class
這有兩種可能性，
一種是 p 是全域設定，在其他處都一樣，
另一種是他其實也是 list 元件裡面的依賴樣式，
因為你在 body 下了全域行距設定，所以我覺得你是做前者。

## [Riley](https://www.youtube.com/watch?v=Low8ZbF4_KU&feature=youtu.be)
兩個建議
1. .content 如果樣式跟 .news 有關聯，可以叫做 .news-content 可讀性性會較好。
2. .footer 在 kata 文字只有一行，你加上三行，但有扣掉上下 padding ，加起來也剛好 120 這樣也 ok 勒~。

## [Sylvia-H](https://www.youtube.com/watch?v=pwHFZEajZsc)
1. Bem寫法，
若是區塊應要叫做 「news __item __ text」，
而裡面的 h2，應要叫做 news __ item __ text __tile，
可以考慮 h2 p 是否為全站共同樣式，
讓你刻意設計成 bem 的元件可以更簡潔。

## [鉦勝](https://www.youtube.com/watch?v=tmQKHec1JMs)
1. .card 請用 ul li 結構。
2. h2 p 外面可以不用包 div，讓結構更簡潔。
3. asild 應該是叫做 aside？
4. .content 跟 main 可以移除掉其中一層試試看，並善用區塊元素另起一行特性從上到下自動排列

## [軒仔](https://www.youtube.com/watch?v=bPWbXAH-EUU&t=22s)
1. .footer 嘗試不要寫死高度，用 padding 來產生留白試試看。
2. 右邊的大圖應該是高度 216，但他因為你用了 flex 關係，圖片高度被拉成 240 高度有些變形，可以看看如何調整。

## [Gill](https://www.youtube.com/watch?v=mslc28YRdM0)
1. 像是 .new li 那裡你可以不用在 .wrap 階層，可以拉出來，這樣編譯出來的階層會比較短，像這樣你編譯出來會變成.wrap .main .new li .new-content h2，但其實寫 .news-content h2 也有一樣的效果，除非他們有依賴性才需要繼承階層，但 main wrap 都是排版階層，跟元件 .news 部分可以拆離。

## [沈依蓉](https://www.youtube.com/watch?v=s54tZWujsho&feature=youtu.be)
1. 一個小建議是 可以用 .card 推擠 margin right，而不是用 .card li，因為用子層來讓外層跟外層推出距離不合理。

## [anna](https://www.youtube.com/watch?v=3d6Nx3S-OhE)
1. 在 class 命名上，如果你 .news 裡面的 list 跟 item ，是 .news 底下的依賴子模組，建議叫做 .news-list .news-item 會比較好，但這裡你應該是訓練前者，可以再調整命名看看勒。

## [黃小瑄](https://www.youtube.com/watch?v=YuWJgusy4vo)
1. 有個小細節是 img 沒有結尾標籤哦，HTML面板 23 行可以移除勒~

## [Alicia Lo](https://www.youtube.com/watch?v=UNsmLPI5WLY)
1. .new 與 .newContent 你各有寫寬度，請思考移除其中一處試試看，這裡不需要寫那麼多寬度，這會有助於你寫RWD 時，結構可以更簡潔。
2. newsBox 這名稱可以再好一些，例如叫做 .news-item

## [Tansy](https://www.youtube.com/watch?v=BoKmvG5E_-o&feature=youtu.be)
1. 你有寫像是 li h2、ul li 這樣的標籤選擇器，建議不要這樣，原因是一個中大型網站，有可能各個頁面的 li h2 都不一樣，如果你寫全域的 html 標籤，這樣在樣式覆蓋上會變得困難，建議還是用類別選擇器來指定範圍樣式，例如 .news-title

## [ZY Hsu](https://www.youtube.com/watch?v=ZSEEfRqjQ-Q)
1. 一個小建議是 .content 那裡不用放在 .wrap .main 底下的巢狀，這樣會導致階層過多。
這樣 scss 編譯出來，就只會是 .content-news .content-txt ...而不會是 .wrap .main .content-news .content-txt h2 這麼多階層。

## [Fleur](https://www.youtube.com/watch?v=wV2N2g7307k&feature=youtu.be)
1. 一個小建議是 item 元件可以拉出來獨立，不用放在 .main
好處一是他之後放在其他區塊不會受限在 .main
好處二階層簡潔

## [Jerry Yen](https://www.youtube.com/watch?v=n0VxBmnjvRI&feature=youtu.be)
1. 只有一個小細節是 .news .content 那裡推擠比較不合適，若是父層跟父層有距離，用 .news 設置寬度會比較直覺，否則日後在回顧版面時，還會需要思考究竟是子層哪裡的 padding 或 margin 有推擠到，維護上就會比較麻煩。
2. 我的意思是，因為 .news .ad 是同層，所以可以在 .main 加上 space between 方式左右靠齊，至於 96 圖片跟段落推擠，則裡面屬於同層，就可以裡頭元素推擠。

## [rose](https://www.youtube.com/watch?v=Ffoqq4XwQVs&feature=youtu.be)
1. emmet 練習得不錯，也有用到 ul li
2. 你用 large middle small box 當作容器命名是個不錯的嘗試，會建議你嘗試語意命名，像是左邊是消息列表，那可以試試看叫做 .news 裡面標題叫做 .news-title 試試看。
3. ul 裡面的第一層只能是 li，所以右邊的 ad 廣告必須包 li。
4. 不過右邊的廣告數量並沒有多個廣告，所以也不需要下 ul 標籤。

## [黃羽均](https://www.youtube.com/watch?v=Zmu3AsJYGzw&feature=youtu.be)
1. wrap 不用下 display:flex，因為她底下只有一個 container，不需要做併排。
2. .container 是容器，所以讓他去影響消息列表不合適，也就是這樣的 class 不適合`.container ul li h2`，因為左側是消息列表，所以可以把 news 放在 ul 上，再來去寫像是 .news h2、.news li 會比較合適。
3. img display: block，比較合適寫在指定範圍內，例如 .news img，如果是要修改下方 3px ，可以用 verticl-align:middle，因為在有些情境上圖片會需要跟其它元素併排，用 display: block 在覆蓋上就會變得比較麻煩。
4. .footer 可以加上 p 段落包住文字。
5. 可以嘗試左右來做寬度推擠。

## [童筱涵](https://www.youtube.com/watch?v=7LYYss3RB8s)
1. .new-h2 請改為 .news-title，這樣的類別樣式，之後在套其它 HTML 標籤也不會衝突。

## [YELLA MOON](https://www.youtube.com/watch?v=D6SyVnToxYg)
1. 可以嘗試寫成 .news h2 .news p ，讓樣式限縮在特定範圍。
2. img 沒有結尾標籤 </img> 還請移除。
3. 最後你的介面 標題跟段落掉到下面，可以看看為什麼，以及去觀察其他同學寫得結構。
4. 有時卡關時看看別人的寫法，也是種訓練，讓自己知道原來還有哪些寫法。

## [阿瓜](https://www.youtube.com/watch?v=RqGWovEW7y0)
1. news-content 作法我課題會講解父層處理方式，到時可再了解。
2. 一般來說比較不會在 img 下全域 displayblock 建議寫在範圍內 .news-list img。

## [yurie](https://www.youtube.com/watch?v=Rzf64OpW85A)
1. 表尾請嘗試不要寫死高度，用 padding 產生留白。
2. 可以嘗試寫成 .news-content h2 .news-content p ，讓樣式限縮在特定範圍。
3. 一般來說比較不會在 img 下全域 displayblock 建議寫在範圍內 .news-list img。

## [Lina Chen ](https://www.youtube.com/watch?v=z79rJWQEdVg)
1. 你是設計一個 .new ，裡面有依賴的區塊是用成 new-content，這樣子的設計是可以的，表示你一個 - 代表是裡面的依賴模組。
2. 但你右邊叫做 side-bar 就會有些困惑，會想要找外面的 .side ，如果那是新的區塊，可以叫做 sideBar。

## [Phoebe](https://www.youtube.com/watch?v=Z3bIXXtBUrQ)
1. 你有設定 .new、.item、.content，若 .item 跟上層 .news 是一組都是有關消息列表的設定，可以嘗試寫成 .new-item、.news-content。
2. footer padding 只有推上下，可以寫成 padding:48px 0 。

## [Karen Huang](https://www.youtube.com/watch?v=nCqevlazrWY)
1. 可以試試看 .news-text 向右邊推的 margin right ，改用 .news 推擠，因 .news 與 .ad 同層，同層推擠距離，透過 .news 比較適合。

## [Yen](https://www.youtube.com/watch?v=dNrUVMabuhg)
1. 可以試試看 .card 向右邊推的 margin right ，改用 .cards 推擠，因 .cards 與右邊廣告圖片同層，同層推擠距離，透過 .cards 比較適合。

## [大衛 ](https://www.youtube.com/watch?v=hUkvnZ1oD2w)
1. img 設定可以寫在 .item img 上縮限範圍，如果是想解決 3px 問題，可以用 vertical-align:middle
2. 左邊是消息區塊，你也有設定 .new ，但是 .new 的相關 class css 樣式設定沒看到，建議可以寫成像是 .new .new-item h2 之類的，來瞭解他們彼此的依賴關係
3. 用 justify-content: space-between; 來做左右區隔不錯

## [Nate Lu](https://www.youtube.com/watch?v=9bXhWj7u0Hw)
1. 你是少數 kata 有嘗試用 工具型 class 的學生，嘗試得很不錯，例如 .mb、.mx，這樣子很好，但建議給一個單位值，例如 .mb-1，一個單位是推擠 4 px，mb-6 則是 推 24 px，這樣會比較好些，像是 bootstrap 也有類似的概念單未來推擠。這後面會再多做講解，到時可以觀念可以更穩固。
2. 左邊是消息列表，可以嘗試 ul 寫 .news，標題寫 .new-title 會比較合適

## [Scarlett 史嘉](https://www.youtube.com/watch?v=dm6azmRoHz4)
1. img.news-pic 可以寫成 .new-pic，在寫 CSS 時不傾向讓他去綁定 HTML 標籤，這樣選擇器可以不受 HTML 標籤限制，可以指定在各標籤上。
2. h2 可以改成 .news-list h2，限縮樣式範圍，因為一個中大型網站，每個標題樣式都不一樣，直接寫在 h2 會有些風險。

## [zyc ](https://www.youtube.com/watch?v=h8AOQUbNnjI)
1. h2 建議改為 .hero h2，一個網站每個頁面 h2 樣式可能都不一樣，樣式覆蓋上可能會比較麻煩。
2. footer 既然都用 padding 推擠，那就不用 flex 推嘍。

<!-- [natsu](https://www.youtube.com/watch?v=W-HNDi4UFfQ&feature=youtu.be) -->

<!-- [三隻小貓 ](https://www.youtube.com/watch?v=DrhqP54mfEk) -->