---
# System prepended metadata

title: 9/03 HTML - 基礎實作
tags: [HTML, 進度筆記, 2021/09/03, 前端心得]

---

# 9/03 HTML - 基礎實作   
###### tags: `HTML` `2021/09/03` `進度筆記` `前端心得`  
---

## 今日講課-上午的部分  

- [9/12 可能要去豐原領參考書](https://docs.google.com/spreadsheets/d/10KoQgvqQ_e8r6Imdi0sFr2GFIQnE-zwXQcSwopGLGKY/edit#gid=0)   

- 小複習, 開發工具 VSCode, 便利外掛, 快捷鍵 !   
- HTML 結構, CSS 外觀, CSS 架構, CSS 選擇器的寫法, 幫標籤命名, 第一個屬性是 id, id 有唯一性  
- 預設的 div 標籤會占滿整行, 就算沒寫 width 也會(很多 tag 都會有這種性質), 用屬性 float 去解決 div 佔滿整行的效果   
- CSS 的 clear  屬性, 可以換行, 有點像牆壁隔間   

- 一開始拿到題目, 先做大範圍, 像是方塊先做出大小, 再解決方塊的簡單位置, 最後再做難一點的隔間   

參考資料: https://ithelp.ithome.com.tw/articles/10224091?sc=pt   


---


# CSS 像是做加法   

寫 CSS 如果這行沒有成功, 記得刪掉不必要的屬性, 才不會太冗長   

---

## 巢狀結構-看整體的步驟   

- 由大而小, 由左而右   

先看大區塊, 由上而下, 有三個大區塊(紅色框框), 再由左而右看小區塊(藍框綠框)   



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

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

- 所以套一個類似接近圖塊

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


### [Emmet 快捷鍵](https://docs.emmet.io/cheat-sheet/)

### 命名 tag 的方法   

- 1. 記得英文為主, 可以加數字   
- 2. 單字單字間以 ``-`` 號分隔不同單字, 記得養成良好習慣, 盡量用大家習慣的命名法, 有些大公司的框架命名幾乎都是以 `-` 號去命名, 像是 FB, 亞馬遜~    
- 3. 命名盡量有意義(根據這個圖案下去命名)  
- 4. 盡量避免用只有自己懂的單字縮寫, 像是什麼 TIGF  之類的    

---

↓像這這可能就 box-top, box-mid, box-bottom   

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

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

### emmet 快速寫法  
```
div>div*3
一個 div 包著3個 div 
跟 div>div+div+div 相同
```

```
div>div+(div>div*2)+div
```

- 想要一步展完, 要對 emmet, 整體結構理解  

### emmet 小練習  

↓一句話簡化這張圖~  
![](https://i.imgur.com/R4st7Ly.png)   

```
比較複雜的解法↓
div>div+div+div+(div>div)+(div>div)
優化↓
div>div*3+(div>div)*2
```

## 從大區塊的方塊到小方塊   

第一個挑戰   

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


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

- 寫的時候從最外層開始寫   
建立方塊位置 →  

```
外框方塊 600 * 600
頂部方塊 600 * 150  
中方塊 (300 * 150) x2
底部方塊 600 * 150 
寬*高
```

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

- 圖片長得不太對, 因為 div 佔滿了一行   

---

# 課堂練習挑戰 1   

記得這堂課教的重點~  

- 由上而下, 先從大框框 → 包住所有顏色的大框框  
- 由左而右, 中間一個框框, 包住左右兩個框框  
- 在從中間細分的兩個框框去調整  
- 最後是底部的框框  

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 600px;
            height: 600px;    
        }
        #box-mid {
            width: 600px;
            height: 150px;
        }
        #box-top {
            width: 600px;
            height: 150px;
            background-color: pink;
        }

        #box-left {            
            width: 300px;
            height: 150px;
            background-color: yellow;
            float: left;       
        }
        #box-right {            
            width: 300px;
            height: 150px;
            background-color: rgb(190, 185, 219); 
            float: left;          
        }
        #box-bottom {                    
            width: 600px;
            height: 150px;
            background-color: rgb(190, 133, 0);            
        }

    </style>
