重點標題及其段落：
<div class="gist">我是標題<p>我是內容</p><p>我是內容</p></div>
↓
久寿川ささら
『XRATED』からの追加キャラクター。主人公の1つ年上の先輩で、学園の生徒会長。昨年度はまーりゃんの下で生徒会副会長を務めていた。主人公達が生徒会に加わるまで他の役職を置かず全ての生徒会業務を一人で完璧にこなしていた才女。あまり人を寄せ付けない厳しい性格で、生徒たちからは恐れられている。生い立ちの関係でコンビニ弁当やハンバーガーなどの大量生産で作られる食べ物か、高級フランス料理などの生活感から大きくかけ離れた食べ物しか受け付けない身体になっている。クラゲや両生類などいささか風変わりな動物を愛でている。TVアニメ版には、『XRATED』の発売時期がTVアニメの放送終期だったこともあり登場していないが、OVAには登場している。
重點標示：
<span class="highlight">標示文字</span>
↓
すいかと愉快な仲間たち
重點標示區塊：
<div class="focal">重點區塊內容</div>
↓
生けれども生けれども、道は氷河なり。
人の生に四季はなく、ただ、冬の荒野があるのみ。
流れ出た血と涙は、拭わずともいずれ凍りつく──。
人の生に四季はなく、ただ、冬の荒野があるのみ。
流れ出た血と涙は、拭わずともいずれ凍りつく──。
影片播放(VCastr)：
<a href="javascript:VCastr('影片連結',影片寬,影片高)">超連結內容</a>
↓
圖片展示(Lytebox)：
<a href="圖片連結" rel="lytebox" title="圖片敘述">超連結內容</a>
↓
LyteSize基礎使用：
<img src="圖片網址" onload="LyteSize(this)" alt="圖片敘述" />
<img src="圖片網址" onload="LyteSize(this)" alt="圖片敘述" />
↓
解說：
在上面的例子中，試著把圖片點開來會發現圖片大小會大致上符合頁寬。
另外也可以先把瀏覽器縮小尺寸後再重新整理，會發現點開的圖片跟著調小了。
在上面的例子中，試著把圖片點開來會發現圖片大小會大致上符合頁寬。
另外也可以先把瀏覽器縮小尺寸後再重新整理，會發現點開的圖片跟著調小了。
LyteSize進階使用(調整圖片自身大小)：
<img src="圖片網址" onload="LyteSize(this,true)" alt="圖片敘述" />
<img src="圖片網址" onload="LyteSize(this,true)" alt="圖片敘述" />
↓
解說：
在上面的例子中，會發現圖片大小也跟著自動調整為文章寬度。
在上面的例子中，會發現圖片大小也跟著自動調整為文章寬度。
LyteSize進階使用(調整圖片自身大小，不展開lytebox)：
<img src="圖片網址" onload="LyteSize(this,false)" alt="圖片敘述" />
<img src="圖片網址" onload="LyteSize(this,false)" alt="圖片敘述" />
↓
解說：
跟第二個例子差不多，只是並不展開 lytebox 而已。
跟第二個例子差不多，只是並不展開 lytebox 而已。
G-Tools 格式轉換工具：
