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像素间距

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

重要文本,加粗显示

被强调的文本,斜体显示

带下划线的文本

引用

突出显示文本

带删除线的文本

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>
       

内容样式

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


<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>