# HTML(6/10) Day 12 五倍紅寶石(第八屆共筆)(2021/7/13)
## 作業檢討：
- **語意語意語意**，搞懂各 HTML 標籤語意很重要，不要亂用，規劃時要先思考。
- **h1~h3 內容是重點**，h4~h6 佔分低。
- 如果本質是同一個標題不要拆開寫，可以用標題包多個 span 物件。
- class 命名不要再用數字命名了，很爛，除非是小區塊內的幾個圖片，不然大區塊最好都給他有意義的名字。
- 注意原稿哪邊有切齊，哪邊沒有。
- 裝飾性的東西都用偽元素來做就好，因為他本身沒有甚麼意義。

### 如何清除圖片與圖片(容器)之間的空白：
img 為常見的**替換元素**，不受 css 控制，預設為 inline，但又可以設定寬高，很奇怪對吧。
左右會有空白字元是 img 標籤之間的空格產生的，把他刪掉或是把父層設定 font-size:0 都可以解決。
上下會有空白字元是 img 預設為對齊 baseline，與 bottom 之間的空白導致，怎麼解決：
- 對父層設定 fz:0。
- 對圖片設定 vertical-align:baseline 以外的。
- 對圖片設定 display:block。

補充：[替換元素](https://ithelp.ithome.com.tw/articles/10225759)

## 切版技巧：
- 將操控樂趣區塊及車子區塊分開，只對人人滿意區塊做絕對定位(位置抽離)，車子會貼齊操控樂趣。
- margin 負值可以讓圖片重疊。
- 上下大區塊之間建議用 padding 取代 margin，可以讓畫面的背景更一致。
- 做導覽列時，用 a 撐開 li 會比較好，會變得比較好點選，UX 比較好。
- 首行縮排搭配 padding-left 可讓點點顯示在外。
- 點點作法：
1. 上網抓圖
2. background-image:linear-gradient
3. ::before

## transform：
物件空間依舊佔據在原來地方，可用來修改物件的空間維度。
- rotate(deg)：讓物件及**主軸方向**旋轉。
- translate(x,y)：可讓物件依**主軸方向**位移。
- perspective(px)：物件距離螢幕多遠。
- rotate(deg)：以3D視角轉動物件。
rotateX 正數向右，會往後倒，可用左手大拇指 + 另四指輔助比對。
rotateY 正數向下，會向開門一樣。
rotateZ 正數向自己，會向打自己巴掌一樣 = rotate。

### icon：
使用 icon 時，網頁會根據 Unicode 將圖片轉化為文數字(找到二維陣列 icon 所在座標)，
因此可以使用 fz 設定大小，當然其他有關文字的屬性也都可以設定。

### @keyframes：(關鍵影格動畫)
他就像一個腳本，可以指定誰要去演出動畫，搭配animation使用。

---

### Xmind：
[CSS指令](https://www.xmind.net/m/3G3G2Q)

---
###### tags: `HTML` `CSS`