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

# 6/14 每日任務 Day6

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

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

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

範例示意圖：

完成後示意圖：

## JS 任務題目

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

c 是否為位於 1~3 中間(不含1、3)的數字
答案會寫：

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 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）


## 作業回報區
<!--
1. WangShuan - HTML答案:

.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 答案：

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)