---
# System prepended metadata

title: Untitled
tags: [HW1]

---

---
tags: HW1
---

<h1 style="text-align:center;">
CP113-B-HW1
</h1>

<h4>
請利用作業所提供的附件，自行加入適當的 CSS，且 <span style="color:red">不修改題目( 只能修改學號的部分 )</span>，使答案與結果相符，<span style="color:red">答案請填入在答案區中</span>。
</h4>

<h4>
作業相關附件與繳交處
</h4>

[HW1](https://reurl.cc/xga155)
[HW1-作業繳交處](https://forms.gle/1vVyBCYzrgsXpP7Z9)
<h6>
時間：3/7 23：59 逾時不候
</h6>

<h4>
相關評分與要求
</h4>

<h5>上半部 (30%) </h5>

```
1.(10%) 全域字體為 微軟正黑體，且在需要的地方改上你自己的學號
2.(15%) table置中 ，及每一個 colume 上下間隔為 8px 左右間隔為 16px，且字體居中
3.(5%) 顏色樣式與答案相符 ( color：yellow / rgb(226, 2, 255) / rgb(255, 176, 209) )
```
<h5>下半部 (70%) </h5>

```
1.(40%) 水平排列，其為畫面置中，外框為 3px rgb(118, 255, 180) 實線，
   卡片高 / 寬為 100% / 20%，圓角 24px
2.(20%) image 符合容器，且不溢出卡片外
3.(10%) 標題有底線，且置中
```

<h6>
下半部 Tips
</h6>

1. div 水平排列需要用到 float
2. 長寬若用 % 做處理，則需要對父級元素先做 % 指定
3. 區塊置中可以用 margin(或 margin 系列) 來處理
4. 圖片不溢出，可以使用 z-index or 與父級做同處理
5. 物件在 div 中 "全" 置中可使用的一組語法
```css=
display: flex;
justify-content: center;
align-items: center;
```
6. 參考網頁：
    i.  [css selector - odd and even](https://www.w3.org/Style/Examples/007/evenodd.zh_HK.html)
    ii. [CSS選擇器](https://code.tutsplus.com/zh-hant/tutorials/the-30-css-selectors-you-must-memorize--net-16048)
    
<h4>
最終結果示範
</h4>

![](https://i.imgur.com/CwrpkJU.jpg)

