排版

默认16号字体，行距1.8em

段落排版

h1~h6标签同strong标签一样在seo中具有提高文字权重的效果

演示

我是h1标签，在seo中我拥有最高的权重

我是h2标签，在seo中我拥有仅次于h1标签的权重

我是h3标签，在seo中我拥有仅次于h1,h2标签的权重

我是h4标签，在seo中我拥有仅次于h1,h2,h3标签的权重

我是h5标签，在seo中我拥有仅次于h1,h2,h3,h4标签的权重

<h1>我是h1标签，在seo中我拥有最高的权重</h1>
<h2>我是h2标签，在seo中我拥有仅次于h1标签的权重</h2>
<h3>我是h3标签，在seo中我拥有仅次于h1,h2标签的权重</h3>
<h4>我是h4标签，在seo中我拥有仅次于h1,h2,h3标签的权重</h4>
<h5>我是h5标签，在seo中我拥有仅次于h1,h2,h3,h4标签的权重</h5>

引用

引用常常被用于评论中，在网页中非常常见，用<blockquote>就可以轻松实现一段美观的引用。

级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。

通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。

<blockquote>级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。
        <blockquote>通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。</blockquote>
      </blockquote>

abbr

标签常常用于关键字tag等地方，用<abbr>就可以轻松实现。

<abbr>css3</abbr> <abbr>html5</abbr>

代码区间 pre

演示

body{ background:white;}

<pre>body{ background:white;}</pre>

表格

带边框的表格加上class="qui-table .qui-table-bordered"即可实现带边框的表格

演示

<table class="table .qui-table-bordered">
 <tbody>
  <tr>
   <td>当我还是个小女孩</td>
   <td>我问我妈妈</td>
   <td>将来我会变成什么样子呢</td>
  </tr>
 </tbody>
 <tbody>
  <tr>
   <td>会漂亮吗</td>
   <td>会富有吗</td>
   <td>她对我说：世事不可强求，顺其自然吧</td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
    <td>当我长大并恋爱了</td>
    <td>我问我的心上人</td>
    <td>我们将来会怎么样呢</td>
  </tr>
  <tr>
   <td>生活每天都美好吗</td>
   <td>我的爱人对我说：</td>
   <td>世事不可强求，顺其自然吧</td>
  </tr>
 </tfoot>
</table>

斑马表格

加上class="qui-table.qui-table-zebra"即可实现斑马表格

演示

<table width="100%" border="0" class="table.qui-table-zebra"></table>

表单

对文本框等进行了重写，通过美化一些表单元素默认样式，例如文本框，按钮，下拉菜单等，让表单更美观。通过placeholder属性来完成，文本框的默认值，鼠标点击消失，失去光标，默认值恢复的效果。（改效果在firefox浏览器下可见）

演示

按钮

对按钮或者a标签按钮的样式重写,css3按钮是指通过css3来实现的按钮的效果，css3纯css可以实现立体，渐变，阴影，圆角等很多种特效，如果把这些属性通过各种不同的方式组合在一起就能实现很多不同的炫酷的按钮效果。 <a class="qui-btn"> 或者 <input type="qui-btn" class="qui-btn">

<a href="#" class="qui-btn">默认</a>

<a href="#" class="qui-btn qui-btn-inverse">反向</a>

<a href="#" class="qui-btn qui-bg-red qui-bg-inverse">红色</a>

<a href="#" class="qui-btn qui-bg-blue qui-bg-inverse">蓝色</a>

<a href="#" class="qui-btn qui-bg-green qui-bg-inverse">绿色</a>

<a href="#" class="qui-btn qui-bg-yellow qui-bg-inverse">黄色</a>

<a href="#" class="qui-btn qui-btn-little">小号</a>

<a href="#" class="qui-btn qui-btn-small">小号</a>

<a href="#" class="qui-btn qui-btn-medium">中号</a>

<a href="#" class="qui-btn qui-btn-large">大号</a>

文字

演示

当我还是个小女孩，

当我还是个小女孩，

我问妈妈

将来我会变成什么样子呢？

会漂亮吗？

会富有吗？

她对我说：

世事不可强求

顺其自然吧

