第25組 第一週小組任務

tags: 六角,網頁切版直播班-2021夏季,`第一週小組任務

小組討論

會議時間：2021/07/07 22:30
參與人員：

Slack ID 暱稱
U01UJDLSB1V 聿凌
U021BFC56UA Carol
Zora Wang
U026R02AFUN 黑黑
U014Y9K0T3P Tyler2011a

第一題

請做此心理測驗，分享自己的測驗結果給您的組員。

暱稱 類別 職業分析
Zora 外交家 [競選者]
GinJack 外交家 [主人公]
聿凌 外交家 [提倡者]
Carol 分析家 [邏輯學家]
Amber 調停者 [INFP-A]

第二題 選擇題

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

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

HTML




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

ANS:
[聿凌 回答]選2，語法寫圖片高度90px，但網頁預設會多2-3px，所以選2.90px+2-3px=92-93px。
[Carol 回答] 2. 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:
[zora回答] h1-36px + p-16x1.5x2+24px + img 90px = 198
[聿凌回答] 標題36px + 段落(16px1.5 + 16px1.5 + 24px )+ 圖片 90px = 198
[Carol回答] 36 + (16*1.5) + 24 +90 = 198

第四題

請問 .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:[GinJack回答]：
height: 50 + padding 上下各推 20px + border-bottom 3px = 93px
width: 50 + padding 左右各推 20px + border-right 3px = 93px
[聿凌回答]：
height: 50px+border底部3px+padding往外推上下20px2=93px
width: 50px+border右邊3px+padding往外推左右20px2=93px
[Carol回答]
寬：width 50px + border-right 3px + 左右padding 202px =93px
高：width 50px + border-bottom 3px + 上下padding 202px =93px

第五題

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

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

ANS:[GinJack回答]：程式碼
[聿凌回答]：程式碼
[Carol回答]：程式碼

第六題

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

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

ANS:[GinJack回答]：程式碼
[Carol回答]：程式碼
[聿凌回答]：程式碼

第七題

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

討論截圖

Select a repo