标题

    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>
            

上标 下标

平方米m2

二氧化碳CO2

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>