🎨 本模板的基本樣式、追加樣式、自訂樣式等大集合。

文字階層

H2 標題文字

H3 子標題文字

H4 小標題文字

正常文字，也稱亂數假文或者啞元文本，是印刷及排版領域所常用的虛擬文字。由於曾經一台匿名的打印機刻意打亂了一盒印刷字體從而造出一本字體樣品書，Lorem Ipsum從西元15世紀起就被作為此領域的標准文本使用。

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

This a Text Bold : Cleansis is a 8 Post Formats.　粗體

This a Text Italic : Cleansis is a 8 Post Formats.　斜體

This a Text Underline : Cleansis is a 8 Post Formats.　底線

~~This a Text Strikethrough : Cleansis is a 8 Post Formats.　刪除線~~

This a Colored Text : Cleansis is a 8 Post Formats.　顏色

This a Colored Background Text : Cleansis is a 8 Post Formats.　背景色

This a Text Smallest　最小

This a Text Small　小

This a Text Normal　一般

This a Text Large　大

This a Text Largest　很大

文字樣式

段首空兩格

Pada paragraf ini akan memiliki indentasi baris pertama, sederhanyanya untuk membuat sebuah kalimat yang ada di paragraf pertama menjorok ke dalam dengan nilai yang sudah ditentukan.

如今互聯網提供各種各樣版本的Lorem Ipsum段落，但是大多數都多多少少出於刻意幽默或者其他隨機插入的荒謬單詞而被篡改過了。如果你想取用一段Lorem Ipsum，請確保段落中不含有令人尷尬的不恰當內容。

<p class='pIndent'>文字貼在這裡</p>

首字放大

如如今互聯網提供各種各樣版本的Lorem Ipsum段落，但是大多數都多多少少出於刻意幽默或者其他隨機插入的荒謬單詞而被篡改過了。如果你想取用一段Lorem Ipsum，請確保段落中不含有令人尷尬的不恰當內容。

Drop cap akan mengubah ukuran huruf pertama paragraf sehingga huruf tersebut turun satu atau beberapa baris ke bawah. Banyak jenis media cetak yang memanfaatkan drop cap seperti buku, majalah, koran dan sebagainya karena dapat menambah daya tari visual.

<p><span class='dropCap'>大字貼這裡</span>其他文字貼在這裡</p>

文章參考來源

參考：
www.jagodesain.com

<p class='pRef'>參考：<br/>參考內容/連結貼這裡</p>

列表樣式

編號清單

This is a Checked List 1　壹
如今互聯網提供各種各樣版本的Lorem Ipsum段落，但是大多數都多多少少出於刻意幽默或者其他隨機插入的荒謬單詞而被篡改過了。如果你想取用一段Lorem Ipsum，請確保段落中不含有令人尷尬的不恰當內容。
This is a Checked List 2　貳
This is a Checked List 3　參
今消朋事製定綠實的人這家地……續大中天家光華出用的了？亮看家外；不面一驚中團是不不開力十在不制人西收我美。
今消朋事製定綠實的人這家地……續大中天家光華出用的了？亮看家外；不面一驚中團是不不開力十在不制人西收我美。

<ol>
<li>列表 1 內容
<p>列表 1 的子項內容</p></li>
<li>列表 2 內容</li>
<li>列表 3 內容</li>
</ol>

項目符號清單

This is a Checked List 1　壹
如今互聯網提供各種各樣版本的Lorem Ipsum段落，但是大多數都多多少少出於刻意幽默或者其他隨機插入的荒謬單詞而被篡改過了。如果你想取用一段Lorem Ipsum，請確保段落中不含有令人尷尬的不恰當內容。
This is a Checked List 2　貳
This is a Checked List 3　參
今消朋事製定綠實的人這家地……續大中天家光華出用的了？亮看家外；不面一驚中團是不不開力十在不制人西收我美。
今消朋事製定綠實的人這家地……續大中天家光華出用的了？亮看家外；不面一驚中團是不不開力十在不制人西收我美。

<ul>
<li>列表 1 內容
<p>列表 1 的子項內容</p></li>
<li>列表 2 內容</li>
<li>列表 3 內容</li>
</ul>

自編號清單

01這裡是內容喔

<p class="num"><span>01</span>除了P，也可以用div標籤</p>

區塊樣式

引用-常規

This a Quote : Cleansis is from a 8 Post Formats.　blockquote的引用內容文字樣式

引用-特殊1

科普用，引用的內容文字樣式. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.

Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum.

今消朋事製定綠實的人這家地……續大中天家光華出用的了？亮看家外；不面一驚中團是不不開力十在不制人西收我美。

<blockquote class='s-1'>文字內容放這裡</blockquote>

醒目訊息

藍底備註訊息 Alert message

