changed 4 years ago  
Linked with GitHub

第16組 第一週小組討論

第一題 心理測驗

以下題目使用google meet討論
(參與者：三隻小貓、Joe Kuo、Sasha、阿熊、阿和、Riley、Harold)

第二題

以下範例程式碼的 .text 高度是多少？
討論結果：92~93px
討論過程

第三題

請問 .box 的高度是多少？
討論結果：222px
討論過程

第四題

討論結果：寬/高:93px
討論過程

第五題

請優化此程式碼
討論結果：寬度以及置中只要留最外層的.wrap設定，字型因都相同也可直接利用繼承特性設定於.wrap裡
CSS部分可直接改為

.wrap{
  width: 500px;
  margin: 0 auto;
  font-size: 20px;
}

討論過程

第六題

(這題參與者有加入 Otis)

討論過程
大家提供自己優化的程式碼，組長比對差異，再回饋給大家

一、另外設定一個容器 -

幾乎都有做到，但 Otis 的設定沒有很完全，有些部分沒有包到

.class-name{
  width: 500px;
  margin: 0 auto;
}
  1. 原本有另外設定寬度500/margin置中的部分換成 margin-box(content、header-outbox),有其他CSS設定的則加入margin-box(banner-outbox、footer)
  2. 或是有用到這個設定的都直接加入此class

二、將margin-bottom:20另外抽出來成為一個class

Joe Kuo、Harold、Sasha、阿和、三隻小貓

三、padding縮寫調整成padding: 10px 0;

Joe Kuo、Riley

Sasha的部分是另外增加了一個class .p-10{padding: 10px;}

四、header的地方取消高度設定

Joe Kuo、Riley、Harold、

五、拿掉原本的wrap

阿熊、Sasha、三隻小貓

第七題

討論過程
有同學(Riley)分享結構圖片

將flex下在container與li
以及大家有稍微討論用li與div包裹的差別=>語意化

tags: 小組討論
Select a repo