</head>
<body>
    <div id="box">
        <div id="box-top"></div>
        <div id="box-mid">
            <div id="box-left"></div>
            <div id="box-right"></div>
        </div>
            <div id="box-bottom"></div>        
    </div>    
    
    
<!-- 
<div>
    <div></div>
    <div>
        <div></div>
        <div></div>
    </div>
    <div></div>
</div> -->




</body>
</html>
```

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

  

# 課堂練習挑戰 2   

分析區塊   

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

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

----

 ## 長寬高單位  
 
 依據父層的寬度去調整, 如果用 100% 就是跟父層一樣大   

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

因為寫死的 pixel 不太好改, 如果改成 % 值  

- 一開始先學會用 pixel, 先固定住大小, 如果圖層的父子層數過多會很考驗邏輯判斷XD    


---


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

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

# 課後作業-剩下的 float 挑戰~  

記得老師教的比例計算~  

## 課後挑戰 3  

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

## 9/4 檢討   

↓由上而下   

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

↓由左而右   

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

可以分割步驟, 或是全部分析完整體架構再一次寫~~   
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 600px;
            height: 600px;    
        }
        #top {
            width: 600px;
            height: 150px;
            background-color: pink;
        }
        #mid {            
            width: 600px;
            height: 300px;  
            /* background-color: yellowgreen;          */
        }
        #mid-left {            
            width: 150px;
            height: 300px;
            background-color: yellow;
            float: left;
        }
        #mid-right {             
            width: 450px;
            height: 300px;
            background-color: teal;
            float: left;
        }
        #mid-right-top1 {            
            width: 150px;
            height: 100px;
            background-color: rgb(190, 185, 219);
            float: left;
        }
        #mid-right-top2 {            
            width: 300px;
            height: 100px;
            background-color: green;
            float: left;
        }     
        #mid-right-mid1 {            
            width: 300px;
            height: 100px;
            background-color: purple;
            float: left;
        }
        #mid-right-mid2 {            
            width: 150px;
            height: 100px;
            background-color: peachpuff;
            float: left;
        } 
        #mid-right-bot1 {            
            width: 150px;
            height: 100px;
            background-color: grey;
            float: left;
        }
        #mid-right-bot2 {            
            width: 300px;
            height: 100px;
            background-color: royalblue;
            float: left;
        }
        #bot {                    
            width: 600px;
            height: 150px;
            background-color: rgb(190, 133, 0);  
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="top"></div>
        <div id="mid">
            <div id="mid-left"></div>
            <div id="mid-rifght">
                <div id="mid-right-top1"></div>
                <div id="mid-right-top2"></div>
                <div id="mid-right-mid1"></div>
                <div id="mid-right-mid2"></div>
                <div  id="mid-right-bot1"></div>
                <div  id="mid-right-bot2"></div>
            </div>
        </div>
        <div id="bot"></div>
    </div>
```
---

## 課後挑戰 4   

提示:   
   
