Survive » typography. » Typography and examples.

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.

pk10392444开奖记录: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.


pk10开奖直播视频 www.95k2.com 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

Page 1 of 2 1 2
  • 小浣熊爬摩天大楼 网友开直播终于爬到大楼顶层--旅游频道 2019-04-15
  • [囧]过去单位学习是不用工作时间的,有紧急任务都是自愿加班的,领导照顾使自己都感到很惭愧 2019-04-14
  • 平遥交警圆满完成元宵节安保任务 2019-04-11
  • 图解:高校体育 竞技体育的“基石” 群众体育的“排头兵” 2019-04-05
  • 回复@老老保老张工:各级计委啊!虽然有时候也征求企业的意见,但仅仅是作为制订计划的参考,权重微乎其微…… 2019-03-25
  • 赣州市委常委会召开会议 李炳军主持会议 2019-03-25
  • 引发空调病的主要原因 2019-03-19
  • 大陆学者:“31条”多维价值体现在三方面 2019-03-16
  • 首例英烈保护公益诉讼案宣判:被告公开赔礼道歉 2019-03-16
  • 小心男友会翻脸:女生房间最忌出现5种东西 2019-03-09
  • 光是一个梨子的滋味就改变了方向,说讲事实摆道理,就是要你按他的指挥棒转,属于忽悠网友的口实 2019-03-06
  • 葡萄牙西班牙明晨上演B组焦点战 谁才是真正铁嘴钢牙? 2019-03-06
  • 南开入伍学生畅谈习近平回信:无悔青春选择 立志报效国家 2019-03-05
  • 把黄土高坡变绿的造林人 2019-03-02
  • 【统战史话(10)·工农民主统一战线】工农民主统一战线是怎么建立的? 2019-03-02
  • 956| 512| 239| 392| 713| 357| 428| 664| 995| 308| 379| 643| 612| 748| 607|