标题

h1. 大标题小标题

h2. 大标题小标题

h3. 大标题小标题

h4. 大标题小标题

h5. 大标题小标题

h6. 大标题小标题

HTML代码
<h1>h1. 大标题<small>小标题</small></h1>
<h2>h2. 大标题<small>小标题</small></h2>
<h3>h3. 大标题<small>小标题</small></h3>
<h4>h4. 大标题<small>小标题</small></h4>
<h5>h5. 大标题<small>小标题</small></h5>
<h6>h6. 大标题<small>小标题</small></h6>

文本

这是段落，向下10像素间距

小型文本，是父容器字体大小的85%

重要文本，加粗显示

被强调的文本，斜体显示

带下划线的文本

引用

突出显示文本

~~带删除线的文本~~

guojunhui 大写字母

GuoJUNHUI 小写字母

guojunhui 首字母大写

HTML 代码
<p>这是段落，向下10像素间距</p>
<p><smail>小型文本，是父容器字体大小的85%</smail></p>
<p><strong>重要文本，加粗显示</strong></p>
<p><em>被强调的文本，斜体显示</em></p>
<p><u>带下划线的文本</u></p>
<p><cite>引用</cite></p>
<p><mark>突出显示文本</mark></p>
<p><del>带删除线的文本</del></p>
<p class="uppercase">guojunhui 大写字母</p>
<p class="lowercase">GuoJUNHUI 小写字母</p>
<p class="capitalize">guojunhui 首字母大写</p>

对齐方式

左对齐

居中对齐

右对齐

居上对齐	居中对齐	距底对齐

HTML 代码
<div class="text-l">左对齐</div>
<div class="text-c">居中对齐</div>
<div class="text-r">右对齐</div>

<table width="100%" class="table table-border table-bordered">
  <tr>
    <th class="va-t" height="50">居上对齐</th>
    <th class="va-m">居中对齐</th>
    <th class="va-b">距底对齐</th>
  </tr>
</table>

浮动

左浮动右浮动

HTML 代码
<span class="f-l">左浮动</span>
<span class="f-r">右浮动</span>

文字单行溢出变省略号

我是很长很长的文字，我的所在的容器尺寸有限，所以我溢出了，并且显示省略号

超出的文字或是其它元素都会隐藏掉

...

HTML 代码
<div class="text-overflow" style="width:300px;">我是很长很长的文字，我的所在的容器尺寸有限，所以我溢出了，并且显示省略号</div>

DIV超出隐藏
<div class="overflow" style="width:50px;height:20px">超出的文字或是其它元素都会隐藏掉</div>

线条

HTML 代码
<div class="line"></div>

外边距

距离上个元素10px

HTML 代码
<div class="mt-10">距上10像素</div>

.mt 表示上边距，.mb 表示下边距，.ml 表示左边距，.mr 表示右边距 .md 全部外边距 
支持任何块级元素，如果行内元素要想使用margin，请使用 display：block 先将其转化为块级元素
数值 0 ~ 50px 例如：mt-10 距上10像素

内边距

10像素填充

HTML 代码
<div class="pd-10" >10像素填充</div>

.pt 表示上内边距，.pb 表示下内边距，.pl 表示左内边距，.pr 表示右内边距 .pd 全部内边距
数值 0 ~ 50px 例如：pt-10 距上10像素

边框，css3圆角

边框

圆角边框

HTML 代码
<div class="border">边框</div>
<div class="border radius-10">圆角边框</div>

radius-4 ~ radius-50
radius-55 ~ radius-100 /5
强制设置直角: radius-0

文字尺寸

12px 字体

14px 字体

16px 字体

18px 字体

20px 字体

22px 字体

24px 字体

26px 字体

28px 字体

30px 字体

HTML 代码
<p class="f-12">12px 字体</p>
<p class="f-14">14px 字体</p>
<p class="f-16">16px 字体</p>
<p class="f-18">18px 字体</p>
<p class="f-20">20px 字体</p>
<p class="f-22">22px 字体</p>
<p class="f-24">24px 字体</p>
<p class="f-26">26px 字体</p>
<p class="f-28">28px 字体</p>
<p class="f-30">30px 字体</p>

文字颜色

fff色

000色

333色

ddd色

999色

ccc色

ff0000色

00FF00色

0000FF色

FFFF00色

CCEEFF色

HTML 代码
<p class="f-12 f-fff" style="background:#000;">fff色</p>
<p class="f-12 f-000">000色</p>
<p class="f-12 f-333">333色</p>
<p class="f-12 f-ddd">ddd色</p>
<p class="f-12 f-999">999色</p>
<p class="f-12 f-ccc">ccc色</p>
<p class="f-12 f-f00">ff0000色</p>
<p class="f-12 f-ff0">00FF00色</p>
<p class="f-12 f-00f">0000FF色</p>
<p class="f-12 f-fff0">FFFF00色</p>
<p class="f-12 f-cef">CCEEFF色</p>

上标下标

平方米m²

二氧化碳CO₂

HTML 代码
<p>平方米m<sup>2</sup></p>
<p>二氧化碳CO<sub>2</sub></p>

内容样式

content是内容样式，14号字体，25px行高，遇到<P>段落标签会自动首行缩进两个字符，如果换行就用<br>。重点显示就用<strong></strong>便签。切目前主流的门户网站，如：腾讯、网易、新浪等资讯详情页采用的都是这个效果。简单、优雅、规范。

HTML 代码
<p>content是内容样式，14号字体，25px行高，遇到<P>段落标签会自动首行缩进两个字符，如果换行就用。重点显示就用<strong></strong>便签。
切目前主流的门户网站，如：腾讯、网易、新浪等资讯详情页采用的都是这个效果。简单、优雅、规范。</p>

代码模式

需要引入 <script src="plus/prettify/prettify.js"></script>

HTML 代码
<pre class="prettyprint linenums">
你的代码写在这里
</pre>

定位

.pos-r 相对定位， .pos-a 绝对定位， .pos-f 固定

HTML 代码
<div class="pos-r">.pos-r{position:relative}</div>
<div class="pos-a">.pos-a{position:absolute}</div>
<div class="pos-f">.pos-f{position:fixed}</div>

宽度

.w5 ~ .w100 (分别是width:5% ~ width:100%)

HTML 代码
<div class="w5"></div>

标题