changed 4 years ago  
Published Linked with GitHub

第一週小組任務

參與人員

Fleur Ning Pinky Tracy曼娟

第一題 心理測驗

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

slack名稱 人格類型
Fleur 調停者
Ning 調停者
Pinky 提倡者
Tracy曼娟 提倡者

第二題 選擇題

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

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

HTML




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

答案討論

  1. 92~93px
    Fleur
  1. 92~93px
    Ning
  1. 92~93px
    Pinky
  1. 92~93px
    Tracy曼娟

第三題

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

答案討論

222px (已修正答案，此為正解)
36+(16*1.5)*2+24+90=198 （錯誤，忘記兩個p下方各有ˋmb24）
36+(16*1.5+24)*2+90=222 px
Fleur

答案：36+(16*1.5+24)*2+90= 222px (正確答案)
Ning

36+(16*1.5+24)*2+90=222 px (正確答案)
Pinky

36px+(16*1.5+24)*2+90=222px (正確答案)
Tracy曼娟

第四題

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

答案討論

width : 93px (50+3+20x2=93)
height : 93px (50+3+20x2=93)
Fleur

w=50+3+202=93px
h=50+3+202=93px
Ning

width: 50+3+20x2=93
height: 50+3+20x2=93
Pinky

w=50+3+202=93px
h=50+3+202=93px
Tracy曼娟

第五題

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

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

答案討論

Fleur - 第五題
header .main .footer都有一個固定寬度跟置中的設定，所以用.wrap 包住 .header .main .footer就能保留置中跟寬度不變
Fleur

Ning -第五題
將font-size: 20px 統一放在.wrap Ning
答案：








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

Pinky -第五題
Pinky

Tracy曼娟 - 第五題
答案：刪除header, main, footer的width,margin設定，因為都包在wrap裡面。文字大小也都一致，所以移至wrap。CSS僅留以下內容：
Tracy曼娟

第六題

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

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

答案討論

Fleur - 第六題
Fleur

Ning -第六題
Ning

Pinky -第六題
Pinky

Tracy曼娟 - 第六題
Tracy曼娟

第七題

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

答案討論

第一週 pixel perfect kata 小組作業
Fleur

  • pixel perfect kata 錄影練習版
    老師的建議:
    100 分！可以看出很勤勞在刻意練習
    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
    ，一個小建議是 item 元件可以拉出來獨立，不用放在 .main，好處一是他之後放在其他區塊不會受限在 .main；好處二階層簡潔。我曾經有錄製過一個影片，也提供給你參考~主要是講解階層過多的問題，再請試試看
    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

CSS 階層效能優化建議

第一週 pixel perfect kata 小組作業
Ning

第一週 pixel perfect kata 小組作業
Pinky

第一週 pixel perfect kata 小組作業
需要左右排版的都使用flexbox
我寫的結構中用到flexbox的是content和news-item
Tracy曼娟

討論截圖

slack 討論截圖 > 收合

zoom 討論截圖 > 收合

Select a repo