---
tags: 2021 程式體驗營
---
{%hackmd theme-dark %}
# 6/10 每日任務 Day4
## HTML 任務題目

請修改[範例檔案](https://codepen.io/WangShuan/pen/zYZLOLB?editors=0100)中的 HTML 與 CSS 區塊內容，將樣式優化並整理出至少三個可重複使用的 class ，優化前後所產生的畫面需一致。

舉例來說：
1. 有多個區塊同樣都設置了 margin-left 此時就可以單獨將 margin-left 拉出來設計成 `.ml-1{ margin-left: xx;}`
2. 有多個區域中設置了背景色與文字設 就可以單獨拉出來 設計成 `.bg-xxx{ background-color: xxx; coclor: xxx; }`
3. 所有區塊都設置了某個樣式 比如字體 是不是也可以拉出來設在 body 中就好
4. 諸如上述情況你還能如何優化 寫出更好的樣式等等

這邊請同學點擊進入範例的 codepen 後 找到右下角的 fork 按鈕
按下 fork 即可將該 codepen 複製一份到自己帳號下做使用。

**A: [CodePen 作業連結](https://codepen.io/jeffhung/pen/oNZPMvW?editors=1100)**
- [參考 Nap 同學猛猛的寫法:](https://codepen.io/o0o0o1o0/pen/eYvLOBa?editors=1100)

<div class="container">
  <div class="box">
  <h2>這是一個標題</h2>
  <p>這是一段說明文字</p>
  <ol>
    <li>注意事項1</li>
    <li>注意事項2</li>
    <li>注意事項3</li>
    <li>注意事項4</li>
  </ol>
</div>
  <div class="box">
    <h2>這是一個標題</h2>
    <p>這是一段說明文字</p>
    <ol>
      <li>注意事項1</li>
      <li>注意事項2</li>
      <li>注意事項3</li>
      <li>注意事項4</li>
    </ol>
  </div>
  <div class="box">
    <h2>這是一個標題</h2>
    <p>這是一段說明文字</p>
    <ol>
      <li>注意事項1</li>
      <li>注意事項2</li>
      <li>注意事項3</li>
      <li>注意事項4</li>
    </ol>
  </div>
  <div class="box">
    <h2>這是一個標題</h2>
    <p>這是一段說明文字</p>
    <ol>
      <li>注意事項1</li>
      <li>注意事項2</li>
      <li>注意事項3</li>
      <li>注意事項4</li>
    </ol>
  </div>
  <div class="box">
    <h2>這是一個標題</h2>
    <p>這是一段說明文字</p>
    <ol>
      <li>注意事項1</li>
      <li>注意事項2</li>
      <li>注意事項3</li>
      <li>注意事項4</li>
    </ol>
  </div>
</div>

/*
 * 自己比較偏好用CSS處理..因為
 1. HTML標籤那邊太多class名稱，我自己會眼睛花花🙈(用tailwind時很有感)
 2. HTML, CSS 分別掌握各自的樣式 | 結構的感覺，
    有時自己寫到自己錯亂，後續修改到底要改哪邊😂
    (例如用bootstrap時又想加自己的客製，然後不知道樣式到底是從哪邊來的😂)
*/

body {
  font-family: "Comic Sans MS";
}

h2, li {
  margin-bottom: 20px;
}

.container {
  max-width: 500px;
  margin: 0 auto;
}

.container .box {
  padding: 5px 15px;
  line-height: 1.5;
}

.container .box:nth-child(6n-5),
.container .box:nth-child(6n-1) {
  color: white;
  background-color: darkgray;
}

.container .box:nth-child(6n-4),
.container .box:nth-child(6n-2) {
  background-color: gray;
}

.container .box:nth-child(6n),
.container .box:nth-child(6n-3) {
  color: white;
  background-color: #000;
}

## JS 任務題目

請在不使用 console.log 查看結果的情況下回答 a b c 的值分別是多少？

let a = 10;
let b = 5;

a+=b;
a+=b;
console.log(a)

b--
b--
console.log(b)

let c = 9
c++
console.log(c)

**A: a: 20, b:3, c:10**
Result: