搜尋

選單

原始碼範例頁面

各級標題

H2：大標題─應用於段落前/各段落標題

車子彎進了街邊一條狹窄小徑，沿著緩坡而上，我們抵達了台東縣太麻里大王部落，糯小米的生產者胡明智(胡伯伯)已經在路邊等著了。他家位於巷子最底端，小米田則要再往山上走約五分鐘車程。種植糯小米不是本業，胡伯伯的職業是一名牧師，一家人原本在桃園生活，因為岳父患病需有人陪同看顧而返回太麻里，岳父在山上種植的原生種小米田也就順手接下照顧了。當初堅持只種植一點點也好，因為岳父跟他說：「有小米的豐年祭才有意義。」

H3：次標題─大標題段落中，下層的分類名稱

H4：小標題 ─ 次標題段落中，下層的分類名稱

剛出版《就想回家自己煮》的林玉霞，認為層出不窮的食安問題，讓我們不得不思考：有智慧、有根據地取捨市面上的食物，理性選擇食材、吸收營養知識，學習如何吃、進而實際著手一些簡單的烹調技能，才能理性且正確的面對食物引起的恐慌。曾擔任合作社理監事、地區營運委員的吳梅相，已是阿嬤身份，她認為嬰幼兒的肌膚粉嫩，有機棉衣物、手帕可避免小孫子引發過敏，無有害化學添加物的寶貝沐浴露、羊奶皂更是適合從小使用，不刺激眼睛、呵護身體、滋潤肌膚。

code

各級標題原始碼如下：
⁢<h2>H2：大標題─應用於段落前/各段落標題⁢⁢</h2>
⁢<h3>H3：次標題─大標題段落中，下層的分類名稱⁢⁢</h3>
⁢<h4>H4：小標題 ─ 次標題段落中，下層的分類名稱⁢⁢</h4>

項目清單

項目清單 ─ 數字型

對齊（Alignment）
任何東西都不能隨意擺放，每一個元素之間都有某種視覺關係。利用對齊建立一個清楚整齊的外觀。
親密（Proximity）
彼此相關的內容應靠在一起，反之不相關的內容保持距離。利用親密性，強調畫面的組織與架構。
重複（Repetition）
重複視覺要素的顏色、字體、大小、空間等，增強條理性，也增強了整體一致性。
對比（Contrast）
避免頁面上元素太過相似，如果它們不同，哪就讓他們截然不同。讓重要的內容引人注目，讓使用者間看到它們。

code

ol數字型項目清單原始碼如下：

⁢<ol⁢> ⁢
<li⁢>項目一⁢</li⁢>
⁢<li⁢>項目二⁢</li⁢> ⁢
<li⁢>項目三⁢</li⁢>
⁢<li⁢>項目四⁢</li⁢>
⁢<li⁢>......⁢</li⁢> ⁢
</ol⁢>

項目清單 ─ 點點型

人們會將鄰近的事物視為一體
紅色跟藍色放在一起容易疲勞
大寫文字難以閱讀
閱讀與理解是截然不同的兩件事
如果人們感覺這個字體不易閱讀，他們會把這種困難的感覺轉化至文意本身，並因此覺得文章所談到的內容難以執行或難以理解。
長的欄寬能提高閱讀效率，但人們偏好較短的欄寬。
適時的應用進階展開，減少一次顯示的資訊數量
分類資訊
提供明顯的線索

code

ul點點型項目清單原始碼如下：

⁢<ul>
⁢<li>項目一⁢</li>
⁢<li>項目二⁢</li>
⁢<li>項目三⁢</li>
⁢<li>項目四⁢</li>
⁢<li>......⁢</li>
⁢</ul>

blockquote

數位行銷已演變成技術含量高、講求成果和數據的一門學問。搞懂並有效的使用分析工具關鍵是—學習寫程式。

code

blockquote引言原始碼如下：

<blockquote> 數位行銷已演變成技術含量高、講求成果和數據的一門學問。搞懂並有效的使用分析工具關鍵是—學習寫程式。 </blockquote>

文字段落、分隔線、斷行

文字以P標籤包覆，分隔線用hr，斷行使用br

code

文字段落、分隔線、斷行說明如下：

其中文字段落<p>標籤需有標籤結尾</p>、分隔線<hr>與斷行標籤<br>則不需要結尾標籤

<p>文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落</p>

<hr>

<br>

文字顏色、畫重點、底線、斜字、超連結

code

超連結為a標籤;
文字顏色、畫重點皆以span包覆並加上相對應的style及色碼即可;
底線、斜字則分別有個別不同指令
原始碼如下：

<a href="目標網址" title="超連結文字" target="_blank"> 超連結文字 </a>
<sapn style="color:#ff0000;""文字顏色(紅字)</span"
<span style="background-color:#f1c40f;""畫重點(黃底)</span"
<em>斜字</em>
<u>底線</u>

自訂表格

類別	檢驗項目	依據法規或參考標準
微生物衛生標準	大腸桿菌( ≤ 50 MPN/g)	食品中微生物衛生標準5.4 冷凍非即食食品-須再經加熱煮熟始得食用之冷凍食品
微生物衛生標準	大腸桿菌( ≤ 50 MPN/g)	食品中微生物衛生標準5.4 冷凍非即食食品-須再經加熱煮熟始得食用之冷凍食品
微生物衛生標準	大腸桿菌( ≤ 50 MPN/g)	食品中微生物衛生標準5.4 冷凍非即食食品-須再經加熱煮熟始得食用之冷凍食品

code

如自訂table表格且需指定表格/欄寬度，多加一層DIV動態產生卷軸控制滑動
<div style="overflow:auto; ">table</div>

表格

綠主張生態洗碗精	用於廚具清潔，無化學香味、色料，以檸檬草油調配鉀皂與小蘇打，清潔能力強，含淡淡檸檬香，溫和不傷手，易沖淨。
綠主張生態洗衣精	用於衣物清潔，含天然檸檬草油，植物性配方，不添加螢光劑、化學香精與抗凝結劑等物質，溫和不刺激，適合嬰幼兒及敏感肌膚衣物使用，滾筒洗衣機亦可使用。
綠主張生態洗衣粉	用於衣物清潔，含天然檸檬草油，植物性配方，溫和不刺激，適合嬰幼兒衣物，滾筒洗衣機亦可使用，洗衣粉可搭配生態衣領精使用，對付頑強汙垢更輕鬆。內盒無附量匙。
綠主張生態去漬粉	可用於砧板、茶杯、磁磚、地毯及洗衣槽清潔，植物性環保配方，具天然強效去污力，無化學香精、色料與石化成分，具高生物分解度。
綠主張生態衣物漂白粉	對衣料溫和，彩色衣物可用，友善環境。搭配生態洗衣精或生態洗衣粉效果更佳。
綠主張生態衣領精	使用植物性環保配方，可清潔衣物之頑強汙垢，含植物萃取檸檬烯。
綠主張生態衣領精	用於浴廁清潔，使用植物性環保配方，含植物萃取檸檬烯。

code

table表格的th與td的寬度，可設置也可不設置，
表頭如需樣式需新增指令style="background:#595959; color:#FFFFFF; word-break:keep-all;"於th內原始碼如下：

橫式表格

表頭	表頭	表頭	表頭
內容	內容	內容	內容
內容	內容	內容	內容
內容	內容	內容	內容
內容	內容	內容	內容

code

table需將表頭包在thead裡面，原始碼如下參考：

圖片

沒有圖說的圖片

因有RWD的考量，圖片在不設寬高的情形下，會自適應圖片寬度於內容區，圖片建議尺寸為寬度>=870px 。
若圖片真的沒有這麼大張，請於img的屬性上加上 width="寬" height="高"。

code

