---
tags: 網頁切版直播班 - 2020 秋季班
---
# 第一週小組任務
請透過線上會議或 Slack 討論 25 分鐘，解答此[問題集](#%E5%95%8F%E9%A1%8C%E9%9B%86)，回報流程如下：

1. 請組長到 Slack 此[訊息](https://hexschool-share.slack.com/archives/G01A7C7SJ0G/p1602730405300100)的 thread 私訊回報解答，**一個小組請派一人提交 HackMD 解答即可（請記得開啟權限）**。回報內容需含：
1. 該問題集的答案
2. 提供 1~3 張視訊或 Slack 對話截圖，確保有進行小組討論
3. 組員參與名單
2. 助教檢視過後，就會透過 Slack 來回報審核成功與否。
3. 若有組員全程沒有參與到討論，該組員不會收到卓越小組徽章，其餘有符合條件者，都會獲得徽章。

Q：約時間討論的組員至少要幾位？
A：至少兩位就可成團！

# 問題集
以下題目皆有使用 Meyerweb CSS Reset。
## 第一題 心理測驗
請做此[心理測驗](https://www.16personalities.com/ch)，分享自己的[測驗結果](https://www.16personalities.com/ch/%E7%B1%BB%E5%9E%8B%E6%8F%8F%E8%BF%B0)給您的組員。


## 第二題 選擇題

以下範例程式碼的 .text 高度是多少？(請不要用瀏覽器觀察)
1. 90px
2. 92~93px
3. 120px

### HTML

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

## 第三題
請問 .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;
}

## 第四題
請問 .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;
}

## 第五題
請優化此[程式碼](https://codepen.io/liao/pen/OJyLOzr)，優化重點為：
* 在不影響外觀情況下，試著將不必要的 CSS 移除或整合
* 請不用更動 HTML 程式碼，僅需優化 CSS 程式碼

## 第六題

請優化此[程式碼](https://codepen.io/liao/pen/qBOWPea)，並將程式碼連結放到 Codepen 上。優化重點為：

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