---
# System prepended metadata

title: 轉職忍者2組 - 第五週小組任務

---

## 2020秋季切版直播班
# 轉職忍者2組 - 第五週小組任務

---

## 【參與者】
* 書豪
* ZHIH

---

## 【任務一】請每個小組討論成員，試著載入 BS4 ，並作出 modal 效果

### 【試作狀況】
參與討論的成員都有順利載入BS4、並製作出modal效果
* [書豪的](https://codepen.io/zshao1031/pen/JjKzxZd)
* [ZHIH的](https://codepen.io/zhih0313/pen/xxOBwdr)

---

## 【任務二】討論 HTML 裡的表格標籤(table、th、tr、td)的用法，請試著做出設計稿裡面的表格設計，並提供 codepen 來檢視

### 【討論內容】
這邊是用語音討論的，所以沒有對話截圖
table標籤必須先寫在最外層
tr標籤必須寫在table內，定義一行的容器
th、td都必須寫在tr內，定義一格的內容，標題格子用th、內容格子用td

結構範例：

    <table>
        <tr>
            <th>第一行-標題格子1</th>
            <th>第一行-標題格子2</th>
            <th>第一行-標題格子3</th>
        </tr>
        <tr>
            <td>第二行-內容格子1</td>
            <td>第二行-內容格子2</td>
            <td>第二行-內容格子3</td>
        </tr>
        <tr>
            <td>第三行-內容格子1</td>
            <td>第三行-內容格子2</td>
            <td>第三行-內容格子3</td>
        </tr>
    </table>

![](https://i.imgur.com/fSYeNBl.png)

https://codepen.io/zhih0313/pen/yLJrBmr

---

## 【任務三】討論第五週版型該怎麼做

### 【討論內容】
有另外提到想要網頁剛好符合瀏覽器的高度單位可以用vh
還有討論到方便的截圖工具

關於版型的討論截圖：
![](https://i.imgur.com/zZK1ZLb.png)

![](https://i.imgur.com/hgob7h3.png)

剩下的，由於討論的成員都剛接觸BS4，還很不熟悉內容，沒什麼具體使用概念
因此決定先各自看一下[BS4的網頁文件](https://bootstrap.hexschool.com/docs/4.2/getting-started/introduction/)研究一下再看看

---

## 討論截圖：

![](https://i.imgur.com/VdZLh7T.png)

![](https://i.imgur.com/jRU0WHm.png)

![](https://i.imgur.com/9EOV7Hy.png)