<p ><span class="qui-txt--colorful">当我还是个小女孩，</span></p>
<p class="qui-txt-red">当我还是个小女孩，</p>
<p class="qui-txt-yellow">我问妈妈</p>
<p class="qui-txt-blue">将来我会变成什么样子呢？</p>
<p class="qui-txt-green">会漂亮吗？</p>
<p>会富有吗？</p>
<p>她对我说：</p>
<p>世事不可强求</p>
<p>顺其自然吧</p>

文字位置

演示

当我还是个小女孩，我问妈妈，将来我会变成什么样子呢？

会漂亮吗？会富有吗？

她对我说：世事不可强求,顺其自然吧

当我长大了，恋爱了，我问我的心上人，“我们将来会怎么样呢？我们的生活每天都会美好吗？”我的爱人对我说：“世事不可强求顺其自然吧。我们不能预见未来。世事不可强求顺其自然吧。”现在我有了自己的孩子，他们问我，“将来我会变成什么样子呢？会英俊吗？会富有吗？”我轻声地回答：“世事不可强求顺其自然吧。我们不能预见未来。世事不可强求顺其自然吧。”

<p class="qui-bdr qui-txt-left qui-pd-small">当我还是个小女孩，我问妈妈，将来我会变成什么样子呢？</p>
<p class="qui-bdr qui-txt-center qui-pd-small">会漂亮吗？会富有吗？</p>
<p class="qui-bdr qui-txt-right qui-pd-small">她对我说：世事不可强求,顺其自然吧</p>
<p class="qui-bdr qui-txt-justify qui-pd-small">当我长大了，恋爱了，...世事不可强求顺其自然吧。”</p>

背景色

歌词来自《Whatever Will Be, Will Be》

演示

When I was just a little girl,

I asked my mother,

"What will I be?

Will I be pretty?

Will I be pretty?

When I was just a little girl,

I asked my mother,

"What will I be?

Will I be pretty?

Will I be rich?"

When I was just a little girl,

I asked my mother,

"What will I be?

Will I be pretty?

Will I be rich?"

<p class="qui-bg-red qui-bg-inverse qui-pd-small">When I was just a little girl,</p>
<p class="qui-bg-yellow qui-bg-inverse qui-pd-small">I asked my mother, </p>
<p class="qui-bg-blue qui-bg-inverse qui-pd-small">"What will I be?</p>
<p class="qui-bg-green qui-bg-inverse qui-pd-small">Will I be pretty?</p>
<p class="qui-bg-red-light qui-txt-red qui-pd-small">When I was just a little girl,</p>
<p class="qui-bg-yellow-light qui-txt-yellow qui-pd-small">I asked my mother, </p>
<p class="qui-bg-blue-light qui-txt-blue qui-pd-small">"What will I be?</p>
<p class="qui-bg-green-light qui-txt-green qui-pd-small">Will I be pretty?</p>

去掉背景

.qui-bg-none

边框

歌词来自《Whatever Will Be, Will Be》

演示

When I was just a little girl,

I asked my mother,

"What will I be?

Will I be pretty?

Will I be rich?"

<p class="qui-bdr qui-bdr-red qui-txt-red qui-pd-small">When I was just a little girl,</p>
<p class="qui-bdr qui-bdr-yellow qui-txt-yellow qui-pd-small">I asked my mother, </p>
<p class="qui-bdr qui-bdr-blue qui-txt-blue qui-pd-small">"What will I be?</p>
<p class="qui-bdr qui-bdr-green qui-txt-green qui-pd-small">Will I be pretty?</p>
<p class="qui-bdr qui-pd-small">Will I be rich?"</p>

图片

鼠标移上去图片放大类qui-img-scale

演示

<a href="#"><img src="imgs/nopic.jpg" class="qui-img-scale" width="200"/></a>

外间距

qui-mgt50

定义了常用的间距 qui-mgt10 , qui-mgt20 , qui-mgt30, qui-mgt40, qui-mgt50, qui-mgt100

内间距

qui-pdt50

定义了常用的间距 qui-pdt10 , qui-pdt20 , qui-pdt30, qui-pdt40, qui-pdt50, qui-pdt100

字体大小

qui-fs20

定义了常用的字体大小 qui-fs12 , qui-fs14 , qui-fs16, qui-fs18, qui-fs20, qui-fs26, qui-fs32

• 排版
  • 段落排版
  • 引用
  • 标签
• 代码
• 表格
• 表单
• 按钮
• 其他
  • 文字
  • 位置
  • 背景
  • 边框
  • 图片
  • 外间距
  • 内间距
  • 文字大小