紅底錯誤訊息 Error message

綠底正確訊息 success message

灰底備註訊息的 p 標籤

ol標籤列1
ol標籤列2

<p class="note">藍底備註訊息放這裡</p>
<p class="note wr">紅底錯誤訊息放這裡</p>
<p class="note ch">綠底正確訊息放這裡</p>
<div class="note mk"><p>灰底備註訊息的 p 標籤</p><ol><li>ol標籤列1</li><li>ol標籤列2</li></ol></div>

小區塊運用

使用 code 標籤實現 <如這樣> 的效果

程式碼區塊

<div class='pre html'>
  <pre>將程式碼貼在這裡</pre>
</div>

// 使用標籤增加顏色

<i class='gray'>...</i>				= 灰色(其他類)
<i class='org'>...</i>				= 橙色(標註類)
<i class='red'>...</i>				= 紅色(名稱類)
<i>...</i>										= 藍色(程式碼)
<i class='green'>...</i>			= 綠色(標籤類)
<i class='block'>...</i>			= 藍底(強調填充類)

<div class='pre css'>
  <pre>將程式碼貼在這裡_CSS</pre>
</div>

<div class='pre js'>
  <pre>將程式碼貼在這裡_JS</pre>
</div>

程式碼區塊-多頁

<div class='pre tb'>
  <!--[ 按鈕功能 ]-->
  <input class='prei hidden' id='preT-1' type='radio' name='preTab' checked>
  <input class='prei hidden' id='preT-2' type='radio' name='preTab'>
  <input class='prei hidden' id='preT-3' type='radio' name='preTab'>
  <!--[ 標題/標頭 ]-->
  <div class='preH tbHd scrlH'>
    <!--[ 更改屬性 data-text='...' 以替換標題 ]-->
    <label for='preT-1' data-text='HTML'></label>
    <label for='preT-2' data-text='CSS'></label>
    <label for='preT-3' data-text='JS'></label>
  </div>

  <!--[ 內容 ]-->
  <div class='preC-1'>
    <pre>HTML here</pre>
  </div>
  <div class='preC-2'>
    <pre>CSS here</pre>
  </div>
  <div class='preC-3'>
    <pre>JS here</pre>
  </div>
</div>

CSS here

JS here

表格-常規

No	Column_1	Column_2	Column_3	Column_4
1	Data_table_1	00.000.000	0.000.000	0.000.000
2	Data_table_2	00.000.000	0.000.000	0.000.000
3	Data_table_3	00.000.000	0.000.000	0.000.000

<div class='table'>
  <table style='white-space: nowrap;'>
    <thead>
      <tr>
        <th>標題1</th>
        <th>標題2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>第2列</td>
        <td>第2列</td>
      </tr>
      <tr>
        <td>第3列</td>
        <td>第3列</td>
      </tr>
    </tbody>
  </table>
</div>

分隔樣式

標題分隔線

<h4 class="hr">含分隔線的標題樣式，任何階文字標籤都適用</h4>

一般分隔線(hr)

按鈕連結樣式

按鈕樣式-常規

基本按鈕　圖標按鈕　線條樣式　填滿樣式

<a class='button' href='javascript:;'>基本按鈕</a>
<a class='button' href='javascript:;'><i class='icon demo'></i>圖標按鈕</a>　
<a class='button ln' href='javascript:;'><i class='icon dl'></i>線條樣式</a>
<a class='button' href='javascript:;'><i class='icon dl'></i>填滿樣式</a>

按鈕樣式-並排

Demo Download

<div class='btnF'>
  <a class='button ln' href='javascript:;'>左按鈕</a>
  <a class='button' href='javascript:;'><i class='icon dl'></i>右按鈕</a>
</div>

按鈕樣式-高級

file_name.zip 200kb

<div class='dlBox'>
  <!--[ 更改 data-text='...' 屬性以添加新文件類型 ]-->
  <span class='fT' data-text='zip'></span>
  <div class='fN'>
    <!--[ 檔案名稱 ]-->
    <span>file_name.zip</span>
    <span class='fS'>200kb</span>
  </div>
  <!--[ 下載檔案 (更改 href='...' 屬性以添加鏈接下載) ]-->
  <a class='button' aria-label='下載' href='javascript:;' target='_blank' rel='noopener' ><i class='icon dl'></i></a>
</div>

連結樣式

Sample_external_link 外部連結

<a class='extL'target="_blank" href='javascript:;'>外部連結顯示文字</a>

閱讀更多

閱讀更多：

<div class='pRelate notranslate'>
  <!--[ 相關標題 ]-->
  <b>閱讀更多：</b>

  <ul>
    <li><a href='javascript:;'>文章名稱</a></li>
  </ul>
</div>

收合樣式