---
tags: 2021 程式體驗營
---
# 6/21 每日任務 Day11
{%hackmd theme-dark %}

## HTML 任務題目

請修改[範例檔案](https://codepen.io/WangShuan/pen/vYxPYby?editors=1100)中的 CSS 完成以下設計條件：

1. box1 為垂直居中的不重複背景圖片，且背景色為 green 文字為白色
2. box2 為從左到右重複背景圖片，背景圖片起始位置從左上角開始，背景為黑色 文字為白色
3. 背景圖片連結請使用：https://i.ibb.co/3yhw5PR/string-of-beads.png

**Ans: [CodePen 連結](https://codepen.io/jeffhung/pen/JjWqYex?editors=1100)**

附上完成圖：

補充：
- 打開範例檔案的 codepen 可以直接點擊右下角的 fork 就能將助教的 codepen 複製到同學的帳號中使用哩！
- 同學可以另外去查詢 background-size 這個東西 也蠻好用的哦
## JS 任務題目

請同學根據下方文字說明練習使用 [whimsical](https://whimsical.com/) 來繪製自己的流程圖：

靜香是個可愛的女生，她今年 15 歲，
隔壁的餐館正在舉辦活動，
十八歲以上成年男子可獲得一杯免費啤酒，
未成年男子可獲得一杯免費葡萄汁，
十八歲以上成年女子可獲得一杯免費葡萄酒，
未成年女子可獲得一杯免費西瓜汁，
請問她去隔壁餐館吃飯可以免費獲得一杯什麼飲品？

該練習只需使用以下四種圖案來繪製即可：

step1: 進入官網點擊使用 Google 註冊或信箱註冊
step2: 點擊左上角加號選擇要繪製哪種圖選擇 FlowChart 流程圖
step3: 開始依照說明條件繪製出自己的流程圖
step4: 繪製完成後點擊右上角頭像左邊的鎖頭 找到地球那行設置成 can view
step5: 點擊上方出現的 Copy Link 貼到下面回報區即可

完成後同學也可嘗試照著自己的流程圖撰寫 JS 代碼