content是内容样式，14号字体，25px行高，遇到<P>段落标签会自动首行缩进两个字符，如果换行就用<br>。重点显示就用<strong></strong>便签。切目前主流的门户网站，如：腾讯、网易、新浪等资讯详情页采用的都是这个效果。简单、优雅、规范。
h1. 大标题小标题
h2. 大标题小标题
h3. 大标题小标题
h4. 大标题小标题
h5. 大标题小标题
h6. 大标题小标题
<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像素间距
重要文本，加粗显示
被强调的文本，斜体显示
带下划线的文本
引用
突出显示文本
带删除线的文本
guojunhui 大写字母
GuoJUNHUI 小写字母
guojunhui 首字母大写
<p>这是段落，向下10像素间距</p> <smail>小型文本，是父容器字体大小的85%</smail> <strong>重要文本，加粗显示</strong> <em>被强调的文本，斜体显示</em> <u>带下划线的文本</u> <cite>引用</cite> <mark>突出显示文本</mark> <del>带删除线的文本</del> <p class="uppercase">guojunhui 大写字母</p> <p class="lowercase">GuoJUNHUI 小写字母</p> <p class="capitalize">guojunhui 首字母大写</p>
对齐方式
| 左对齐 class="text-l" | 居中对齐 class="text-c" | 右对齐 class="text-r" |
|---|---|---|
| 居上对齐 class="va-t" | 居中对齐 class="va-m" | 距底对齐 class="va-b" |
浮动
左浮动 class="f-l"
右浮动 class="f-r"
文字单行溢出变省略号
文本超出省略号：
我是很长很长的文字，我的所在的容器尺寸有限，所以我溢出了，并且显示省略号
DIV超出隐藏：
超出的文字或是其它元素都会隐藏掉
文本超出省略号
<div class="text-overflow" style="width:300px;">我是很长很长的文字，我的所在的容器尺寸有限，所以我溢出了，并且显示省略号</div>
DIV超出隐藏
<div class="overflow" style="width:50px;height:20px">超出的文字或是其它元素都会隐藏掉</div>
线条
<div class="line"></div>
外边距
距离上个元素10px
支持任何块级元素，如果行内元素要想使用margin，请使用 display：block 先将其转化为块级元素
数值： 0，5，10，15，20，25，30，35，40，45，50
<div class="mt-10">上边距10像素</div>
<div class="mb-10">下边距10像素</div>
<div class="ml-10">左边距10像素</div>
<div class="mr-10">右边距10像素</div>
<div class="md-10">全部边距10像素</div>
内边距
10像素填充
数值： 0，5，10，15，20，25，30，35，40，45，50
<div class="pt-10" >上内边距10像素填充</div>
<div class="pb-10" >下内边距10像素填充</div>
<div class="pl-10" >左内边距10像素填充</div>
<div class="pr-10" >右内边距10像素填充</div>
<div class="pd-10" >全部10像素填充</div>
文字尺寸
10px 字体
12px 字体
14px 字体
16px 字体
18px 字体
20px 字体
22px 字体
24px 字体
26px 字体
28px 字体
30px 字体
32px 字体
34px 字体
36px 字体
<p class="f-10">10px 字体</p>
<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>
<p class="f-32">32px 字体</p>
<p class="f-34">34px 字体</p>
<p class="f-36">36px 字体</p>
文字颜色
fff色
000色
333色
ddd色
999色
ccc色
ff0000色
00FF00色
0000FF色
FFFF00色
CCEEFF色
<p class="f-fff" style="background:#000;">FFFFFF色</p>
<p class="f-000">000000色</p>
<p class="f-333">333333色</p>
<p class="f-ddd">DDDDDD色</p>
<p class="f-999">999999色</p>
<p class="f-ccc">CCCCCC色</p>
<p class="f-f00">FF0000色</p>
<p class="f-ff0">00FF00色</p>
<p class="f-00f">0000FF色</p>
<p class="f-fff0">FFFF00色</p>
<p class="f-cef">CCEEFF色</p>
上标 下标
平方米m2
二氧化碳CO2
<p>平方米m<sup>2</sup></p>
<p>二氧化碳CO<sub>2</sub></p>
内容样式
<div class="content">
<p>content是内容样式，14号字体，25px行高，遇到<P>段落标签会自动首行缩进两个字符，如果换行就用。重点显示就用<strong></strong>便签。
切目前主流的门户网站，如：腾讯、网易、新浪等资讯详情页采用的都是这个效果。简单、优雅、规范。</p>
</div>
代码模式
需要引入 <script src="plus/prettify/prettify.js"></script>
<pre class="prettyprint linenums">
你的代码写在这里
</pre>
定位
.pos-r （position:relative）， .pos-a （position:absolute）， .pos-f （position:fixed）
<div class="pos-r">相对定位</div>
<div class="pos-a">绝对定位</div>
<div class="pos-f">固定位置</div>
宽度
.w10
.w20
.w30
.w40
.w50
数值： 5，10，15，20，25，30，33，35，40，45，50，55，60，65，70，75，80，85，90，95，100
<div class="w5"></div>
高度
.h20
.h30
.h40
.h50
数值： 20，25，30，35，40，45，50，55，60，65，70，75，80，85，90，95，100
<div class="h20"></div>
文字行距
.lh-16
.lh-18
.lh-20
.lh-22
.lh-24
.lh-26
.lh-28
.lh-30
<div class="lh-16">文字行距</div>
<div class="lh-18">文字行距</div>
<div class="lh-20">文字行距</div>
<div class="lh-22">文字行距</div>
<div class="lh-24">文字行距</div>
<div class="lh-26">文字行距</div>
<div class="lh-28">文字行距</div>
<div class="lh-30">文字行距</div>
背景色
.lightblue
.skyblue
.green
.orange
.red
.yellow
.lightgreen
.black
.blue
.white
弹出搜索条
<input class="search_from" type="text" placeholder="搜索...">
阴影效果
文字阴影效果块阴影效果
<span class="text-shadow">文字阴影效果</span>
<div class="border pd-5 box-shadow radius-7 w50" style="height:50px;" >块阴影效果</div>