第 19 組 第一週小組任務

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

小組討論

  • 會議時間：2021-07-04 15:00~15:30
  • 線上討論畫面：畫面一；畫面二；畫面三
  • 參與人員：共 6 名，名單如下。（含 Slack ID 和 暱稱）
Slack ID 暱稱
U022QBG9ZGE Joy Cheng
U022QDUAURL Chiao Chang
U0217NFE007 大衛
U022GB5RMB9 SihLe Huang
U024XBNJBM2 Tansy
UTH5L4022 Sylvia-H

第一題

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

暱稱 類別 職業分析 測驗結果畫面
Sylvia-H 外交家 調停者 INFP-T 畫面
Tansy 守護者 物流師 ISTJ-T 畫面
Joy Cheng 外交家 競選者 ENFP-A 畫面


第二題

選擇題

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

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

Ans: 92~93px

HTML




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


第三題

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

Ans: 36+48*2+90=222px

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 的寬高與高度各是多少？(請不要用瀏覽器觀察)

Ans:
width: 50+3+202=93px
height: 50+3+202=93px

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 程式碼

Ans: 修改重點：把文字樣式和排版分開









body {
  font-size: 20px;
}

.wrap {
  width: 500px;
  margin: 0 auto;
}


第六題

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

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

Ans: 修改重點：把文字樣式和排版分開

  • 刪除 .wrap
  • 獨立出一個 class 為 .container
  • 新增 .pt10 和 .pb10

Codepen 連結



第七題

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

Ans: Codepen 連結

Select a repo