第一週小組任務( 第 23 組)

討論時間：7/7(三) 19:30 ~ 21:00

參與成員暱稱 Slack ID
guang U017EK6UEGP
jen U021BHEU22H
灰豹 U02404AG79P
allen wang U023BHYG079
Minnie U0222VBJ2EQ
Pocky Lin U021L4MJ99T
Stacey Yuan U024TDZ652L
Ed Huang UTBMZV6F5

第一題

參與成員暱稱 測驗結果
guang TODO
jen ISFJ-T
灰豹 INFP-T
allen wang ISFJ-T
Minnie ISFJ-T
Pocky Lin INFJ-A
Stacey Yuan ISFJ-T
Ed Huang ENFP-A

第二題

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

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

HTML




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

Ans

  1. 92~93px
  • Minnie 提出解決圖片預設會有 2~3px 的 3 個方法
  1. display: block;
  2. vertical-align: middle;
  3. font-size: 0px;

第三題

請問 .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

h1->36
p->24+24
p->24+24
img->90
36+48+48+90=222

第四題

請問 .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:50+3+20(left)+20(right) = 93
height:50+3+20(up)+20(bottom) = 93

第五題

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

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

Ans

Minnie codepen






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

第六題

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

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

Ans
Jen codepen

第七題

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

Ans

allen wang codepen

小組討論

第三題討論

第五題討論

第六題討論

Select a repo