金魚都懂的網頁切版

圖文滿版區塊 NO001

本集重點：

在使用 Flex 的預設情況下，元素會自動填滿次軸的寬或高，可藉由 align-items 來調整。
什麼是 linear-gradient？

範例：

.banner {
    width: 100%;
    height: 400px;
    background-color: #ccc;
    background: linear-gradient(115deg, #7bf 50%, transparent 50%),
                url(https://fakeimg.pl/1200x400/eee/000) right center; 
                /*此範例為多重背景*/
}

快速回顧 CSS background 屬性：CSS基本樣式-Background(上)｜CSS基本樣式-Background(下)｜快速演練

互動圖文卡片 hover 使用 NO002

本集重點：

若將一物件設定絕對定位 position: absolute;，此時這個物件將自己位於一個層，且尚未知道這一層的空間大小多少，可將其的 top、bottom、left﹑right均設為 0，便可抓取父層的寬高。

/* .item 為 .txt 的父層 */
.item {
  position: relative;
}

.txt {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

此內容節錄並改寫自：使用 absolute + margin auto 來達到CSS垂直置中效果

藉由調整 opacity 透明度屬性達成文字浮現的效果：

.txt {
  opacity: 0; /* 1.先將想要浮現的物件的 opacity 屬性設為 0 ，先讓它不能被看到*/
  transition: .6s; /* 3.可以加入 tranisition 動畫讓畫面圓滑一點 */
}

.item:hover .txt {  /* 2. .txt 的父層 .item 寫入 hover 狀態，此時 .txt 的 opacity 設回 1：當父層有滑鼠移入時，.txt 浮現出來*/
  opacity: 1; 
}

由左而右的黃色線條動畫：

/* 在你想要的地方添加偽元素::before 或 ::after （這邊是在 h2 標籤） */
/* 設定偽元素屬性 content: ''、display: block;（預設為 inline） 和定位、寬度等等 （這裡寬度先設為 0%） */
/* 利用 border-bottom 屬性製造一條線 */
.txt h2::after {
  content: '';
  display: block;
  width: 0%;
  border-bottom: 2px solid #ff0;
  transition: width .5s .5s; /* 這裡前面的 0.5s 是指持續時間，後面的 0.5s 是指延遲 0.5s */
}

/* :hover 偽類一樣寫在 .item 上，此時寬度設為 100% ：本來 h2::after 的寬度是 0% 當滑鼠移入父層時寬度變回 100% */
.item:hover h2::after {
  width: 100%;
}

人員介紹卡片 NO003

本集重點：

如何用 CSS 的 border 屬性繪製三角形？
上面圖片案例說明：
1. 利用偽元素製造一個 content且設定 border，寬高為 0 和定位
2. 將 border-top （紅色的三角形）的顏色改為 transparent （透明）
3. border-left 和 border-right 色顏（綠色的三角形）改為白色（和字卡底色一樣），就能達到跟上圖右邊字卡一樣的效果

.txt {
    padding: 20px;
    position: relative;
}

.txt::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    left: 0;
    border-top: 50px solid transparent;
    border-left: 184px solid #fff;
    border-right: 184px solid #fff;
    transform: translateY(-100%);
}

交錯漂浮版 NO004

本集重點：

在父層寬度為 1200px 且 display: flex; 情況下，子層的 .pic 和 .txt 寬度設為 55% 會沒有作用，因為 flex-shink 預設為 1（預防爆版），本集因應版型需求改為 0。

回顧一下：什麼是 flex-grow, flex-shink, flex-basis？

能夠理解下面的 CSS 選取器嗎？

.item > :first-child {
    margin-right: -10%;
}

回顧一下：:first-child & :last-child 頭尾選取器

若對一物件設定
```
margin-right: -10%;
```
其原本右邊的物件會往左邊挪動。
- 圖片案例右上粉紅區塊會往左疊在圖片之上
- 圖片案例右下圖片會往左疊在粉色區塊之上，但已針對粉色區塊設定 z-index，所以粉色區塊還是在最上面

超通用橫式版面 NO005

本集重點：

object-fit 屬性讓圖片好好裝在盒子裡
margin-top: auto：將剩餘空間都分配於 margin-top，所以可以得到靠下對齊
使用 flex-wrap: wrap 的時候須仔細計算 margin 的數值，否則可能會無法達成想要的欄數　（物件們的寬度加上它們的 margin 可能會超過父層寬度所以會換行）

網頁頁尾版塊 NO006

本集重點：

flex 偷懶用法：將父層設定 display: flex;，子層們的寬度設為 0 且 flex-grow 設為 1，子層們的寬度會被自動計算出一個平均值
圖例最右側 訂閱電子報 欄位的 <form> 標籤設定 margin: auto 0; 達到垂直置中效果，但父層須先設定 display: flex; 且 flex-direction: column 去撐開高度。

導覽列 NO007

本集重點：

從中間往兩側伸展的白色動畫線條：利用偽元素新增 content: ''、position: absolute;、border-bottom，但是 left 和 right 先設為 50%（從中間開始往兩側），當滑鼠移入時（hover）再設回 0

.main-header .main-nav a::after {
  content: '';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -5px;
  border-bottom: 1px solid #fff;
  -webkit-transition: .4s;
  transition: .4s;
}

.main-header .main-nav a:hover::after {
  left: 0;
  right: 0;
}

滑鼠移入導覽列項目，項目向上飄動的效果：使用 transform: translateY(負值)，需要注意的是 <a> 標籤預設為 display: inline; 而無法作用，此時將父層設為 display: flex; 即可

.main-header .main-nav a {
  text-decoration: none;
  color: #fff;
  padding: 5px 1em;
  margin: 0 5px;
  position: relative;
  transform: translateY(0);
  transition: .5s;
}

.main-header .main-nav a:hover {
          transform: translateY(-10px);
}

方塊酥版面 NO010

本集重點：

Hover 從中心往四周放大的動畫效果：設定 transform: scale(0)，滑鼠移入時變回 transform: scale(1)，並加入 transition

破格式設計 NO011

本集重點：

line-height 屬性設為與高度相同可以用在單行文字的垂直居中
.icon 設定 margin: -75px auto 0;：將 margin-top 數值設為負數可以有向上位移的效果

注意！

這邊的
```
.icon
```
的
```
border
```
是用偽元素額外做的，因為為了符合版型設計需要
```
transform: rotate(-45deg);
```
，才不會讓裡面的
```
<i>
```
標籤也跟著旋轉
- 備註：影片案例中的這個偽元素是在 box-sizing: content-box 屬性下製作，為了要完整貼合 .icon 的內容
圖案晃動動畫可用 transform: rotate() 完成

表格怎麼切 NO012

本集重點：

使用 <cation> 作為表格的標題，<cation> 標籤必須放在 <table> 標籤的下方
- <cation> 標籤可用 caption-side CSS 屬性去控制它的位置

"The <caption> tag must be inserted immediately after the <table> tag." from w3schools.com

<td> 標籤中的 scope 屬性作用是什麼？

回顧一下：認識表格細節，完善 `` 的使用

側邊選單怎麼切 NO013

本集重點：

項目列下面的白色底線是利用偽元素設定 position; absolute; 製作，因為可以控制線條寬度（不想讓線條滿版）

收合式側邊選單 NO014

本集重點：

利用 <input type="checkbox" id="自訂"> 和 <label for="自訂"> 標籤製作一個假按鈕來控制收合側邊選單
1. 先將側邊選單移出畫面外：transform: translateX(100%);
2. 當標籤是被選取狀態時再讓選單移回來：transform: translateX(0%);
3. 把 <input> 標籤作 display: none;　隱藏在畫面中
<label> 標籤已設定 position: absolute; 和寬高，但須設置 top: 0; 和 bottom: 0; 去抓取父層高度才能使用 margin: auto; 做到垂直居中的效果
<label> 標籤裡面的箭頭圖案向可用 transform: scaleX(-1) 達到沝平翻轉的效果

回顧一下：CSS動畫- Transform

訂單進度條 NO016

本集重點：

利用偽元素連結每個進度之間的白線
box-shadow 屬性也可以拿來製作 border：`box-shadow: h-shadow | v-shadow | blur | spread | color | inset;

登入表單 NO017

本集重點：

backdrop-filter：
```
backdrop-filter
```
CSS 屬性可以讓你為一個元素後面區域添加圖形效果（如模糊或顏色偏移）。因為它適用於元素背後的所有元素，為了看到效果，必須使元素或其背景至少部分透明。
- 本集案例使用 backdrop-filter 中的 blur

訊息對話紀錄 NO018

本集重點：

利用 CSS border 屬性製作三角形（對話框的箭頭）
order 屬性改變物件的順序（右側本地端的訊息在左，人物圖像在右）

時間軸 NO019

本集重點：

<a> 超連結標籤屬於 inline 屬性，設置 border 可能會無法達到預期效果，所以重設為 display: block;
ul>li.box${text}*9 Emmet 快速指令：

<ul>
        <li class="box1">text</li>
        <li class="box2">text</li>
        <li class="box3">text</li>
        <li class="box4">text</li>
        <li class="box5">text</li>
        <li class="box6">text</li>
        <li class="box7">text</li>
        <li class="box8">text</li>
        <li class="box9">text</li>
</ul>

旋轉拼接方塊 NO020

本集重點：

CSS 選取器：li:nth-child(n+4) {...}，代表要選到的是包含第四個 <li> 開始及其後所有 <li>
- li:nth-child(n+7) {...}，代表要選到的是包含第七個 <li> 開始及其後所有 <li>
注意! CSS 選取器：li::before:hover {...}，此寫法不可行！
- 偽元素無法添加偽類，可改寫為 li:hover::before {...}，但本質上與前者意義不同喔！
利用為偽元素製造同 <li> 的方形再將其旋轉，不直接在 <li> 上直接旋轉的原因是裡面的字也會被旋轉， margin 的 X 和 Y 軸也會改變