---
# System prepended metadata

title: 6/14 每日任務 Day6
tags: [2021 程式體驗營]

---

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

# 6/14 每日任務 Day6

## HTML 任務題目
請修改[範例檔案](https://codepen.io/WangShuan/pen/YzZOjOO)的  CSS 區塊完成以下兩種設計：

1. 將 span 標籤定位在藍色區塊的右上角，且 span 需置中
2. 將 a 標籤固定在瀏覽器視窗的右下角

不會的同學可以到 50 小時影音教學 網頁排版技巧 part II 影片學習。

範例示意圖：
![](https://i.imgur.com/aeqqXe1.png)

完成後示意圖：
![](https://i.imgur.com/nWwK8X4.png)


## JS 任務題目

本題目在練習邏輯運算子，範例題目為

c 是否為位於 1~3 中間(不含1、3)的數字
答案會寫：
```javascript=
let c = 5;
console.log(c>1 && c<3) // 預期結果是 false
```

接下來換您試試看，請依照以上範例，宣告 `a`、`b` 變數，並賦予數字型別， console.log 印出是否滿足以下條件：

1. a 是否為 3~7 之間(含3、7)的數字
2. b 是否為小於 5 或者大於 10 的數字





## 回報流程

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

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

## 作業回報區
<!-- 
1. WangShuan - HTML答案: 
```css=
.bg-blue {
  background-color: lightblue;
  width: 100px;
  height: 50px;
  position: relative;
}
span {
  background-color: #aaa;
  color: #fff;
  border: 1px solid #000;
  padding: 2px 5px;
  border-radius: 16px;
  font-size: 12px;
  width: 20px;
  height: 14px;
  position: absolute;
  right: -10px;
  top: -7px;
}
a {
  background-color: #ccc;
  padding: 10px;
  border-radius: 10px;
  color: #000;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  position: fixed;
  bottom: 0;
  right: 0;
}

```
JS 答案：
```javascript=
let a = 3;
let b = 5;
console.log(a>=3 && a<=7); // true
console.log(b<5 || b>10); // false
```
 -->
 1. [Benson－HTML & JS 作業](https://codepen.io/polarBear712/pen/YzZRNwZ)
 2. [Jane Lin - HTML & JS 作業](https://codepen.io/as60160/pen/ZEemeqJ)
 3. [Kelvin Wu - HTML & JS 作業](https://codepen.io/kai5363/pen/QWpJgaY)
 4. [Teddy Wu - HTML 作業](https://codepen.io/hongwei0522/pen/vYxQWWe)
 5. [雅琇 Alicia - HTML 作業](https://codepen.io/yahsiu-hsu/pen/WNpYdoN)
 6. [駱彥融 - HTML & JS 作業](https://codepen.io/yjluo/pen/gOmQomE)
 7. [OAO - HTML & JS 作業](https://codepen.io/OAOAO/pen/QWpJaRG)
 8. [Sz - HTML & JS 作業](https://codepen.io/szyln/pen/mdWQpoN)
 9. [Qian - HTML & JS 作業](https://codepen.io/qianhuiwei/pen/ExWOoML)
 10. [Lina Chen - HTML & JS 作業](https://codepen.io/LinaChen/pen/ZEemrJR)
 11. [Joy Cheng - HTML & JS 作業](https://codepen.io/joycheng5432/pen/mdWQXqV?editors=0010)
 12. [winnie - HTML & JS 作業](https://codepen.io/hsuanyu0115/pen/jOBQzPv)
 13. [William - HTML & JS 作業](https://codepen.io/hsuweihung/pen/VwpVXVM)
 14. [Mao - HTML & JS 作業](https://codepen.io/vsfvjiuv-the-typescripter/pen/MWpzVLY)
 15. [Hankan - HTML & JS 作業](https://codepen.io/Hankan/pen/RwpepwE)
 16. [阿丁兒 - HTML & JS 作業](https://codepen.io/dingpachan/pen/JjWeZde)
 17. [henry - HTML作業](https://codepen.io/henrymorgan666/pen/abJQKwP)
 18. [Michelle - HTML  & JS 作業](https://codepen.io/michelle61219/pen/poeQKWa)
 19. [Null - HTML作業](https://codepen.io/Whale-Cat/pen/Popxagm?editors=1100)
 20. [ting - HTML & JS 作業](https://codepen.io/pen/?template=poeQKMO)
 21. [Teddy - HTML & JS 作業](https://codepen.io/nina-web-eng/pen/xxqQJKx?editors=1111)
 22. [Katie - HTML作業](https://codepen.io/aria-mi/pen/wvJQxmE)
 23. [Xing CT - HTML作業](https://codepen.io/xing10/pen/GRWwBjv?editors=0010)
 24. [ZY Hsu - HTML & JS 作業](https://codepen.io/zihyin/pen/qBrQYqp?editors=1010)
 25. [Haley - HTML & JS 作業](https://codepen.io/wsx3690/pen/KKWrGVq)
 26. [我是泇吟 - HTML & JS 作業](https://codepen.io/kljuqbxs/pen/wvJQQJj)
 27. [Moto - HTML & JS 作業](https://codepen.io/moto-san/pen/gOmQZpB)
 28. [Yen - HTML & JS 作業](https://codepen.io/skxydvbs/pen/rNyQPLv)
 29. [Will - HTML ＆ JS 作業](https://codepen.io/WILL_Wu/pen/gOmQqPp)
 30. [Huanan - HTML ＆ JS 作業](https://codepen.io/hua_nan/pen/vYxQbPG)
 31. [yu shiuan chang- Html & JS 作業](https://codepen.io/prankaChang/pen/dyvQrOp?editors=1111)
 32. [zong-huan - HTML ＆ JS 作業](https://codepen.io/wxsobwib-the-encoder/pen/VwpVqOg)
 33. [Anne Lin - HTML&JS作業](https://codepen.io/mmj159/pen/Rwpqdex)
 34. [PinYin - HTML & JS作業](https://codepen.io/PinYin/pen/ZEemaxE)
 35. [Ting - HTML & JS作業](https://codepen.io/veqnspek-the-decoder/pen/rNyQboG)
 36. [BaoH - HTML 作業](https://codepen.io/baoh/pen/mdWQNVj)
 37. [Ken Chen-HTML&JS作業](https://codepen.io/ilovedriftcity168/pen/WNpYqBW)
 38. [Yu](https://codepen.io/yuuuu4444/pen/OJpaKpq?editors=0110)
 39. [Isaac - HTML & JS 作業](https://codepen.io/isaac1125/pen/ExWOqRb)
 40. [HsiuTing - HTML & JS 作業](https://codepen.io/syutei/pen/WNpYVdb)
 41. [小詹- HTML & JS 作業](https://codepen.io/ball77111/pen/OJprLeg)
 42. [Chung－HTML & JS 作業](https://codepen.io/chung_123/pen/bGqOpOR)
 43. [Natsu小夏 - HTML 作業](https://codepen.io/natsunari/pen/ZEeVOyZ)
 44. [coco li - HTML 作業](https://codepen.io/corinna_li/pen/GRWPmzq)
 45. [明達在這－HTML & JS 作業](https://codepen.io/bmzpfyxe/pen/NWpegvz)
 46. [Hi Annie - HTML & JS 作業](https://codepen.io/lhohdalu/pen/YzZdEXq?editors=1111)
 47. [Roger - HTML & JS 作業](https://codepen.io/redtea227/pen/JjWebdw)
 48. [LiMin - HTML & JS 作業](https://codepen.io/XuLiMin/pen/rNyoKaG)
 49. [Anita](https://codepen.io/lcogkgva/pen/poeqKOp)
 50. [Jeff H](https://hackmd.io/@jeff14994/H10xDlBq_/https%3A%2F%2Fhackmd.io%2F%40jeff14994%2FHJB4cCi9_%2F%252Ftr2SUQD6TByl4UGnxjfvug)
 51. [betty - HTML & JS 作業](https://codepen.io/betty-hu/pen/PopXaLG)
 52. [三隻小貓 - HTML & JS 作業](https://codepen.io/bagelover/pen/gOmZBGp)
 53. [Min Chun Tsai - HTML & JS 作業](https://codepen.io/Tsai0926/pen/YzZdmKx)
 54. [袁祥恩](https://codepen.io/ovfxsavp-the-bashful/pen/YzZBKdK?editors=0010)
 55. [Nap－HTML & JS 作業](https://codepen.io/o0o0o1o0/pen/yLMZyXy)
 56. [Erica Chen - HTML & JS 作業](https://codepen.io/ericachen/pen/vYxbEWj)
 57. [YOYO - HTML & JS 作業](https://codepen.io/lumedkle/pen/zYZevEV)
 58. [Ted Wu - HTML & JS 作業 ](https://codepen.io/yes123430/pen/wvJNWvJ)
 59. [Sabrina](https://codepen.io/a120220ms25/pen/RwpvpOe)
 60. [li li - HTML & JS 作業](https://codepen.io/lintapop/pen/KKWJEXR)
 61. [Ching hua - HTML & JS 作業](https://codepen.io/ching-hua-wang/pen/JjWzjqd)
 62. [Shiny - HTML & JS 作業](https://codepen.io/shinychen/pen/rNyRabM)
 63. [Min - HTML作業](https://codepen.io/minnn7716/pen/LYWvYRq)
 64. [林詠雯 HTML作業](https://codepen.io/meimeilin/pen/ZEeZRBb)
 65. [andyphl HTML作業 & JS 作業](https://codepen.io/andyphl/pen/eYvobvX)
 66. [jie HTML作業＆JS作業](https://codepen.io/jie333/pen/OJpYEjo)
 67. [drumrick  HTML作業＆JS作業](https://codepen.io/drumrick/pen/vYxwbEZ)
 68. [LoKing的作業](https://codepen.io/loking23/pen/poeMaaG)
 69. [Jimmy.cc HTML作業＆JS作業](https://codepen.io/gminc/pen/xxqvWBY)
 70. [周周-HTML&JS作業](https://codepen.io/jhoujhou-the-decoder/pen/PomYePv)
 71. [Overy - HTML & JS 作業](https://codepen.io/overy-tsai/pen/gOWOYar)
 72. [蔡秉祐 - HTML & JS 作業](https://codepen.io/cwrzyhae-the-animator/pen/gONewWOwqO?editors=1100)
 73. [Newman - HTML & JS 作業 ](https://codepen.io/newmankz/pen/KKmKggV)
 74. [chiachia HTML作業](https://codepen.io/chiachiaD/pen/wvdvyPd?editors=1000)
 75. [Zackaz HTML作業&JS作業](https://codepen.io/zackaz/pen/BaRaPdV)
