第11組_第一週小組討論

討論時間：7/6(二) 20:00~21:30

參與成員暱稱 Slack ID
Jun Chan U023XF7RXU1
Joey Chen U02426Q0Z1N
Mia Tsai UU109UWG1
PEI CHI TSAI U02415QR0TA
sejuan U023Z9KD9S8
Stephanie Kan U0245BXM42W
Yao Lin U0246PJB49W

第一題 心理測驗

第二題

以下範例程式碼的 .text 高度是多少？(請不要用瀏覽器觀察)

  1. 90px
  2. 92~93px
  3. 120px



<div class="text">
  <img alt="" src="logo.png" height="90" /> 
</div>

Ans: 92~93px
圖片height 90px+圖片預設的留白2-3px=92~93px

第三題

請問 .box 的高度是多少？(請不要用瀏覽器觀察)

HTML







<div class="box">
  <h1>標題</h1>
  <p>段落</p>
  <p>段落</p>
  <img alt="" src="logo.png" height="90" /> 
</div>

CSS













.box h1{
  font-size: 24px;
  line-height: 36px;
}
.box p{
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 24px;
}
.box img{
  display: block;
}

Ans: 222px
h1 36px + p (16px*1.5) * 2 + margin-bottom 24px * 2 + img 90px = 222px
(img有設定block，無需計算2~3px的留白)

第四題

請問 .card 的寬高與高度各是多少？(請不要用瀏覽器觀察)

HTML

<div class="card"></div>

CSS









.card{
  width: 50px;
  height: 50px;
  border-bottom: 3px solid orange;
  border-right: 3px solid #000;
  background: #000;
  padding: 20px;
}

Ans: width 93px、height 93px
寬度width: 50px + border-right 3px + padding 20px * 2(左右) = 93px
高度height: 50px + border-bottom 3px + padding 20px * 2(上下) = 93px

第五題

請優化此程式碼，優化重點為：

  • 在不影響外觀情況下，試著將不必要的 CSS 移除或整合
  • 請不用更動 HTML 程式碼，僅需優化 CSS 程式碼

Ans: Codepen連結

  • 父層(wrap)與子層(header/main/footer)設定了相同width尺寸，修改後僅保留父層(wrap)的設定。
  • 子層(header/main/footer)設定了相同h2 font-size大小，修改後將其移至父層(wrap)，其餘子層皆刪除。

第六題

請優化此程式碼，並將程式碼連結放到 Codepen 上。優化重點為：

  • 在不影響外觀情況下，將重複的 CSS 樣式，獨立成一個共用的 class
  • 可依照您設定的共用 class，適當調整 HTML 結構

Ans: Codepen連結

HTML

  • class=wrap移至header/content/banner層級下
  • 刪除header-outbox

CSS

  • width 500px及margin 0 auto統一寫至.wrap中
  • 刪除.header-outbox

第七題

彼此討論 pixel perfect kata，你會如何透過 flexbox 來排版？

Ans: 規劃架構如圖

討論過程截圖

Select a repo