---
tags: 2021 程式體驗營
---

# 6/21 每日任務 Day11

## 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

附上完成圖：

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

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

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

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

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

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

## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）


## 作業回報區
<!--
1. WangShuan - 答案:
ＨＴＭＬ：文字白色助教設在 .content 裡面，其他的看下方

.box1 {
  width: 100%;
  height: 240px;
  background-repeat: no-repeat;
  background-image: url(https://i.ibb.co/3yhw5PR/string-of-beads.png);
  background-position: 50% 50%;
  background-color: green;
}
.box2 {
  width: 100%;
  height: 240px;
  background-repeat: repeat-x;
  background-image: url(https://i.ibb.co/3yhw5PR/string-of-beads.png);
  background-color: #000;
}

ＪＳ：https://whimsical.com/Y89BAYrSMnHLUfewWFwRGs
-->
1. [Benson - HTML 作業](https://codepen.io/polarBear712/pen/WNpWgxM?editors=1100)
2. [henry - HTML &JS 作業](https://codepen.io/henrymorgan666/pen/mdWgGQB?editors=1100)
3. [Lina Chen - HTML &JS 作業](https://codepen.io/LinaChen/pen/ZEeZMNz)
4. [Min - HTML作業](https://codepen.io/minnn7716/pen/wvJZYvY)
5. [明達在這 - HTML Homework]([https://](https://codepen.io/bmzpfyxe/pen/ZEeZqGY?editors=1100))
6. [Natsu小夏 - HTML 作業](https://codepen.io/natsunari/pen/VwpNEpQ)
7. [Sz - HTML & JS 作業](https://codepen.io/szyln/pen/oNZOaWo)
8. [Mao - HTML & JS 作業](https://codepen.io/vsfvjiuv-the-typescripter/pen/mdWgzEL)
9. 阿丁兒 - [HTML](https://codepen.io/dingpachan/pen/BaWEqPe?editors=1100) & [JS](https://whimsical.com/2021-6-21-MHqTLhmKYDPZGQ4ZiPsjMd) 作業
10. [huanan - HTML & JS 作業](https://codepen.io/hua_nan/pen/MWpRzMX)
11. [HsiuTing - HTML & JS 作業](https://codepen.io/syutei/pen/ExWJGXq)
12. [我是泇吟 - HTML & JS 作業](https://codepen.io/kljuqbxs/pen/VwpNqgb?editors=1100)
13. [BaoH - HTML & JS 作業](https://codepen.io/baoh/pen/abJxMzq?editors=1100)
14. [Xing CT- HTML & JS 作業](https://codepen.io/xing10/pen/BaWEveP)
15. [anna - HTML作業](https://codepen.io/annhys/pen/rNybbOo)
16. [winnie - HTML 作業](https://codepen.io/hsuanyu0115/pen/WNpWWEJ?editors=1100)
17. [Null - HTML作業](https://codepen.io/Whale-Cat/pen/YzZMMBV?editors=1100)
18. [Will - HTML & JS 作業](https://codepen.io/WILL_Wu/pen/gOmyyRR)
19. [Chung - HTML & JS 作業](https://codepen.io/chung_123/pen/QWpPPRz?editors=1100)
20. [Sabrina](https://codepen.io/a120220ms25/pen/NWpmZWq)
21. [Jane Lin - HTML & JS 作業](https://codepen.io/as60160/pen/WNpWPjq)
22. [Teddy Wu - HTML 作業](https://codepen.io/hongwei0522/pen/KKWYORr?editors=1100)
23. [Katie - HTML作業](https://codepen.io/aria-mi/pen/abJroqW?editors=1100)
24. Hi Annie - [HTML](https://codepen.io/lhohdalu/pen/QWpRWwy?editors=1100) & [JS 作業](https://whimsical.com/6-21-E1ZSo3k6NFzCsCTdEStxio)
25. [Yao Lin - HTML & JS 作業](https://codepen.io/yaoyaoiii/pen/NWpVWNx)
26. [Roger - HTML & JS 作業](https://codepen.io/redtea227/pen/YzZbPQW)
27. [Moto - HTML作業](https://codepen.io/moto-san/pen/QWpRjGE?editors=1100)
28. [Ching Hua - HTML & JS 作業](https://codepen.io/ching-hua-wang/pen/dyvLaaj?editors=0110)
29. [Jeff H](https://hackmd.io/@jeff14994/H10xDlBq_/https%3A%2F%2Fhackmd.io%2F%40jeff14994%2FHJB4cCi9_%2F%252Ftr2SUQD6TByl4UGnxjfvug)
30. [ZY Hsu - HTML & JS 作業](https://codepen.io/zihyin/pen/JjWqGEP?editors=1100)
31. Nap－[HTML](https://codepen.io/o0o0o1o0/pen/WNpBRNv) & [JS](https://whimsical.com/2021-06-21-hex-daily-TwyYUZriJ4gFeDhYzo1bkf) 作業
32. [Yu](https://codepen.io/yuuuu4444/pen/dyvEVdZ?editors=1100)
33. [LTL - HTML作業](https://codepen.io/ltlin93/full/NWpVvZL) & [JS作業](https://whimsical.com/2021-6-21-8HKLUqG7idbUozugzaAVmD)
34. [yu shiuan chang HTML & JS 作業](https://codepen.io/prankaChang/pen/OJpYwWL?editors=0110)
35. drumrick [HTML 作業](https://codepen.io/drumrick/pen/WNpBqLo?e) 以及 [flowchart 作業](https://whimsical.com/3Xiio42iYw82gqvSB5meZa)
36. 雅琇 Alicia [HTML 作業](https://codepen.io/yahsiu-hsu/pen/QWpXyrQ)
37. [jie- HTML作業](https://codepen.io/jie333/pen/LYWKbyb?editors=1100)
38. [Anne Lin - HTML & JS 作業](https://codepen.io/mmj159/pen/ExWBbob)
39. [Haley - HTML & JS 作業](https://codepen.io/wsx3690/pen/BaWgrZX?editors=1100)
40. [Qian- HTML作業](https://codepen.io/qianhuiwei/pen/gOmNqmX?editors=1100)
41. [YOYO- HTML作業](https://codepen.io/lumedkle/pen/mdWNqzv?editors=1010)
42. LoKing - [HTML作業](https://codepen.io/loking23/pen/BaWXrqX?editors=1100)
43. [Saiki HTML作業](https://codepen.io/rostpfette/pen/KKWjdVd)
44. [Kelvin Wu - HTML作業](https://codepen.io/kai5363/pen/oNWNzEa)
45. [蔡秉祐 - HTML作業](https://codepen.io/cwrzyhae-the-animator/pen/XWRWRpx)
46. [三隻小貓 - HTML作業](https://codepen.io/bagelover/pen/YzVPzyG?editors=1100)
47. [袁祥恩](https://codepen.io/ovfxsavp-the-bashful/pen/GRmgNNg?editors=1010)
48. [betty - HTML & JS 作業](https://codepen.io/betty-hu/pen/BaRoxqq)
49. Shiny - [HTML](https://codepen.io/shinychen/pen/KKmVrPg) & [JS 作業](https://whimsical.com/6-21-E7hHtWewpDZNQ9LfrZvQa)
50. zong-huan - [HTML作業](https://codepen.io/wxsobwib-the-encoder/pen/LYyOEpo?editors=1100) & [JS作業](https://whimsical.com/6-21-7GGSdo4SqVn9utceNYorNk)