---
tags: 2021程式體驗營
title: 防疫國家7組-第二週小組任務
---
# 防疫國家7組-第二週小組任務
請透過線上會議或 Slack 討論 25 分鐘，解答此問題集，

**回報流程：**
1. 請組長到下方回報解答連結，**一個小組請派一人提交(依據當周條件提交)**。請用 hackmd 或 Google Doc 回報內容需含：
1. 該問題集的答案
2. 提供 1~3 張視訊或 Slack 對話截圖，確保有進行小組討論
3. 組員參與名單
2. **請同時繳交兩個地方**，分別是下方[回報區](#回報區)與 [Google excel](https://rpg.hexschool.com/training/22/show?embed=https://docs.google.com/spreadsheets/d/1t25mXqAro7TSURVA2YVs9lDOcxeItoBLAPcp8MVrBaE/edit#gid=797572714)
3. 學長姐志工檢視過後，就會回覆 ✅ 來回報審核成功與否。

:::info
### 第一週討論
1. 6人參加
2. 討論時間：40分鐘
3. 參與人員：
Hi Annie
Saiki
Claire Chang
newman
Ciao嘉
shaoyu12

4. 討論截圖


:::

--------
## 第一題 Flex 大挑戰

* 如果你是純新手，請攻略 [Flexbox 青蛙](https://flexboxfroggy.com/#zh-tw)、[flex 海報船-初級](https://hexschool.github.io/flexbox-pirate/#/)，任一關卡，並在 hackMD 附破關畫面。
* 假使您是有點概念的同學，請觀看以下兩篇文章，刻意練習你不曾用到的語法或範例
* [圖解：CSS Flex 屬性一點也不難](https://wcc723.github.io/css/2017/07/21/css-flex/)
* [跟著海盜學 Flex](https://w3c.hexschool.com/)

## 第一題 回報區
* ### Hi Annie

* ### Saiki

* ### Claire Chang

* ### shaoyu12

* ### Ciao 嘉

---

## 第二題 觀察影片

請觀察下方影片連結，看看洧杰老師的寫 Code 流程中，有哪些熱鍵、編輯器操作、程式碼語法是你原本不會的，然後被你偷學到哪些知識點。
* [Flexbox Live Demo 切版](https://youtu.be/iVS7qrMEbe8)
* [Adobe XD 標示文件教學 - 高度確認講解](https://youtu.be/hodJ07BC6EQ)
* [文字單行與多行處理辦法 - line-height 與 padding 的抉擇](https://youtu.be/keRHKc0t250)

## 第二題 回報區
### **Hi Annie**
1. 如網頁多數顏色統一，可以在CSS一開始設統一顏色

html{
    color:red;
}
a{
    text-decoration:none;
}

2.又是一個很神奇的快速寫法，**+ 同層意思**

.header>(h1>a[href="#"]>img)+(ul.menu>li*4>a[href="#"])

### **Saiki**
1. 先整理出網頁中的字級大小、色系、行距等設計規則
2. 透過margin-bottom: -1px，可以讓border在視覺上維持呈現1px
3. 用line-height直接推高度比較適合用在單行文字的情形

### **Claire Chang**
1. line height和padding之間如何考量
2. 使用margin-bottom: -1px來處理應border而增加的物件距離

### **shaoyu12**
1. 檢視網頁設計的規則，建立樣式表單：
涵蓋色系(主、輔)、字體等級(標題、副標、普通)、表頭選單(文字、行距、padding)、卡片(高、左、右)
2. 新的縮寫方式：

display:block寫d:b、
justify-content:flex-end是jcfe、
justify-cotent:space-between是jcsb、
text-align:center是tac、
max-width:100%是ma100p。
ul.menu>li*4>a[href="#"]

3. 文字樣式一致時，可以先統一設定。

html{
color: green;
}
a{
color:green;
text-decoration:none;
}
body{
font-family:
}

4. html的i標籤>fontawsome

<i class="fas fa-angle-left">

5. 一連串列表都有border時，上面的下border會和下面的上border相加，因此設定1px，會疊加成2px(兩個框框重疊處)。可以透過設定margin-bottom:-1px來避免。
6. 寫品項時同有img、a，在css利用position來設定位置。img為relative；本日精選與icon為absolute。可以做到讓本日精選和icon像便利貼一樣貼在img上。
7. 看文字框內要推padding時，要以行距為基準算padding。e.g. 框h=65時，xd內顯示的間距為文本框和外框的距離，非行距與外框的距離。真實padding是(65-40)/2=12.5(上、下各12.5)
---
### **Newman**
1.i 圖片標籤
2.display:block
3.`.aside li a{
margin-bottom:-1px;
}`
4.letter-spacing 字距
5.writing-mode: vertical-lr 垂直模式
6.快捷鍵:
* h1>a>img ``<h1><a href=""><img src="" alt=""></a></h1> ``
* ul.menu>li*4>a[href=#] ``<li><a href="#"></a></li>``
* .tag+Tab ``<div class="tag"></div>``

## 第三題 Font Awesome (可做可不做)
老師在課堂上用的 Font Awesome 是什麼？尋找網路上的操作教學，並試著動手做做看，如果有不錯的教學文章，也請分享到小組任務或 Slack 大廳貢獻給其它學員。

> 或是同學您下海寫一份教學，大家會很感謝你/妳的，你的資源將會幫助到 700 位同學們 :D

## 第三題 回報區
* ### Hi Annie
1. [載入教學](https://www.minwt.com/webdesign-dev/html/21173.html)
2. 用CSS可變更顏色
4. 改變大小在class套用fa-2x、fa-3x

* ### Saiki
1. 載入連結可到[cdnjs](https://cdnjs.com/)，搜尋font-awesome，按下旁邊的</>可取得連結

3. 設定方式和文字差不多，可設定font-size和color，放大圖不會失真

---