Survive » blog. » Welcome to the blog.

Typography section 1.Images, headings and paragraphs.


Image with magic-border floated right. class="border_magic" Curabitur a velum purus. Nam vel risus a elit malesuada dictum. Quisque rutrum neque nec tortor mollis ut vulputate lectus rutrum. Suspendisse non quam enim. Nam elit orci, vestibulum et mattis ullamcorper, venenatis a urna. Donec vel ullamcorper dui. Fusce lacinia sagittis sem, ac viverra risus molestie non. Cras fringilla ultricies feugiat. Donec in velit ligula. Curabitur orci nunc, dictum ac consequat nec, ornare et sem. Morbi hendrerit aliquam tortor, sed convallis sapien bibendum sed. Quisque eleifend, urna sed rutrum ultrices, augue velit mattis sem, in suscipit ante nulla a risus. Maecenas tempor sem sit amet tellus interdum feugiat.

Morbi neque purus, bibendum et pharetra a, porttitor sed turpis. Etiam rutrum, metus at dapibus porttitor, nibh purus ornare orci, nec tempor enim arcu a velit. Nunc pharetra euismod metus, eu porttitor sapien vestibulum vel. Cras scelerisque metus quis ante consequat ornare. Suspendisse sed nunc sit amet quam lacinia varius non non enim.


Image with normal-border floated left. class="border_normal" Duis vitae sapien in nisi iaculis lobortis a et dui. Aliquam sodales sollicitudin magna, a iaculis massa pharetra et. Donec gravida vehicula libero, eu dignissim tellus porttitor at. Etiam vel tortor mi, id elementum ante. Suspendisse potenti. Maecenas convallis metus non risus posuere et aliquet purus suscipit. Quisque eleifend, urna sed rutrum ultrices, augue velit mattis sem, in suscipit ante nulla a risus. Maecenas tempor sem sit amet tellus interdum feugiat. Morbi neque purus, bibendum et pharetra a, porttitor sed turpis. Sed mauris massa, auctor a consectetur eu, rutrum a lectus.

Suspendisse non quam enim. Nam elit orci, vestibulum et mattis ullamcorper, venenatis a urna. Donec vel ullamcorper dui. Fusce lacinia sagittis sem, ac viverra risus molestie non. Cras fringilla ultricies feugiat. Donec in velit ligula. Curabitur orci nunc, dictum ac consequat nec, ornare et sem. Morbi hendrerit aliquam tortor, sed convallis sapien bibendum sed. Quisque eleifend


Paragraph with blockquote. <blockquote><p>some text</p></blockquote> Morbi neque purus, bibendum et pharetra a, porttitor sed turpis. Etiam rutrum, metus at dapibus porttitor, nibh purus ornare orci, nec tempor enim arcu a velit. Nunc pharetra euismod metus, eu porttitor sapien vestibulum vel. Cras scelerisque metus quis ante consequat ornare. Suspendisse sed nunc sit amet quam lacinia varius non non enim.

Cras scelerisque metus quis ante consequat ornare. Suspendisse sed nunc sit amet quam lacinia varius non non enim. Duis vitae sapien in nisi iaculis lobortis a et dui. Aliquam sodales sollicitudin magna, a iaculis massa pharetra et.

Curabitur orci nunc, dictum ac consequat nec, ornare et sem. Morbi hendrerit aliquam tortor, sed convallis sapien bibendum sed. Quisque eleifend, urna sed rutrum ultrices, augue velit mattis sem, in suscipit ante nulla a risus. Maecenas tempor sem sit amet tellus interdum feugiat.

500彩票双色球:Headline H1 with small and strong element...and sub-heading, a span.

Headline H2 with small and strong element...and sub-heading, a span.

Headline H3 with small and strong element...and sub-heading, a span.

Headline H4 with small and strong element...and sub-heading, a span.

Headline H5 with small and strong element...and sub-heading, a span.
Headline H6 with small and strong element...and sub-heading, a span.

