# 營養標示

:::success
最新建議，用 https://html-online.com/editor/ 編輯，很不錯，不會帶樣式碼！ :+1:
:::

## 1.圖片範本
1. 到 canva
2. 開啟 ==營養標示 - ok== 的設計

3. 編輯之後匯出

4. 上傳至==官網==後，取得網址==備用==


## 2.html 範本
1. 到codepen，連結另外提示。
2. 選擇==營養標示==。


4. 開啟後，選擇 copy 所有的html欄內容，即是範本。

5. 貼於文字編輯單上，專業或是內建的編輯器皆可。

## 3.組合它，使用它

1. 尋找 ==<--文字開始-->== 與 ==<--文字結束-->==，中間插入==html碼==，非正常文字。

2. 尋找 ==&lt;img>== 這個標籤，其中的==src==後接官網圖片網址

<img class="img-responsive" src="">

變成

<img class="img-responsive" src="https://via.placeholder.com/150">

3. 現在 html 已經組合完成，上傳至編輯區即可。