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-07-16
  • 阳高管家堡用粽子“包”出小康路 2019-07-16
  • 內存市场反垄断调查:矛头指向美国企业 2019-07-16
  • 国家能源局:四方面工作促洁净能源发展 2019-07-15
  • 美对500亿美元中国商品征税 外媒美做法很不体面 2019-07-15
  • 山东日照紧抓“一带一路”机遇——加快港口升级 拓展国际物流 2019-07-15
  • 新余市通报14起中央环保督察反馈问题整改不力情况 2019-07-14
  • 西部网(陕西新闻网)www.cnwest.com 2019-07-14
  • 新华时评:美逆潮流而动,必将付出代价 2019-07-13
  • 有神论跟无神论的差别在哪你都不知道,还要扯啥呢。 2019-07-13
  • 中央政治局会议(十九届) 2019-07-13
  • 无论谁说自己的理论是马克思主义理论都不算数,只有他的理论符合客观事实及其规律才是真理,否则便是谬误。 2019-07-12
  • 长租公寓产品趋于多元化 2019-07-12
  • 独立自主,奋发图强,大胆创新,赶超欧盟不是梦! 2019-07-12
  • 2017“大地飞歌”门票热销 电子票卡可乘公交地铁 2019-07-11
  • 老11选5定胆技巧 云南快乐十分 吉林11选5走势图前三走势 幸运赛车计划软件下载 香港赛马会排位表资料 彩票开奖查询十五选五 中超直播广州恒大 什么app能网购足彩 香港内部透码2017 福彩北京快三开奖查询 天津时时彩走势图360 河内5分彩网站 香港赛马会单双中特 中国竞彩网网上投注 重庆快乐10分玩法