标题

    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>

外边距

距上10像素
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色

HTML 代码 <p class="f-fff">fff色</p> <p class="f-000">000色</p> <p class="f-333">333色</p> <p class="f-ddd">ddd色</p> <p class="f-999">999色</p> <p class="f-ccc">ccc色</p> <p class="f-f00">ff0000色</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>

代码模式

这里可以插入HTML代码 <P></P><IMG SRC=""><div></div>等
HTML 代码
<xmp> 这里可以插入HTML代码

等 </xmp>

定位

class="pos-r|pos-a|pos-f" .pos-r 相对定位, .pos-a 绝对定位, .pos-f 固定
CSS 代码

.pos-r{position:relative}

.pos-a{position:absolute}

.pos-f{position:fixed}