![](https://i.imgur.com/CMTRKHn.png)   

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

## 9/4 檢討   

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

CSS 寫的東西盡量放在跟 HTML ``<body>`` 中一樣的相對位置   
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 600px;
            height: 800px;    
        }
        #top-box {
            width: 600px;
            height: 150px;
            background-color: pink;
        }
        #mid-box {            
            width: 600px;
            height: 500px;  
            /* background-color: yellowgreen;          */
            float: left;
        }
        #mid-left-box {            
            width: 450px;
            height: 500px;
            float: left;
            /* background-color: yellow;*/
            float: left;
        }
        #mid-upper-left-box {
            width: 500px;
            height: 300px;
            float: left;  
        }
        #minor-upper-left-box {
            width: 150px;
            height: 300px;
            background-color: yellow;
            float: left;  
        }
        #minor-upper-right-box {
            width: 350px;
            height: 300px;
            /* background-color: yellow; */
            float: left;  
        }
        #minor-mid-box1 {
            width: 300px;
            height: 100px;
            background-color: rgb(190, 185, 219);
            float: left; 
        }
        #minor-mid-box2 {
            width: 300px;
            height: 100px;
            background-color: purple;
            float: left; 
        }
        #minor-mid-box3 {
            width: 300px;
            height: 100px;
            background-color: violet;
            float: left; 
        }
        #mid-lower-left-box1 {
            width: 450px;
            height: 100px;
            background-color: teal;
            float: left; 
        }
        #mid-lower-left-box2 {
            width: 450px;
            height: 100px;
            background-color: lightskyblue;
            float: left; 
        }
        #mid-right-box {             
            width: 150px;
            height: 500px;
            background-color: rgb(241, 210, 214);
            float: left;
        }
        #bottom-box {                    
            width: 600px;
            height: 150px;
            background-color: rgb(190, 133, 0);
            float: left;   
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="top-box"></div>
        <div id="mid-box">
            <div id="mid-left-box">
                <div id="mid-upper-left-box">
                   <div id="minor-upper-left-box"></div>
                   <div id="minor-upper-right-box">
                       <div id="minor-mid-box1"></div>
                       <div id="minor-mid-box2"></div>
                       <div id="minor-mid-box3"></div>
                   </div>
                </diV>
                <div id="mid-lower-left-box1"></div>
                <div id="mid-lower-left-box2"></div>  
            </div>
            <div id="mid-right-box">
            </div>
        </div>
        <div id="bottom-box"></div>
    </div>
    