Typography section 2.List elements.


  • Unordered list item, class: bullet-dot.
  • Unordered list item, <ul class="bullet-dot">
  • Unordered list item
  • Unordered list item, class: bullet-check.
  • Unordered list item, <ul class="bullet-check">
  • Unordered list item
  • Unordered list item, class: bullet-cross.
  • Unordered list item, <ul class="bullet-cross">
  • Unordered list item
  • Unordered list item, class: bullet-info.
  • Unordered list item, <ul class="bullet-info">
  • Unordered list item
  • Unordered list item, class: bullet-plus.
  • Unordered list item, <ul class="bullet-plus">
  • Unordered list item
  • Unordered list item, class: bullet-minus.
  • Unordered list item, <ul class="bullet-minus">
  • Unordered list item
  • Unordered list item, class: bullet-arrow.
  • Unordered list item, <ul class="bullet-arrow">
  • Unordered list item
  1. Ordered list item, class: default.
  2. Ordered list item, <ol>
  3. Ordered list item

Typography section 3.Code elements.


500彩票手机版 www.1w0be.cn This is code example you can achieve code-styling by typing: <code>This is code example</code> inside of <p> tags.

Pre-formatted text field can be achieved by using <pre> tags, this time outside <p> tag.

ul.bullet-cross li{
	background:url(css/images/bullet-cross.png) no-repeat scroll 0 0.1em transparent;
	padding-left:22px;
}

Typography section 4.CSS buttons.


Buttons are just links with "button" class. <a href="#" class="button">Example</a>

Like this: Example Button with longer text

Button with even longer, much longer text


Typography section 5.Warning messages.


In order to get warning, confirmation, error or information message, add appropriate class to <p>.

<p class="confirmation">

This is confirmation message

<p class="warning">

This is warning message

<p class="information">

This is information message

<p class="error">

This is error message

Latest news

Mike Davidson - jquery junkie

Nam vel risus a elit malesuada dictum. Quisque rutrum neque nec tortor mollis ut vulputate lectus rutrum. Duis vitae sapien in nisi iaculis lobortis a et dui. Aliquam sodales sollicitudin magna, a iaculis massa pharetra et. Donec gravida vehicula libero, eu dignissim tellus porttitor at. Maecenas convallis metus non risus posuere et aliquet purus suscipit. Sed mauris massa, auctor a consectetur eu, rutrum a lectus.

Popular topics

Page 1 of 2 1 2
  • 日本民众期待小泉之子挑战安倍 希望推动日本政坛“世代更替” 2019-02-20
  • ——客观唯心主义哲学思想的幸福感和不幸福感则是:人的主观臆断的欲望能否在“神”的制约中满足“好”的感觉。“幸福”就是在“神”的制约中满足了人的主观臆断的欲望而达 2019-02-20
  • 吴立新的专栏作者中国国家地理网 2019-02-20
  • 回复@大雨582:你看咱帖子所涉及的知识面、逻辑、心态等,不是自由而全面发展的人可能有的么? 2019-02-19
  • 易烊千玺押中高考作文题?不仅会押,今年还唱过! 2019-02-19
  • 【北京盈之宝车型报价】北京盈之宝4S店车型价格 2019-02-19
  • 置之无形之中听惊雷! 2019-02-18
  • 习近平两会期间谈社会主义核心价值观 2019-02-18
  • 上半年信用卡五大套路排行榜 你中了几招 2019-02-18
  • 图解:从中国新闻奖、长江韬奋奖看人民日报70年 2019-02-18
  • 网上也能搜到各地的房价。北京还有十八万多一平米的房子。 2019-02-17
  • 股市涨跌都正常,但不能允许欺诈,反正欺诈发现了,国家可以罚款,但股民就白损失了,这是什么规矩? 2019-02-17
  • 不断开辟21世纪马克思主义新境界 —— 学习习近平总书记在纪念马克思诞辰200周年大会上的讲话 2019-02-17
  • 跨界运动范 试驾沃尔沃V60Cross County 2019-02-16
  • 把实现人民对美好生活的向往br作为城市工作的奋斗目标 2019-02-16
  • 635| 888| 101| 955| 665| 744| 273| 782| 970| 761|