---
tags: HW1
---

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

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

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

[HW1](https://reurl.cc/e9zWRL)
[HW1-作業繳交處](https://forms.gle/fTG9zQ7x2b1oapur7)

<h6>
時間：3/7 23：59 逾時不候
</h6>

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

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

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

<h5>下半部 (70%) </h5>

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

<h6>
下半部 Tips
</h6>

1. div 水平排列需要用到 float
2. 長寬若用 % 做處理，則需要對父級元素先做 % 指定
3. 區塊置中可以用 margin(或 margin 系列) 來處理
4. 圖片不溢出，可以使用 z-index or 與父級做同處理
5. 物件在 div 中 "全" 置中可使用的一組語法

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>