沒有圖說的圖片使用img標籤添加圖片即可，
唯考量RWD，圖片不設定寬高的情況下，會自適應圖片寬度於內容區，圖片建議尺寸為寬度>=870px 。
若真的圖片沒有這麼大張，需要設定寬高以免圖片會失真，請於img的屬性上加上 width="寬" height="高"，
如需置中狀態需將img包夾於div內，並給予div個style="text-align: center;"
原始碼如下：

有圖說的圖片

有圖說的圖片及圖說請用figure包起,圖片寬度>=870px者無需加上寬高屬性，除此之外的圖片，請於請於img的屬性上加上 width="寬" height="高"，於figure的屬性上加上 style="width: 寬度px;"

code

有圖說的圖片，請將圖片與圖說用figure標籤包覆，圖說使用figcaption標籤
圖片寬度需做滿版於內容區的設定者無需加上寬高屬性，
若需固定尺寸的圖片，請於請於img的屬性上加上 width="寬" height="高"，於figure的屬性上加上 style="width: 寬度px;"
原始碼如下：

<figure>
<img src="圖片路徑">
<figcaption><i class="fas fa-caret-up" style="font-size: 25px;vertical-align: sub;"></i> 圖說圖說圖說圖說圖說圖說圖說</figcaption>
</figure>

<figure style="width: 寬度px;">
<img src="圖片路徑" width="寬度" height="高度">
<figcaption><i class="fas fa-caret-up" style="font-size: 25px;vertical-align: sub;"></i> 圖說圖說圖說圖說圖說圖說圖說</figcaption>
</figure>

崁入影片

youtube的iframe崁入需另外用一個class為videoWrapper的div包起，使影片可RWD

code

youtube的iframe崁入需另外用一個class為videoWrapper的div包起，使影片可RWD,原始碼如下：

+、-

供應量不足說明

茉莉香米　345元/ 3kg / 5/21起生產者為東里碾米廠，健康級。因生產者成本變動，原2公斤/包，調整為3公斤/包，以降低單價供社員利用。茉莉香米品質好，口感不輸台稉稉9號，帶有淡淡清香，歡迎社員多多支持。蔥香天婦羅　155元/ 300g / 5/21起生產者為振鈁，不添加人工色素、防腐劑，採用合作社指定農友的青蔥，並減少添加物的使用。煎食，煮火鍋皆宜。季節供應。

供應量不足說明

code

原始碼如下：
<div class="accordion accordion-theme">
<div class="ac-item">
<h5 class="ac-title">標題名稱</h5>
<div class="ac-content">
<p>茉莉香米　345元/ 3kg / 5/21起生產者為東里碾米廠，健康級。因生產者成本變動，原2公斤/包，調整為3公斤/包，以降低單價供社員利用。茉莉香米品質好，口感不輸台稉稉9號，帶有淡淡清香，歡迎社員多多支持。蔥香天婦羅　155元/ 300g / 5/21起生產者為振鈁，不添加人工色素、防腐劑，採用合作社指定農友的青蔥，並減少添加物的使用。煎食，煮火鍋皆宜。季節供應。</p>
</div>
</div>
</div>

按鈕

文字

code

若吾需另開視窗，則可拉掉target="_blank"。
原始碼如下：

食譜小秘訣

小秘訣：

小秘訣內容小秘訣內容小秘訣內容小秘訣內容小秘訣內容小秘訣內容

code

原始碼如下:

<div class="tips">
<h4><i class="fas fa-exclamation-circle"></i>小秘訣：</h4>

<p>小秘訣內容小秘訣內容小秘訣內容小秘訣內容小秘訣內容小秘訣內容</p>
</div>

標準色

主藍綠色：#5CB8B2
珊瑚紅：#dd644d
標準黃：#ffe987

錨點位置

錨點標題1

錨點內容1錨點內容1錨點內容1錨點內容1錨點內容1錨點內容1錨點內容1

錨點標題2

錨點內容2錨點內容2錨點內容2錨點內容2錨點內容2錨點內容2錨點內容2

code

原始碼如下: