changed 4 years ago  
Linked with GitHub

第一週 1組小組討論

參與人員
| kevin嘉軒 | 游順傑 | jameskrauser | 雷古娜 | Kane0927 |
| 咖哩 | zhfino | ––– | –––| –––|

(ZOOM會議討論畫面)

第一題 心理測驗

slack名稱：kevin嘉軒

slack名稱：kane0927

slack名稱：zhfino

slack名稱：雷古娜

slack名稱：游順傑

slack名稱：jameskrauser

slack名稱：咖哩

第二題 選擇題

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

答案：圖片有留白2~3px，所以答案是93

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

HTML




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

第三題

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

答案：36+(24+24)*2+90 = 22

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;
}

第四題

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

答案：50+3+40=93，兩者皆為93

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;
}

第五題

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

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

組員提交：
slack名稱：嘉軒kevin
https://codepen.io/kevin-chang-the-sasster/pen/VwbaKPe
slack名稱：游順傑
https://codepen.io/JIE329/pen/jOmqYyz?editors=1100
slack名稱：雷古娜
https://codepen.io/tinahopo/pen/ExmVqvj

第六題

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

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

組員提交：
slack名稱：嘉軒kevin
https://codepen.io/kevin-chang-the-sasster/pen/gOWrwmm
slack名稱：雷古娜
https://codepen.io/tinahopo/pen/dyWYxJv
slack名稱：Kane0927
https://codepen.io/kane-lin/pen/poPgJzz
slack名稱：咖哩
https://codepen.io/Ted19851223/pen/BaRKYVM

第七題

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

Select a repo