# 0406 切版檢討、icon、三角形v.2、漢堡選單圖示、背景透明化、Bootstrap、Google Fonts
###### tags: `HTML / CSS`

## 作業檢討
- 在做三欄或四欄文字區塊時通常會被要求：不管上面文字多少，所有區塊下方是對齊的
- **資料量不同大小的狀況：需要跟客戶確認如何處理（客戶設計用的資料太完美）**
- 學員心得的部分，通常會被要求文字要等高，照片跟姓名要都在左下角
- 要觀察設計出來版面的規律
- 每個 section 的間距是否相等？
- 是否有一樣的架構？
- 是否用同樣的字體？
- 在排版時要注意父層會吃到子層的 margin
- 建議使用 padding 做區塊隔離

section{
  padding: 10px;
  /*統一設定邊距*/
}

- 在 class 命名上，通常會有一個包含共同設定的 class 跟設定各別差異化的 class

* favicon => 在網頁名稱欄（分頁標示裡面）顯示圖案

<link rel="icon" href="/favicon.ico">


label 跟 input 組合 for 對到的 id (Label沒包住input的時候)
label 包住 input=> 沒有 for 的話會直接對到
=> 有 for 屬性但是沒對到 input 的 id 時會對不到

* 取代格線檢閱外掛程式

* {
  outline: 1px solid red; 
}

- padding及margin
- padding，會保留背景色
- margin，不會保留背景色
- padding 做出的間隔 => 會黏在一起
- margin 做出的間隔 => 不會黏在一起會分開

思考不同的 code 產生相同效果時，哪個比較好維護，哪個比較簡潔

思考效果產生的原理

* ＊*練習*：
有相連、沒有相連的section，去做測試練習(margin & padding)

* 瀏覽器符合 media條件時，才會代入css

<LINK REL= "styleshhet" TYPE="text/css" MEDIA="(min-width: 1024px)" HERF="ooo.css">

---

- 背景圖無法直接設定透明，所以可用其他方式呈現
- 在背景圖上蓋一層半透明的div，但不適用於有不規則形狀的
- 設一個div下背景色，絕對定位在div ， before/after 設定背景圖還有 opacity 且讓 before/after 跟div一樣大

背景設定：用 background: url() 直接插入
用 background-image

手機：
下拉選單跟連結同時存在 => 可以在旁邊加一個點擊按鈕
(手機無法用 hover 效果)
1. 背景層上面再設定一個半透明的一層蓋住
*不適用不規則透明區
3. 設定div，使用before跟after分別使用背景圖跟背景色彩。
背景圖的部分使用opacity

---

- 選單漢堡的叉叉(待補充)

做 transform(還是 transition)的時候，margin是無法套用的

[transform](https://ithelp.ithome.com.tw/articles/10200713) 1s 1s 動畫時間 延遲時間
延遲的設定影響執行的順序

transition: top .4s, transform .4s .4s;
/* 先改變 top 0.4 秒，之後再改變 transform 0.4 秒 */

div {
    transition: <property> <duration> <timing-function> <delay>;
}



1. 使用三個 span 製作
2. 使用偽元素製作 (::before, ::after, box-shadow 屬性

貝茲曲線 (決定速度變化)
https://cubic-bezier.com/#.17,.67,.83,.67

水平方向是時間，垂直方向是距離

opacity 是對實體物件使用的，不能用在 before 跟 after

## 三角形寫法
1. 之前教的[邊界法](https://hackmd.io/ywKKBVmjRIy-ZQqag75R-w#%E6%87%89%E7%94%A8%E9%82%8A%E6%A1%86%E7%B7%9A%E8%A3%BD%E6%88%90%E4%B8%89%E8%A7%92%E5%BD%A2)
2. 覆蓋法
3. [clip-path](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path)

交接處用 padding +
1. absolute + top or bottom 調整三角形位置 => 調整三角形高度後需再調整 top 或 bottom
2. 用 transform: translateY(100%) ( 100%是以自身的高度計算 )調整位置 => 好處是調整三角形高度後可直接調整

通常拿到稿件會印成彩色的 A3 紙本，切版時會比較方便（紙上切版）
- 先在紙上規劃好 class 名稱、尺寸比例、顏色代碼，之後再直接切出來
- 看哪幾個 HTML 標籤一樣，哪幾個樣式差不多一樣，哪幾個版塊結構是一樣的

---

前贅字 webkit -> Chrome / Safari 瀏覽器的核心/渲染引擎

---

## Google Font 實用方法
套用 link 然後在 font-family 裡面設定
https://fonts.google.com

### ＊使用步驟：
1. 選一個喜歡的字型，點進去
2. 點取右方 `Select this style`

3. 黃色＆紅色區塊都複製貼上到 CSS 中

---

## Font Awesome：icon 免費資源庫

若顯示`Pro`表示需付費，不過還是很多免費的 icon可使用👍🏼

### ＊使用步驟：

1. 前往 [font-awesome-cdn](https://cdnjs.com/libraries/font-awesome)
2. 點擊右下方圖示 `Copy Link Tag`，複製貼上至CSS中


4. 接著複製 [Font Awesome](https://fontawesome.com/icons?d=gallery&p=1) 頁面中 icon 的 `HTML`

* One More Thing...
可透過 Snippets 功能，建立常用 icon 的 code 在自己的 VScode，方便往後使用

---

## Bootstrap

別人寫好的一套 HTML 跟 CSS，偶爾可以去翻一下原始碼怎麼寫
[官方網站連結](https://getbootstrap.com/)
可直接套用上週教的[格線系統](https://hackmd.io/6gZ8OsD2T96LkrsCLrU8Kg?view#%E6%A0%BC%E7%B7%9A%E7%B3%BB%E7%B5%B1)