# 切版經驗分享
## 導言
什麼是網頁切版？把設計師提供的設計稿透過 HTML 與 CSS 或搭配一些 Javascript 的過程叫做切版，切版的目標是確保網站在瀏覽器中呈現出與設計一致的外觀和佈局，同時確保網站在不同的設備和瀏覽器上都能正確顯示。
<br><br><br>
## 目錄
* [不可不知的基礎觀念](#不可不知的基礎觀念)
* [常用的排版方式 flex](#常用的排版方式flex)
* [關於 CSS 的權重](#關於CSS的權重)
* [關於定位的使用](#關於定位的使用)
* [切版的起手式](#切版的起手式)
* [何時使用 img 何時用 background-image](#何時使用img何時用background-image)
* [CSS 命名法](#CSS命名法)
* [進階使用 CSS ](#進階使用CSS)
* [CSS 基礎動畫 ](#CSS基礎動畫)
* [偽元素介紹](#偽元素介紹)
* [關於 RWD 響應式作法分享](#關於RWD響應式作法分享)
* [提升你的網站 SEO 吧！](#提升你的網站SEO吧！)
* [如何盡可能還原設計稿](#如何盡可能還原設計稿)
* [emmet 速查表](#emmet速查表)
* [實作練習](#實作練習)
<br><br><br>
## 不可不知的基礎觀念
### 什麼是區塊元素與行內元素
#### <span style="color:#ed556a;">區塊元素的特性</span>
- 會盡量佔滿一整行。
- 無論設多少寬度它都會為另起一行，繼續往下排列。
- 高度與寬度會隨時根據內容物多寡而改變
- display 屬性是 `block`
- 高度，行高以及頂和底邊距都可控制；
- 默認情况下，其寬度自動填满其父元素寬度，即寬度100%
- 可以設置寬高 width hight
| 元素 | 描述 |
|----------|----------------------|
| div | 用於組織和布局內容 |
| p | 段落 |
| h1 ~ h6 | 標題 |
| ul | 無序列表 |
| ol | 有序列表 |
| li | 列表項目 |
| dl | 定義列表 |
| dt | 定義列表的標題 |
| dd | 定義列表的描述 |
| form | 表單 |
| table | 表格 |
| hr | 水平分隔線 |
| blockquote | 引用 |
| address | 地址 |
| menu | 菜單 |
| pre | 預格式化文本 |
<br>
#### <span style="color:#ed556a;">行內元素的特性</span>
- 不會佔滿一整行
- 通常使用在段落內
- display 屬性是 `inline`
- 和其他元素都在一行上，相臨的行内元素会排列在同一行，直到一行排不下，才會換行，其寬度隨元素的内容而變化。
- 設置寬高無效，只能由内容撑起来，即行内元素設置 width，height 屬性無效。
- 設置上下margin、padding 無效(會無法推擠其他元素)，左右 padding 、margin 有效
- 水平方向的 padding-left 、padding-right、margin-left、margin-right 都會產生效果，但上下方向的 padding-top、padding-bottom、margin-top 、margin-bottom 不會產生邊距效果。
| 元素 | 描述 |
| --- | --- |
| button | 按鈕 |
| span | 用於行內元素的容器 |
| em | 強調 |
| i | 斜體文本 |
| b | 粗體文本 |
| strong | 強調文本 |
| a | 鏈接 |
| img | 圖像 |
| input | 輸入框 |
| br | 換行 |
| select | 下拉列表框 |
| textarea | 文本區 |
| q | 引用 |
| bdo | 文字方向 |
| sub | 下標 |
| sup | 上標 |
<br><br><br><br>
## 常用的排版方式 flex
下圖是常用的 flex 排版圖解
> flex-direction
>
這個屬性決定了 flex 元素的主軸方向。
示例：flex-direction: row; 表示元素會沿著水平方向排列。
> justify-content
這個屬性用於設定主軸上的對齊方式。
示例：justify-content: center; 表示元素會在主軸上居中對齊。
> align-items
這個屬性用於設定次軸上的對齊方式。
示例：align-items: center; 表示元素會在次軸上居中對齊。
> flex-wrap
這個屬性控制 flex 元素是否在單行或多行上排列。
示例：flex-wrap: wrap; 表示元素會在需要時換行排列。
> align-content
這個屬性用於控制多行 flex 元素在次軸上的對齊方式。
示例：align-content: space-between; 表示多行元素會在次軸上均勻分佈。
> flex-grow
這個屬性用於設置 flex 元素在剩餘空間中的放大比例。
示例：flex-grow: 1; 表示元素會填滿剩餘空間。
> flex-shrink
這個屬性用於設置 flex 元素在空間不足時的縮小比例。
示例：flex-shrink: 1; 表示元素會按比例縮小以適應父容器。
> flex-basis
這個屬性用於設置 flex 元素在不伸縮時的初始大小。
示例：flex-basis: 100px; 表示元素初始大小為 100 像素。
以上是 display: flex 屬性的一些常用屬性及其示例。透過這些屬性的組合，可以實現各種彈性的佈局效果。
> order
這個屬性可以任意地調整元素在區塊中的位置，數字越小排越前面，數字越大排越後面，[order 應用程式演示](https://codepen.io/hong-wei/pen/wvZmpVP)。
### 加強 flex 理解的小工具與小遊戲
下面是練習 flex 的許多方式，都玩過後保證排版功力大增！
[flex 理解小工具](https://codepen.io/hong-wei/pen/KKYmZNM)
[青蛙遊戲](https://flexboxfroggy.com/#zh-tw)
[塔防遊戲](http://www.flexboxdefense.com/)
[擊潰海盜船](https://w3c.hexschool.com/flexbox/cc1c1b71)
<br><br><br>
## 關於 CSS 的權重
> 非常重要的權重概念一定要弄清楚！
#### <span style="color:#ed556a;"> 權種的基本規則</span>
從左至右依序是權重的大小，越左邊權重越大
`!important > inline style > id> class > element > *`
<br>
<br>
> 口訣：先看權重，在看順位
| 權重項目 | 權重分數 |
| --------------------- | ------------ |
| HTML標籤 | 1 |
| class | 10 |
| id | 100 |
| HTML style 寫在標籤內的 style | 1000 |
| important | 10000 |
<br>
<br>
**想想看下方的 title 最後是什麼顏色？**
```html
<p class="title">我是標題</p>
```
```css
body .title{
color:red;
}
.title{
color:blue;
}
```
**解析**
雖然後面的 title 改為藍色，應該最後顏色會變藍色。
但是前面的 title 有加 body 所以權重來到 11 分比 title 的 10 分還高所以會被覆蓋成紅色。
[程式演示](https://codepen.io/hong-wei/pen/abdPYGx?editors=1100)
#### 其他參考資料
[CSS 權重漫畫形式理解圖](https://muki.tw/css-specificity-document/#google_vignette)
[權重計算器](https://specificity.keegan.st/)
[權重的簡易範例](https://codepen.io/hong-wei/pen/YzMEYax?editors=1111)
<br><br><br><br>
## 關於定位的使用
CSS 的 position 用於來將元素可以擺放在頁面中的隨意地方有幾個設置的屬性分別是
- **absolute 絕對定位**
- **relative 相對定位**
- **fixed 固定在畫面某一處** [實作範例](https://codepen.io/hong-wei/pen/NWmyzje?editors=1100)
- **sticky 姑且叫粘黏屬性吧！**
可以不用 position 的時候就盡量不用 position 原因在於，如果網頁需要符合 RWD 時使用絕對定位去固定元素，如果位置沒有設置好，容易造成在不同的裝置上有跑版的情形發生。
較常使用的場景，如下圖訊息通知等等…[程式範例](https://codepen.io/hong-wei/pen/GRLOwOo?editors=1100)
<br><br><br>
## 切版的起手式
我會使用影像繪圖工具，或是拿一支筆都可以！
先大致上我要切分的區塊先圈起來，這樣一來我就可以很快的知道每一個區域我要使用什麼樣的排版方式。
<br><br><br><br>
## 何時使用 img 何時用 background-image
- 如果圖片屬於 `內容的一部分` 則適合使用 img 標籤，並且設置 alt、title 幫助使用閱讀器或輔助技術的使用者，能更加理解圖片含義。
- 如果圖片與 `內容無關` 則適合使用 background。
## **`img`**
- 不用給寬高，會直接呈現原始圖片尺寸
- 對於 SEO 會比較好，也有 alt 可以加描述，對無障礙網頁比較好。
- 可以使用 javascript 操作更換圖片較容易。
- 會占一個空間，如果要用內容撐起版面會推薦使用。
- 图片必需和預留的空間一致，否则圖片要么被拉伸要麼被壓縮。
- 因為是 HTML 所以會先加載，但是如果圖檔太大有可能會影響後面的顯示。
- 需要等比例縮放可以考慮使用 img ，如果使用背景圖需要不斷的調整高度的尺寸
<br><br>
## `background-image`
- 需要給寬高才會呈現尺寸，並且要給 display:block;
- background-size: cover 會撐滿你給的寬高。
- background-size: contain 會維持原本圖片的寬高。
- 因為縮放比例問題要設定 background-position: top center;
也就是圖片固定上方與中心避免縮放跑版。
- 因為屬於 CSS 加載速度比較快，會在 HTML 都渲染完後才渲染 CSS。
- 不佔一個空間 。（比較不會讓網頁加載時出現板塊很大的變動）
- 當背景有多個圖案需要放在背景點綴，background-image 可以放多重圖片還能個別設定位置 [呈現效果](https://codepen.io/hong-wei/pen/JjMbKXG?editors=1100)
<br><br><br><br>
## CSS 命名法
想 class 是不是想破頭了？開始天馬行空的亂取名字，這樣會讓網站後續再進行修改時，無法透過 class 很直覺的知道這是指什麼區塊，以下提供一下常見的 class 的關鍵字供大家參考組合使用。
#### <span style="color:#ed556a;">常見 class 關鍵字</span>
- 布局類：header, footer, container, main, content, aside, page, section
- 包裹類：wrap, inner
- 區塊類：region, block, box
- 結構類：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
- 列表類：list, item, field
- 主次類：primary, secondary, sub, minor
- 大小類：s, m, l, xl, large, small
- 狀態類：active, current, checked, hover, fail, success, warn, error, on, off
- 導航類：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last
- 互動類：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,
- 星級類：rate, star
- 分割類：group, seperate, divider
- 等分類：full, half, third, quarter
- 表格類：table, tr, td, cell, row
- 圖片類：img, thumbnail, original, album, gallery
- 語言類：cn, en
- 論壇類：forum, bbs, topic, post
- 方向類：up, down, left, right
- 其他語義類：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading...
<br><br>
### **BEM 命名法**
BEM 是一個為了讓 className 有更好地維護架構 CSS 設計模式，但最主要的致命缺點就是命名長度過長，可是在實際開發上非常多人都會使用到 BEM。
<br><br>
### **BEM 其實是三個單字的縮寫**
- Block (區塊)
- Element (元素)
- Modifier (修飾符)
```css=
<header class="header">
<ul class="main">
<li class="item"></li>
<li class="item active"></li>
</ul>
</header>
```
上述的程式碼我們無法得知 `.main` `.item` 是否只存在於 header 並且有可能其他地方會使用到 .main、.item 的名稱，那麼就會發生衝突，因此 BEM 的設計模式就會顯得非常易讀且確保相依性。
<br><br>
### **Block (區塊)**
Block 簡單來講在上述範例中第一層 `class="header"` 就是屬於一個 Block，簡單來講每一個 Block 都是獨立存在的個體，並且有可以重複使用的元件，例如
```htmlmixed=
<header class="header">
<ul class="main">
<li class="item"></li>
<li class="item"></li>
</ul>
</header>
<section class="cart">
<ul class="main">
<li class="item"></li>
<li class="item"></li>
</ul>
</section>
<section class="order">
<ul class="main">
<li class="item"></li>
<li class="item"></li>
</ul>
</section>
```
在上述範例中就有三個 Block 分別為 `.header`、`.cart`、`.order`。
> 當然 BEM 的設計原則是為了讓 class 更好，因此也會有可能出現 prefix(前綴詞)變成 `.b-header`、`.b-cart`、`.b-order`。
<br><br>
## **Element (元素)**
Element 則是 Block 的子元件(兒子概念)，並且他無法獨立於 Block 之外，但有些 Block 可能會沒有 Element。
因此在上面的範例中，我們可以將 `.main`、`item` 改為以下
```h=
<header class="header">
<ul class="header__main">
<li class="header__main__item"></li>
<li class="header__main__item"></li>
</ul>
</header>
<section class="cart">
<ul class="cart__main">
<li class="cart__main__item"></li>
<li class="cart__main__item"></li>
</ul>
</section>
<section class="order">
<ul class="order__main">
<li class="order__main__item"></li>
<li class="order__main__item"></li>
</ul>
</section>
```
Element 的標示方式是兩個下底線「__」，主要是第一個為 block 然後使用「__」當作前綴詞表示接下來的是 Element，因此你有可能看到非常長的 Element。
<br><br>
## **Modifier (修飾符)**
Modifier 簡單來講就是狀態的意思，主要是使用 「`--`」 去代表 Modifier，舉例來講在上述範例中如果 `li` 有一個選取的狀態 `.active` 那麼 BEM 會如何表示？
```html=
<header class="header">
<ul class="header__main">
<li class="header__main__item header__main__item--active"></li>
<li class="header__main__item"></li>
</ul>
</header>
<section class="cart">
<ul class="cart__main">
<li class="cart__main__item"></li>
<li class="cart__main__item cart__main__item--active"></li>
</ul>
</section>
<section class="order">
<ul class="order__main">
<li class="order__main__item order__main__item--active"></li>
<li class="order__main__item"></li>
</ul>
</section>
```
<br><br><br><br>
## 進階使用 CSS
以下進階技巧需使用安裝 scss 才能使用。
使用 ＠mixin 與 @include 封裝你的常用語法（好用）
把常用或之後可能需要隨時更改的 CSS 用 @minix 封裝起來在需要的時候引用。
實際使用案例。
好處是以後如果甲方客戶大大，突然想改 RWD 的尺寸，就不用一個一個改，只需要改 @mixin 這樣的數值就好。
#### **使用 @mixin 搭配 @content 設計響應式寫法**
**HTML**
```hmlt=
<div class="box"></div>
```
**CSS**
先使用 `@mixin` 把平板跟手機的媒體查詢封裝起來，在需要替換平板與手機的 class 上面再用 `@include` 就好。
```css=
// 平板
@mixin pad{
@media(max-width:768px){
@content
}
}
// 手機
@mixin iphone{
@media(max-width:400px){
@content
}
}
.box{
width: 300px;
height: 300px;
background-color: red;
border-radius:50%;
@include pad(){
width: 150px;
height: 150px;
background-color:blue;
border-radius:50%;
}
@include iphone(){
width: 100px;
height: 100px;
background-color:green;
border-radius:50%;
}
}
// 舊的寫法
/* @media(max-width:768px){
.box{
width: 150px;
height: 150px;
background-color:blue;
border-radius:50%;
}
}
@media(max-width:400px){
.box{
width: 100px;
height: 100px;
background-color:green;
border-radius:50%;
}
} */
```
[程式碼分享](https://codepen.io/hong-wei/pen/ExyGKWy)
### @mixin 搭配參數
如果希望引用一樣的 CSS 設定，但是數值想要客製化可以使用搭配參數的方法。
[程式使用範例](https://codepen.io/hong-wei/pen/dyNqbmx)
## CSS基礎動畫
透過 CSS 動畫，你可以為網頁或應用程式增添更生動有趣的元素。利用 CSS 動畫，你能創建各種動態效果，讓使用者的注意力被吸引。
舉例來說，透過以下的 CSS 動畫，你可以讓一個元素像一顆漂浮的氣球一樣：
[動畫使用範例-漂浮的氣球](https://codepen.io/hong-wei/pen/yLrvEZY?editors=1100)
```css=
box{
width: 200px;
height: 200px;
background: linear-gradient(45deg, #2dde98, #1cc7d0);
border-radius:50%;
animation: awei 2s infinite alternate ease-in-out;
/* awei 是自己取的動畫名稱 */
/* 2s 動畫持續時間 */
/* infinite 動畫播放次數 */
/* alternate 動畫播放方向 */
/* ease-in-out 動畫加速度函式 */
}
@keyframes awei {
from {
transform: translateY(0px); /* 起始位置 */
}
to {
transform: translateY(80px); /* 终止位置，根據需要調整浮動的高度 */
}
```
### CSS 動畫屬性總覽 ( CSS Animation Properties )
| 屬性 | 說明 |
|-------------------------|------------------------------------|
| animation-name | 動畫名稱 |
| animation-duration | 動畫持續時間，預設 0，單位 s 或 ms。|
| animation-delay | 動畫延遲播放時間，預設 0，單位 s 或 ms。|
| animation-iteration-count | 動畫播放次數，預設 1。其他還有 infinite。|
| animation-timing-function | 動畫加速度函式，預設 ease。其他還有： linear、ease-in、ease-out、ease-in-out step-start、step-end、steps(int,start/end)、cubic-bezier(n,n,n,n)。|
| animation-direction | 動畫播放方向，預設 normal。其他還有 reverse、alternate、alternate-reverse。|
| animation-fill-mode | 動畫播放前後模式，預設 none。其他還有 forwards、backwards、both。|
| animation-play-state | 動畫播放或暫停狀態，預設 running。其他還有 paused。|
<br><br><br><br>
## 偽元素介紹
CSS中的偽元素（Pseudo-elements）是一種特殊的選擇器，它們可以讓你選擇並樣式化一些不直接存在於HTML文檔中的部分。這些部分可能是元素的一部分，例如文字的第一行或者元素的前後內容。偽元素的名稱以雙冒號（::）開頭，例如`::before`和`::after`，這與偽類（Pseudo-classes）的單冒號（:）開頭不同。偽元素可以用來創造一些視覺效果，例如在元素前後添加小圖示或者製作特殊的標題樣式。
### 使用場景包括
- 在元素前後添加小圖示或者文字，例如在列表項目前添加一個小圖示。
- 創造特殊的標題樣式，例如在標題前後添加裝飾線。
- 解決排版問題，例如在段落的第一行或者最後一行添加特殊樣式。
以下是一個簡單的範例，展示如何使用`::before`偽元素在一個段落前添加一個小圖示：[程式範例](https://codepen.io/hong-wei/pen/GRLQBjL)
```css=
p::before {
content: "📝";
margin-right: 5px;
}
div::after {
content: "🔚";
margin-left: 5px;
}
```
如果有時候需要讓使用者 hover 過去有個提示，在不增加 HTML 結構的情況下也可以使用偽元素來達成（這樣也可以讓 HTML 結構不要這麼多）[使用範例](https://codepen.io/hong-wei/pen/ZEZrjWL?editors=1100)
### 注意
一定要有 content 沒有要放東西在裡面也要這樣寫 content:"";
但是有一些特定的標籤如` <img> `、 `<input> `等標籤是無法使用偽元素的。原因是因為，要想要 HTML 標籤使用偽元素，必需要這個元素是可以插入內容的，也就是說這個元素要是一個容器。
### 使用偽元素寫進度條
[偽元素寫進度條範例](https://codepen.io/hong-wei/pen/qBwxgbN?editors=1100)
<br><br>
```html=
<div class="container">
<ul class="progress">
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
```
```css=
.container{
width: 100%;
}
.progress{
/* CSS 計數器 */
counter-reset:step;
display: flex;
}
.progress li{
list-style-type:none;
width: 33.33%;
/*在 li 設定相對定位 */
position: relative;
}
/*在 li 使用偽元素 */
.progress li:before{
/* 內容去接 CSS 計數器的數值 */
content:counter(step);
/* 遇到一個新的 li 就把數值 +1 */
counter-increment:step;
width:50px;
height: 50px;
line-height: 50px;
border:1px solid #ddd;
background-color: #fff;
border-radius:50%;
display: block;
text-align:center;
margin: 0 auto;
}
/* 在 li 後面放偽元素去畫中間的線條 */
.progress li:after{
content:"";
position: absolute;
/* 把線放在圓圈後面 */
z-index:-1;
width: 100%;
height: 1px;
background-color: #ddd;
/* 調整線的位置讓他在圓圈中間(因為圓圈的高度是50px 中間就設 top:25px) */
top:25px;
left:-50%;
}
.progress li:first-child:after{
/*把凸出去的線段隱藏起來 */
content:none;
}
.progress li.active:before{
border-color: green;
}
.progress li.active:before{
border-color:green;
}
.progress li.active + li:after{
background-color: green;
}
```
參考資料：[偽元素怎麼使用](https://mocationer.com/before-after-css/)
<br><br><br><br>
## 關於 RWD 響應式作法分享
在香水電商有看到在導航列轉到手機整個版型大變動，這會讓有的人有點不知道該怎麼做，以下分享我的作法。
### 解析
其實也不是什麼魔術，就是在電腦版顯示電腦版的 HTML 手機版就顯示手機版的 HTML！
這是比較硬幹的作法，但或許有更好的作法也歡迎大家分享交流。
<br><br>
### 漢堡選單的製作方式
這邊附上程式碼參考，漢堡選單的[製作方式分享](https://codepen.io/hong-wei/pen/KKzvQpr)。
<br><br><br><br>
## 提升你的網站 SEO 吧！
### **導言**
網頁 SEO 是指「搜索引擎優化」（Search Engine Optimization），是一項通過改善網站內容和結構，以提高網站在搜索引擎結果頁（SERP）中排名的過程。簡而言之，SEO 的目標是增加網站的曝光度和流量，讓更多的用戶通過搜索引擎找到該網站。
### **提高 SEO 的方式**
1. 盡量使用語義化標籤，讓搜尋引擎在爬網站時可以清楚地知道網站結構
2. 希望被搜尋到的標題盡量使用 h1 與 h2 標籤。
3. 加快網頁加載的速度（壓縮圖片）
4. 壓縮 CSS
<br><br><br>
### **檢測 SEO 的工具 - Lighthouse**
善用 Chrome 開發者工具的 Lighthouse ，下方介紹使用方式：
**步驟一**
打開你要檢測的網頁，點擊右鍵進入開發者工具，找到 Lighthouse 按鈕。
**步驟二**
在點擊 Analyze Page load 就可以讓他去分析這個網頁的綜合評價。
**步驟三**
查看分析報告結果
### 每個指標的意思
1. **Performance（性能）**：
- Performance 部分評估網站的加載速度和運行效率，包括首次內容呈現（FCP）、最大內容呈現（LCP）、交互完成時間（TTI）等關鍵性能指標。
- 提供了針對性能優化的建議，例如優化圖像、減少 JavaScript 和 CSS 的大小、使用瀏覽器快取等。
2. **Accessibility（可訪問性）**：
- Accessibility 部分評估網站對於殘障人士的可訪問性，包括對於視覺、聽覺、運動和認知障礙等方面的支持程度。
- 提供了改進可訪問性的建議，例如添加適當的 alt 文本、使用適當的 HTML 標記、確保鍵盤導航等。
3. **Best Practices（最佳實踐）**：
- Best Practices 部分評估網站是否遵循了一些最佳實踐和安全標準，以確保網站的安全性和穩定性。
- 包括檢查是否存在安全風險、使用 HTTPS、避免混合內容等方面的評估項目。
4. **SEO（搜索引擎優化）**：
- SEO 部分評估網站在搜索引擎中的可見性和排名，包括檢查 meta 標籤、頁面標題、內容結構等。
- 提供了改進 SEO 的建議，例如改善頁面標題和 meta 描述、使用結構化數據等。
5. **PWA（漸進式 Web 應用程序）**：
- PWA 部分評估網站是否符合漸進式 Web 應用程序的標準，包括快速加載、離線支持、推送通知等功能。
- 提供了改進 PWA 功能的建議，例如添加 Service Worker、配置 Web App Manifest 等。
<br><br><br>
### LOGO 建議使用 h1 去製作
```html=
<div class="header">
<h1>
<a class="logo" href="#">LOGO</a>
</h1>
</div>
```
```css=
@mixin hide-text{
text-indent: 101%;
overflow: hidden;
white-space: nowrap;
}
.logo{
width: 200px;
height: 200px;
display: block;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/BMW_logo_%28gray%29.svg/2048px-BMW_logo_%28gray%29.svg.png');
background-size: cover;
@include hide-text;
// text-indent:101%;
// overflow:hidden;
// white-space:nowrap;
}
```
[程式碼分享](https://codepen.io/hong-wei/pen/mdQONzv)
<br><br><br><br>
## 如何盡可能還原設計稿
拿到設計稿後可以看一下設計師有沒有 Design Guidelines 設計指南的頁面。
以香水電商為例就叫做 UI Kits 如下畫面。
可以根據上述的設定把這些主色字體大小都設在全域的 CSS 內。
<br><br><br><br>
## 實作練習
1. 如果今天有一個 img 標籤裡面的 src 插入一張圖，如何在桌機與手機切換不同的圖片。
```html=
<img class="demo" src="./photo" alt="照片">
```
[解法參考](https://codepen.io/hong-wei/pen/ZEZJVvW)
## 快速打出 HTML 標籤結構的 emmet 速查表
可以把常使用到建構 HTML 標籤的快捷鍵記下來，加快開發速度。
[emmet 速查表](https://docs.emmet.io/cheat-sheet/)
Sign in with Wallet
Connect another wallet