测试通用html元素 Tests for common HTML elements

段落和盒子 PARAGRAPHS & BOXES

Rain css是一个基于单个css对象的前端框架,所有的单个css对象在screen.css和rain.css里面,所以的对象可以直接拿来调用,并且其完全支持css3, rain css的reset和基本html元素部分使用 blueprint框架.

Rain css is a CSS Object oriented implementing,and all object are set in screen.css and rain.css,so you can only invoke it now and it support all css3 properties, and the reset css use blueprint framework.

使用classsmall,可以说文本内容在视觉上显得更小. Use class small,can make the text more small in visual.

而是用class large,则是的文本比普通显示的文本更大. Use class large,let the text more larger than common text.

Classbox 则显示一个淡灰色的内容块,在页面其可以起到着重提示的作用. Classbox can show a content box with color light blue,and in a page it can tip the important content.

使用<blockquote>标签则可以标记那些需要用来引用的内容 Use <blockquote> tag,can mark the content that references to other article.

使用 <blockquote class="pull-right"> 则将引用的竖线标识挪到内容的右边

列表元素 LISTS

<ul>无序列表 Unordered list test
Another list element.
Yet another element in the list
Some long text.

<ol>有序列表 Ordered list test
Another list element
Yet another element in the list

有序列表Ordered list
内嵌无序列表Here's a nested unordered list
- 内嵌无序列表Nested Unordered list
- 内嵌有序列表Nested ordered list
  1. The first
  2. And the second
有序列表Ordered List item
内嵌有序列表Nested Ordered list
1. Some point
2. Nested Unordered list
  - The first
  - And the second

<dl>自定义列表definition list

<dt>定义的条目definition term: <dd>定义的描述definition description
definition list dt: definition list dd
Rain CSS framework: Rain CSS framework
Rain CSS framework: Rain CSS framework

标题 HEADINGS

H1: Rain CSS framework

H2: Rain CSS framework

H3: Rain CSS framework

H4: Rain CSS framework

H5: Rain CSS framework

H6: Rain CSS framework

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

杂项元素 Miscellaneous ELEMENTS

<strong>
~~<del> deleted~~
<dfn> dfn
<em> emphasis

<a> anchor
<a> a + href

<abbr> abbr - extended text when mouseover.
<acronym> acronym - extended text when mouseover.

<address>
唐老鸭Donald Duck
555区 Box 555
迪士尼Disneyland

*带有caption,tr,td的标准table元素 A standard test table with a caption, tr, td elements*
Table Header One	Table Header Two
TD One	TD Two
TD colspan 2

*带有thead, tfoot, 和 tbody的标准table元素 A test table with a thead, tfoot, and tbody elements*
Table Header One	Table Header Two
tfoot footer
TD One	TD Two
TD One	TD Two

<pre>标签保留文本内容里面的空格
pre  space1空格1
pre    space2空格2
pre tab制表

<code>标签则没有任何的缩进 Not indented 
indent1 
indent2 
indent3

<tt>tt标签下的文本必须等宽并且始终显示一行甚至是文本有换行空格和制表符 This tt text should be monospaced and wrap as if one line of text even though the code has newlines, spaces, and tabs. It should be the same size as <p> text.

文本元素的字体属性 Text Element font property

text with class fn

text with class fi

text with class fo

text with class fv

text with class fwn

text with class bord or strong

text with class fborder

text with class lighter

text with class fsxxs

text with class fsxs

text with class fss

text with class fsm or fontsizeMedium

text with class fsl or fontsizeLarge

text with class fsxl

text with class fsxxl

text with class tdn

text with class textDecUnder

text with class textDecOver

text with class textDecThough

text with class valignBase

text with class valignSub

text with class valignSuper

textwith class valignTop

text with class valignTtop

text with class valignMiddle

text with class valignBottom

text with class valignTbottom

text with class tTransCap

text with class tTransUpper

TEXT with class tTransLower

text with class tal

text with class tar

text with class tac

text with class ti

带图标的链接 Links with icons

web DM

文本元素字体大小 Text Element font size

text with class fs-1

text with class fs-2

text with class fs-3

text with class fs-4

text with class fs-5

text with class fs-6

text with class fs-7

text with class fs-8

text with class fs-9

text with class fs-10