</body>
</html>
```
----

## VScode 功能之一   

複製: 點任一行複製後直接就能任意貼上   
任意移動: ALT+上下左右, 可以一次移動多行   
刪除: 直接 Ctr+X   


## 切版的概念  

以某網站舉例: 

![](https://i.imgur.com/LhKoyS2.png)
  
切分出三塊後, 結構上, 上面又可以細分:  

  
:  

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

---


# 找 FB 上的版面來做切版練習   

![](https://i.imgur.com/kiD23zF.jpg)   

## 在這之前工具介紹  

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

長這樣      

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

## 盒模型, box-model  

可以看到   

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

```
邊框, 實體線路會影響寬高  
border: 1px solid black; 
粗細; 造型是實體一條線; 顏色
```

### 邊框會影響實體寬度  

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

### 內距: padding  

如果寫了 20px, 就會往內推20 px 大小(寬高都有影響  )

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

- Padding 這參數, 會影響盒子元素的實體大小, 例如 box 大小500px * 500px, 加了 padding 20px → box 大小成 540px  
- 1 參數時: 四邊   
- 2 參數時: padding 20px 5px : 上下, 左右  
- 3 參數: 上, 左右, 下   
![](https://i.imgur.com/lpNrmwT.png)   
- 4 參數: 上, 右, 下, 左   
![](https://i.imgur.com/gNUMuOS.png)   

- padding 是依照父層的寬度, 暫時可以先不用   % 值去調整, 用 %值可能會遇到父層調整的問題~ 

### 小練習-只要左邊的內距  

如何用原力去推動方塊(?  

padding:0px 0px 0px 10px   

padding-left: 10px; 


---

外距: margin  
參數
比較不建議用 margin 去推父層, 但可以用自己去推父層推開(實務上不太會這樣做)

記得由外而內由上而下由左而右,  

overflow-hidden 不能下  

- 解決方法, 不要用 margin 去推自己   

如果下 margin-top: 5px; 應該要會發現推不下去(但我推下去了, 可能是瀏覽器比較新的問題?)  

### Collapsing margins 參考資料:  

https://ithelp.ithome.com.tw/articles/10225741   

https://wcc723.github.io/css/2016/06/08/css-margin-collapsing/   

## Emmet 

```div#box-$*5```  
![](https://i.imgur.com/xKvfKkl.png)  

自動把 box 依照順序從 1 排到 5   

```p$aaa```

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

# CSS 顏色的寫法   

## 直接寫顏色英文   

## 把 RGB 轉換成 16 進制  

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

## RGB 的寫法   

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

---

## 課堂小練習-1   

自己做一個這種 ↓   

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

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



## 課堂小練習-2   

追加封印 float(X_X)  

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

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


### 可以讓計算功能 Calc 自動幫你算大小  

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

```
width: calc(500px - 40px);

運算符號左右兩邊要記得空格
```

### 可以讓 margin 自動幫你算  

```
margin-left: auto  
```

### 練習-2 解答   

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

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


## 課堂小練習-3   

追加封印 float(X_X)  
最下面那張 ↓   

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


### 練習-3 解答  

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

應該要左右(水平移動推到最滿) AUTO  

如果上下下了 AUTO 就會變置中   

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

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

--- 

# [Position](https://developer.mozilla.org/zh-CN/docs/Web/CSS/position)  

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

如果有東西超出區外, 就要調整一下這個   

- 位置的預設是: static   
  1. static - 靜止不動   
  2. relative - 相對位置(通常最常使用)  
  3. absolute - 絕對位置  
  4. fixed - 固定位置   
![](https://i.imgur.com/b8ail1J.png)   

如果不要使用盡量不要使用, 如果有其他方法可以解決就不要用到這個屬性, 除非迫不得已, 才去使用   

這屬性下有幾個值可以調整:  
```
            position: relative;
            top: ;
            left: ;
            right: ;
            bottom: ;
```            

例如 ```bottom: 10px```   方塊往上推  
![](https://i.imgur.com/5z6NxTx.png)

參考資料:   

https://ithelp.ithome.com.tw/articles/10212202   


## relative 值   

通常會用 relative 這個值去移動方塊, 並不是真的移動, 看起來像是移動了   

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

但實際上這方塊對網頁來說還在原處  


![](https://i.imgur.com/rWKgYyK.png)   
 
實際上是值去改變了, 可能會造成網頁誤判和 debug 出問題 

---

## absolute 值 

absolute 會移動真的實體位置, 像是 float 一樣會浮起來, 只要是除了 static 以外的 position 屬性都可以~  

移動是根據父層任何 position 的屬性去移動, 但如果父層沒有任何 position 值, 他就會依據父層的父層去移動, 像這是沒寫就是依據 body    

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

如果沒有依據父層去定位的話, 就使用 relative 就好了  

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

例如, BOX-B 的上面是 BOX-A, 那你在 BOX-A 下了 position, BOX-A 就是 B 的父層, 這時在B 下 bottom: 0 px 他會移動到藍色方塊最下面  

如果沒在 Box-A 下 position 屬性, 那就會以 body 為主   

## fixed 值   
- 會以瀏覽器本身去定位   
- 本身跟 float 一樣會浮起來  


# body 的值被誰影響?  

body 本身值是預設 100%, 會預設 margin 8px, 記得在 body { margin:0;} 消除預設 8px, 而 body 本身會被內容物的 pixel 影響, 被撐開   

# Position - 參考資料  
https://ithelp.ithome.com.tw/articles/10212202   

# Position 回家作業  

示範: 一個 .html 檔案內的 "八個方塊" 長的跟下面的布局一樣
長這樣 ↓   
![](https://i.imgur.com/bobhUab.png)   

大框框距離可能 50px, 上下可能 10px  

實際做水平垂直置中的方法:

```
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }
        #box {
            width: 300px;
            height: 300px;
            background-color: royalblue;        
        }

        #box-1 {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;          
            top: 125px;
            left: 125px;
            right: 125px;
            bottom: 125px;    
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="box-1"></div>
        <div id="box-2"></div>
        <div id="box-3"></div>
        <div id="box-4"></div>
        <div id="box-5"></div>
        <div id="box-6"></div>
        <div id="box-7"></div>
        <div id="box-8"></div>
    </div>


    <!-- 
<div>
    <div></div>
    <div>
        <div></div>
        <div></div>
    </div>
    <div></div>
</div> -->




</body>

</html>
```

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

---

# 快捷鍵 - 複選  

選你要改的東西  
![](https://i.imgur.com/Iwqi7d6.png)   

滑鼠反白(或是方向鍵)你要選的東西, 按下一次 Ctr+D 複選他會幫你選取符合這個頁面, 例如想選 都是 500 px 的值一起改, 按一次 Ctr+D 同時改兩個值, 再按一次就再多選一個值, 但不能跳值   

## 快捷鍵 - 同時輸入   

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

- 多行列同時一起 typing   

快捷選法, shift 按一下會選旁邊的字體, 複製過去  

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

例如要選多行不同的字, 先反白你要的字, Ctr+D 選擇多行你要的字, Shift+end 會選到最後面, 開始做減法 → shift 按住, 用方向鍵往左邊移動到不同的字 → 放開 shift 輸入    

## 可以用開發者工具當尺  

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

---

# 課後任務 - Position 檢討(從這裡到 transform 都是步驟)   
![](https://i.imgur.com/NfCfjWX.png)   
分兩個大區段, 再用 clear 一刀分隔   

# 實用小技巧-直屬選擇器   
## 大框作法   

## 實作:  
```
div#Outter-frame>div#row-$*2>div#box-$*4  
```

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

## 大框 CSS 直屬選擇器用法:  

複習一下之前 emmet 直屬選擇器用法 ↓   

![](https://i.imgur.com/7audJ7U.png)   
   
可以用 emmet 技巧, `#row-1>div, #row-2>div` 從父層選擇子層一次下四個大 boxes   

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

## 實作   
```
 #row-1>div,#row-2>div {
            width: 300px;
            height: 300px;
            border: solid black;
            float: left;
            margin: 20px 10px 30px 20px;
            position: relative; 
        }
        #row-2 {
            clear: both;
        }
        /* #row-2>div {
            width: 300px;
            height: 300px;
            border: solid black;
            float: left;
            margin: 20px 10px 30px 20px;
        } */
```

---
## 大框內的小紅方塊做法  

也可以這樣, 用逗號分隔後一次下八個 boxes   

一次下所有的小紅框 boxes   
在 CSS 選擇器的地方 ``#row1>div>div,#row2>div>div``

或是

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

剪下你要的幾個行列的文字後, 對應你要的行列文字, 選取後 Ctr+D, 選取好後, 接著一次選擇所有的 div 空格貼上   

## 實作:  
```
div#red-$*8
```

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


----

# 用 CSS 直屬選擇器做紅框移動的方法   

## 實作:   
在父層(大框)下 relative    

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

## 接著做小紅框位置  
在子層(小紅框)下 absolute  
![](https://i.imgur.com/SfxBHvW.png)   

# 接著用父層的寬高去剪掉小紅框   

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

# 接著更簡化方塊的移動   
# 可以用 transform 這個屬性   

``
transform: translate(x, y); X 軸 - 值 往左, + 值往右
transform: translateX(); Y 亦同   
transform: translateY();
如果下 % 數就是下在自身身上, 例如用在紅色 box, 就是紅色 box 自己的大小寬高  
``

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

父層盡量用 relative 寫, 子層用 absolute 寫   

## 實作:   
![](https://i.imgur.com/meWTlBw.png)   

## 整體 code:  
```
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }
        #row-1>div,#row-2>div {
            width: 300px;
            height: 300px;
            border: solid black;
            float: left;
            margin: 20px 10px 30px 20px;
            position: relative; 
        }
        #row-2 {
            clear: both;
        }
        /* #row-2>div {
            width: 300px;
            height: 300px;
            border: solid black;
            float: left;
            margin: 20px 10px 30px 20px;
        } */
        #row-1>div>div, #row-2>div>div {
            width: 50px;
            height: 50px;
            background-color: red;
            border: solid black;
            position: absolute;
        }
        #red-1 {
            /* top: 125px;
            left: 125px; */

            /* position
            top: 50%;
            left: 50%; */
            position: relative;
            top: calc(50%);
            left: calc(50%);
            transform: translate(-50%, -50%);
        }
        #red-2 {
            /* top: 125px;
            left: 125px; */

            /* position
            top: 50%;
            left: 50%; */
            position: relative;
            top: calc(10%);
            left: calc(50%);
            transform: translate(-50%, -50%);
        }
        #red-3 {
            /* top: 125px;
            left: 125px; */

            /* position
            top: 50%;
            left: 50%; */
            position: relative;
            top: calc(+82%);
            left: calc(+30%);            
            transform: translate(0%, 0%);
        }
        #red-4 {
            /* top: 125px;
            left: 125px; */

            /* position
            top: 50%;
            left: 50%; */
            position: relative;
            top: calc(40%);
            left: calc(90%);            
            transform: translate(0%, 0%);
        }
        #red-5 {
            /* top: 125px;
            left: 125px; */

            /* position
            top: 50%;
            left: 50%; */
            position: relative;
            top: calc(82%);
            left: calc(82%);            
            transform: translate(0%, 0%);
        }
        #red-6 {
            /* top: 125px;
            left: 125px; */

            /* position
            top: 50%;
            left: 50%; */
            position: relative;
            top: calc(42%);
            left: calc(2.5%);            
            transform: translate(0%, 0%);
        }
        #red-7 {
            /* top: 125px;
            left: 125px; */

            /* position
            top: 50%;
            left: 50%; */
            position: relative;
            top: calc(42%);
            left: calc(82.5%);            
            transform: translate(0%, 0%);
        }
        #red-8 {
            /* top: 125px;
            left: 125px; */

            /* position
            top: 50%;
            left: 50%; */
            position: relative;
            top: calc(92%);
            left: calc(0%);            
            transform: translate(0%, 0%);
        }

    </style>
</head>

<body>
    <div id="Outter-frame">
        <div id="row-1">
            <div id="box-1">
                <div id="red-1"></div>
            </div>
            <div id="box-2">
                <div id="red-2"></div>
            </div>
            <div id="box-3">
                <div id="red-3"></div>
            </div>
            <div id="box-4">
                <div id="red-4"></div>
            </div>
        </div>
        <div id="row-2">
            <div id="box-5">
                <div id="red-5"></div>
            </div>
            <div id="box-6">
                <div id="red-6"></div>
            </div>
            <div id="box-7">
                <div id="red-7"></div>
            </div>
            <div id="box-8">
                <div id="red-8"></div>
            </div>
        </div>
    </div>

</body>

</html>
```

---

# 回家練習(不算作業但可以提早做) - 進入切 FB 版面  

---

# CSS Diner    

https://flukeout.github.io/   

HTML: Select the plates   

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

左邊 CSS Editor 寫答案,右邊 HTML Viwer 是結構

最右邊前七題有提示   

# 邊玩邊練習所有 CSS 選擇器   用法   

## 4  後代選擇器   

Descendant Selector   

## 12   
A+B 跟 A 相鄰的 B 選起來, 鄰層選擇器   

## 13    
A~B 跟 A 同一層的都選, 通用同層的選擇器, CSS 不能往前只能往後   

## 14  

A>B , 直屬選擇器, 父層下的子層會選到   

## 15 之後算進階, 盡量玩完   

## 27  attribute   

----

# 前端進階技能樹   

[交互式學習平台](https://www.freecodecamp.one/)   
- 非營利組織, 從向學生介紹 HTML, CSS 和 JavaScript 的教學   

[APCS 大學程式設計先修檢測](https://web.ntnu.edu.tw/~algo/)  

[Awesome CS Training](https://github.com/goodjack/awesome-cs-training)   
- 以 台灣高中生 為出發點的 資訊培訓相關資源彙整   

[網頁前端程式入門、工作文章整理](https://github.com/nicehorse06/software-job-note)  

[設計模式 Design Pattern](https://github.com/Kantai235/php-design-pattern)   

[Modern Data Engineering Landscape Study Guide](https://github.com/datastacktv/data-engineer-roadmap)   

[前端、後端或 DevOps 開發人員學習地圖(中文版)](https://github.com/goodjack/developer-roadmap-chinese)   

[依舊技能樹](https://drive.google.com/file/d/1hyOjAdnHv167tAT1UlA9GTqfHMzkrG6A/view)   

[線上課程精華整理：JS 和前端版各方大神推薦（主要 Udemy）](https://hackmd.io/5-MQ7oV-S5Wb-72fWWlrPg)   

[你不知道的JS (系列叢書(簡體))](https://github.com/weiqinl/You-Dont-Know-JS-CN)   

[從 ES6 開始的 JS 學習生活](https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/intro.html)   

---