###### tags: `HTML助教作業`
# 第二週作業

第二週作業要讓同學們了解到一些較常用的CSS語法(會有一點動畫)，並且會介紹pseudo class與pseudo element的差別以及如何應用，然後要開始讓同學幫元素加上class(.)和id(#)，並告訴同學如何用CSS選擇器選擇加上class和id的元素。

***學習重點***

- 學習pseudo element如何應用
- 學習linear-gradient如何應用
- 學習絕對位置和相對位置的關係(建議畫圖解釋)
- 了解元素加了transition與不加transition差別為何

***重點語法***
- position(absolute & relative)
- top/bottom/left/right
- z-index
- linear-gradient
- element::before
- element::after
- element:focus
- transition

第二週的題目HTML標籤會給同學

<!-- 不得出現其他元素 -->
<!-- 第一道題目 - 文字應用與偽元素 偽類 搭配 -->
<div class="box">
    <p class="p1">s16113204</p>
    <p class="p2">反白我~我會變色</p>
    <p class="p3">我好像有點透明...還有點陰影</p>
    <p class="p4">只有我最特別 我會置中</p>
    <label for="name">我是label：</label>
    <input type="text" id="name" placeholder="文字文字文字" />
    <br />
    <a href="###">我是A連結-變色後</a>
</div>

<!-- 第二道題目 - 色彩特效 -->
<br />
<div class="box2"></div>
<br />
<div class="box3"></div>
<br />

<!-- 第三道題目 - 相對與絕對位置 -->
<div class="stick">
  <div class="box4"></div>
  <div class="box5"></div>
  <div class="box6"></div>
</div>

***作業要求***
利用上面的HTML標籤打造成底下這個畫面，詳細的要求Sandbox裡面的註解有說，可以點進去看。

<iframe src="https://codesandbox.io/embed/diercizuoye-pfny8?fontsize=14&hidenavigation=1&theme=dark"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="第二次作業"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>