排版

3.1.1 标题

HTML代码

<h1>h1. 大标题<small>小标题</small></h1>
<h2>h2. 大标题<small>小标题</small></h2>
<h3>h3. 大标题<small>小标题</small></h3>
<h4>h4. 大标题<small>小标题</small></h4>
<h5>h5. 大标题<small>小标题</small></h5>
<h6>h6. 大标题<small>小标题</small></h6>

CSS代码

h1,h2,h3,h4,h5,h6{font-weight:500;line-height:1.1;color:inherit}
h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small{font-weight:normal;line-height:1;color:#999}
h1,h2,h3{margin-top:20px;margin-bottom:10px}
h1 small,h2 small,h3 small,h1 .small,h2 .small,h3 .small{font-size:65%}
h4,h5,h6{margin-top:10px;margin-bottom:10px}
h4 small,h5 small,h6 small,h4 .small,h5 .small,h6 .small{font-size:75%}
h1{font-size:36px}
h2{font-size:30px}
h3{font-size:24px}
h4{font-size:18px}
h5{font-size:14px}
h6{font-size:12px}

可根据自己的实际项目情况进行重写，为了保持h-ui正常升级，最好保持h-ui文件不动，在自己定义的css文件中重写。

3.1.2 强调

HTML代码

<p>这是段落，向下10像素间距</p>
<smail>小型文本，是父容器字体大小的85%</smail>
<strong>重要文本，加粗显示</strong>
<em>被强调的文本，斜体显示</em>
<u>带下划线的文本</u>
<cite>引用</cite>
<mark>突出显示文本</mark>
<del>带删除线的文本</del>
<p class="uppercase">huige 大写字母</p>
<p class="lowercase">HUIGE 小写字母</p>
<p class="capitalize">huige 首字母大写</p>

CSS代码

p{margin-bottom:10px}		/*段落*/
small{font-size:85%}		/*小型文本*/
b,strong {font-weight: bold}	/*重要的文本，加粗*/
em{font-style:italic}		/*被强调的文本*/
i{}				/*斜体*/
u{}				/*加下划线*/
cite{font-style:normal}		/*引用*/
mark{color:#000;background:#ff0}/*突出显示文本*/
var{}				/*变量*/
kbd{}				/*键盘文本*/
code{}				/*计算机代码文本*/
dfn{font-style: italic}	/*一个定义项目*/
del{font-family:Simsun}		/*删除线*/
code,kbd,pre,samp {font-family: monospace, serif;font-size: 1em}
pre{white-space: pre-wrap}	/*预格式化的文本*/
.uppercase{text-transform:uppercase} /*文字大写*/
.lowercase{text-transform:lowercase} /*文字小写*/
.capitalize{text-transform:capitalize} /*首字母大写*

3.1.3 对齐

HTML代码

<div class="text-l">左对齐</div>
<div class="text-c">居中对齐</div>
<div class="text-r">右对齐</div>
<table class="table table-border table-bordered">
  <tr>
    <th class="va-t" height="50">居上对齐</th>
    <th class="va-m">居中对齐</th>
    <th class="va-b">距底对齐</th>
  </tr>
  <tr>
    <td class="va-t" height="50">.va-t</td>
    <td class="va-m">.va-m</td>
    <td class="va-b">.va-b</td>
  </tr>
</table>

CSS代码

.text-l{text-align:left}/*水平居左*/
.text-r{text-align:right}/*水平居右*/
.text-c{text-align:center}/*水平居中*/
.va *{vertical-align:sub!important;*vertical-align:middle!important;_vertical-align:middle!important}
.va-t{ vertical-align:top!important}/*上下居顶*/
.va-m{ vertical-align:middle!important}/*上下居中*/
.va-b{ vertical-align:bottom!important}/*上下居底*/

3.1.4 定位

HTML代码

class="pos-r|pos-a|pos-f"

.pos-r 相对定位， .pos-a 绝对定位， .pos-f 固定

CSS代码

.pos-r{position:relative}
.pos-a{position:absolute}
.pos-f{position:fixed}

3.1.5 浮动

HTML代码

<div class="cl"><span class="f-l">左浮动</span><span class="f-r">右浮动</span></div>

.f-l 左浮动，.f-r 右浮动

CSS代码

.f-l{float:left!important;_display:inline}
.f-r{float:right!important;_display:inline}

注意： 浮动的父级元素一定要用 cl 清除浮动，否则高度会无法撑开。

/*控制元素对定位的位置：居左|居右|j居上|居下*/

注意：须配合position 属性使用。

.left{ left:0; right:auto}
.right{ right:0; left:auto}
.top{ top:auto; bottom:0}
.bottom{ top:0; bottom:auto}

3.1.6 文字单行溢出省略号

HTML代码

<div class="text-overflow" style="width:300px;">我是很长很长的文字，我的所在的容器尺寸有限，所以我溢出了，并且显示省略号</div>

CSS代码

.text-overflow{overflow: hidden;text-overflow: ellipsis;white-space: nowrap}

3.1.7 线条

HTML代码

<div class="line"></div>

CSS代码

.line{ font-size: 0px; line-height: 0px; border-top: solid 1px #ddd; float: none}

3.1.8 外边距

HTML代码

<div class="mt-10">距上10像素</div>

.mt 表示上边距，.mb 表示下边距，.ml 表示左边距，.mr 表示右边距

支持任何块级元素，如果行内元素要想使用margin，请使用 display：block 先将其转化为块级元素

CSS代码

.mt-5{margin-top:5px}/*距上5像素*/
.mt-10{margin-top:10px}/*距上10像素*/
.mt-15{margin-top:15px}/*距上15像素*/
.mt-20{margin-top:20px}/*距上20像素*/
.mt-25{margin-top:25px}/*距上25像素*/
.mt-30{margin-top:30px}/*距上30像素*/
.mt-35{margin-top:35px}/*距上35像素*/
.mt-40{margin-top:40px}/*距上40像素*/
.mt-50{margin-top:50px}/*距上50像素*/

.mb-5{margin-bottom:5px}/*距下5像素*/
.mb-10{margin-bottom:10px}/*距下10像素*/
.mb-15{margin-bottom:15px}/*距下15像素*/
.mb-20{margin-bottom:20px}/*距下20像素*/
.mb-25{margin-bottom:25px}/*距下25像素*/
.mb-30{margin-bottom:30px}/*距下30像素*/
.mb-35{margin-bottom:35px}/*距下35像素*/
.mb-40{margin-bottom:40px}/*距下40像素*/
.mb-50{margin-bottom:50px}/*距下50像素*/

.ml-5{margin-left:5px}/*距左5像素*/
.ml-10{margin-left:10px}/*距左10像素*/
.ml-15{margin-left:15px}/*距左15像素*/
.ml-20{margin-left:20px}/*距左20像素*/
.ml-30{margin-left:30px}/*距左30像素*/
.ml-40{margin-left:40px}/*距左40像素*/
.ml-50{margin-left:50px}/*距左50像素*/

.mr-5{margin-right:5px}/*距右5像素*/
.mr-10{margin-right:10px}/*距右10像素*/
.mr-15{margin-right:15px}/*距右15像素*/
.mr-20{margin-right:20px}/*距右20像素*/
.mr-30{margin-right:30px}/*距右30像素*/
.mr-40{margin-right:40px}/*距右40像素*/
.mr-50{margin-right:50px}/*距右50像素*/

注意： 上下模块不要同时使用margin-top和margin-bottom，会存在兼容性问题，所以上下模块之间的间距统一使用下一个模块的margin-top来实现，另一个优点是：如果没有下一个模块也不会多出一段空隙。

margin的兼容性问题：div设置左浮动，margin-left在ie中会出现2倍边距bug，解决办法：在style里面添加display:inline。

3.1.9 内填充

HTML代码

<div class="pd-10">10像素填充</div>

CSS代码

.pt-5{padding-top:5px}/*上填充5像素*/
.pt-10{padding-top:10px}/*上填充10像素*/
.pt-15{padding-top:15px}/*上填充15像素*/
.pt-20{padding-top:20px}/*上填充20像素*/

.pb-5{padding-bottom:5px}/*下填充5像素*/
.pb-10{padding-bottom:10px}/*下填充10像素*/
.pb-15{padding-bottom:15px}/*下填充15像素*/
.pb-20{padding-bottom:20px}/*下填充20像素*/

.pl-5{padding-left:5px}/*左填充5像素*/
.pl-10{padding-left:10px}/*左填充10像素*/
.pl-15{padding-left:15px}/*左填充15像素*/
.pl-20{padding-left:20px}/*左填充20像素*/

.pr-5{padding-right:5px}/*右填充5像素*/
.pr-10{padding-right:10px}/*右填充10像素*/
.pr-15{padding-right:15px}/*右填充15像素*/
.pr-20{padding-right:20px}/*右填充20像素*/

.pd-5{padding:5px}/*填充5像素*/
.pd-10{padding:10px}/*填充10像素*/
.pd-15{padding:15px}/*填充15像素*/
.pd-20{padding:20px}/*填充20像素*/

3.1.10 边框，css3圆角

HTML代码

<div class="bk-gray">边框</div><div class="bk-gray radius">圆角边框</div>

CSS代码

.bk-gray{border:solid 1px #ddd}
.radius{border-radius:4px; overflow:hidden}
.size-MINI.radius{ border-radius:3px}
.size-L.radius{ border-radius:5px}
.size-XL.radius{ border-radius:6px}
.round{border-radius:1000px; overflow:hidden}
.circle{ border-radius:50%; overflow:hidden}

3.1.11 css3阴影

HTML代码

<div class="box-shadow">css3阴影效果</div>
<span class="text-shadow">css3文字阴影效果</span>

CSS代码

.box-shadow{-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.1);box-shadow:0 1px 2px rgba(0,0,0,0.1)}
.text-shadow{-webkit-text-shadow:0 0 2px rgba(0,0,0,0.2);text-shadow:0 0 2px rgba(0,0,0,0.2)}

圆角阴影可以组合使用。

3.1.12 行内分割竖线

HTML代码

<span class="pipe">|</span>

CSS代码

.pipe{margin:0 5px;color:#CCC}

3.1.13 文字尺寸

HTML代码

列出一些常用的，常规字号。

<p class="f-12">12px 字体</p>
<p class="f-14">14px 字体</p>
<p class="f-16">16px 字体</p>
<p class="f-18">18px 字体</p>
<p class="f-20">20px 字体</p>
<p class="f-24">24px 字体</p>
<p class="f-26">26px 字体</p>
<p class="f-28">28px 字体</p>
<p class="f-30">30px 字体</p>

CSS代码

.f-12{font-size:12px}
.f-14{font-size:14px}
.f-16{font-size:16px}
.f-18{font-size:18px}
.f-20{font-size:20px}
.f-24{font-size:24px}
.f-26{font-size:26px}
.f-28{font-size:28px}
.f-30{font-size:30px}

3.1.14 文字行距

根据黄金比例0.618，h-ui在css reset中已将全局body,th,td,button,input,select,textarea行高定为文本的1.6倍。

当然如果个人不喜欢，可以二次重写。

HTML代码

<p class="lh-16">16像素行距</p>
<p class="lh-18">18像素行距</p>
<p class="lh-20">20像素行距</p>
<p class="lh-22">22像素行距</p>
<p class="lh-24">24像素行距</p>
<p class="lh-26">26像素行距</p>
<p class="lh-28">28像素行距</p>
<p class="lh-30">30像素行距</p>

CSS代码

.lh-16{line-height:16px}/*16像素行距*/
.lh-18{line-height:18px}/*18像素行距*/
.lh-20{line-height:20px}/*20像素行距*/
.lh-22{line-height:22px}/*22像素行距*/
.lh-24{line-height:24px}/*24像素行距*/
.lh-26{line-height:26px}/*26像素行距*/
.lh-28{line-height:28px}/*28像素行距*/
.lh-30{line-height:30px}/*30像素行距*/

3.1.15 文字颜色

HTML代码

<p class="c-primary">主色</p>
<p class="c-secondary">次色</p>
<p class="c-success">强调色-成功</p>
<p class="c-error">强调色-错误</p>
<p class="c-warning">强调色-警告</p>
<p class="c-333">辅助色-#333333灰色</p>
<p class="c-666">辅助色-#666666灰色</p>
<p class="c-999">辅助色-#999999灰色</p>
<p class="c-red">标准色-红色</p>
<p class="c-green">标准色-绿色</p>
<p class="c-blue">标准色-蓝色</p>
<p class="c-white">标准色-白色</p>
<p class="c-black">标准色-黑色</p>
<p class="c-orange">标准色-橙色</p>

CSS代码

/*主要颜色*/
.c-primary,.c-primary a,a.c-primary{color:#5a98de}
.c-primary a:hover,a.c-primary:hover{ color:#5a98de}

/*次主色*/
.c-secondary,.c-secondary a,a.c-secondary{color:#555}
.c-secondary a:hover,a.c-secondary:hover{ color:#555}

/*强调色—成功*/
.c-success,.c-success a,a.c-success{color:#5eb95e}
.c-success a:hover,a.c-success:hover{ color:#5eb95e}

/*强调色—危险*/
.c-danger,.c-danger a,a.c-danger{color:#dd514c}
.c-danger a:hover,a.c-danger:hover{ color:#dd514c}

/*强调色—警告*/
.c-warning,.c-warning a,a.c-warning{color:#f37b1d}
.c-warning a:hover,a.c-warning:hover{ color:#f37b1d}

/*强调色—错误*/
.c-error,.c-error a,a.c-error{color:#c00}
.c-error a:hover,a.c-error:hover{ color:#c00}

/*辅助色—浅黑*/
.c-333,.c-333 a,a.c-333{color:#333}
.c-333 a:hover,a.c-333:hover{ color:#333}

/*辅助色—灰色*/
.c-666,.c-666 a,a.c-666{color:#666}
.c-666 a:hover,a.c-666:hover{ color:#666}
.c-999,.c-999 a,a.c-999{color:#999}
.c-999 a:hover,a.c-999:hover{color:#999}

/*标准色—红色*/
.c-red,.c-red a,a.c-red{color:red}
.c-red a:hover,a.c-red:hover{ color:red}

/*标准色—绿色*/
.c-green,.c-green a,a.c-green{color:green}
.c-red a:hover,a.c-red:hover{color:green}

/*标准色—蓝色*/
.c-blue,.c-blue a,a.c-blue{color:blue}
.c-blue a:hover,a.c-blue:hover{color:blue}

/*标准色—白色*/
.c-white,.c-white a,a.c-white{color:white}
.c-white a:hover,a.c-white:hover{color:white}

/*标准色—黑色*/
.c-black,.c-black a{color:black}
.c-black a:hover,a.c-black:hover{color:black}

/*标准色—橙色*/
.c-orange,.c-orange a,a.c-orange{color:orange}
.c-orange a:hover,a.c-orange:hover{color:orange}

3.1.16 文字颜色强调

从2.0起废弃3.1.16 文字强调，字体颜色全部放入到3.1.15。

3.1.17 缩略语

HTML代码

HTML代码

<abbr title="User Interface" class="initialism">UI</abbr>

CSS代码

abbr[title],abbr[data-original-title]{cursor:help;border-bottom:1px dotted #999}
abbr.initialism{font-size:90%;text-transform:uppercase}

3.1.18 地址

HTML代码

<address>北京市海淀区上地……</address>

CSS代码

address{display:block;margin-bottom:20px;font-style:normal;line-height:20px}

3.1.19 引用

HTML代码

<blockquote>这是引用的内容<p>p标签显示的引用内容</p><small>small标签显示小号字体</small></blockquote>
<blockquote class="text-r">这是引用的内容，右对齐效果<p>p标签显示的引用内容</p><small>small标签显示小号字体</small></blockquote>

CSS代码

blockquote{padding:0 0 0 15px;margin:0 0 20px;border-left:5px solid #eee}
blockquote p{margin-bottom:0;font-size:17.5px;font-weight:300;line-height:1.25}
blockquote small{display:block;line-height:20px;color:#999}
blockquote small:before{content:'\2014 \00A0'}
blockquote.text-r{padding-right:15px;padding-left:0;border-right:5px solid #eee;border-left:0}
blockquote.text-r p,blockquote.text-r small{text-align:right}
blockquote.text-r small:before{content:''}
blockquote.text-r small:after{content:'\00A0 \2014'}
q:before,q:after,blockquote:before,blockquote:after{content:""}
q {/*短的引用*/quotes: "\201C" "\201D" "\2018" "\2019"}

3.1.20 上标 下标

HTML代码

m<sup>2</sup>
CO<sub>2</sub>

CSS代码

sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}
sup{top:-0.5em}
sub{bottom:-0.25em}

3.1.21 内容样式

HTML代码

<div class="content">
  <p>content是内容样式，14号字体，25px行高，段落自动首行缩进两个字符。</p>
</div>

CSS代码

.content{position:relative;font-size:14px;line-height:25px;overflow:hidden;text-align:left}
.content h3{ margin-top:20px;font-size:16px}
.content p{text-indent:2em;margin-top:20px}
.content ul{text-indent:2em}

3.1.22 列表

HTML代码

<ul>
  <li>无序列表</li>
  <li>无序列表</li>
  <li>无序列表</li>
</ul>
<ol class="linenums">
  <li>有序列表</li>
  <li>有序列表</li>
  <li>有序列表</li>
</ol>

CSS代码

ul.unstyled,ol.unstyled{margin-left:0;list-style:none}
ul.inline,ol.inline{margin-left:0;list-style:none}
ul.inline>li,ol.inline>li{display:inline-block;*display:inline;padding-right:5px;padding-left:5px;*zoom:1}
ol.linenums{list-style:decimal outside none;margin:0 0 0 22px}/* IE indents via margin-left */
.tlist li{line-height:22px;overflow:hidden;white-space:nowrap}/*禁止换行*/
.tlist .time{ font-size:12px; font-family:Arial; color:#999}

排行榜

HTML代码

<ol class="top-list">
  <li class="top"><em>1</em><a href="#">排行榜列表</a><span class="date">12</span></li>
  <li class="top"><em>2</em><a href="#">排行榜列表</a><span class="date">12</span></li>
  <li class="top"><em>3</em><a href="#">排行榜列表</a><span class="date">12</span></li>
  <li><em>4</em><a href="#">排行榜列表</a><span class="date">12</span></li>
  <li><em>5</em><a href="#">排行榜列表</a><span class="date">12</span></li>
  <li><em>6</em><a href="#">排行榜列表</a><span class="date">12</span></li>
  <li><em>7</em><a href="#">排行榜列表</a><span class="date">12</span></li>
  <li><em>8</em><a href="#">排行榜列表</a><span class="date">12</span></li>
  <li><em>9</em><a href="#">排行榜列表</a><span class="date">12</span></li>
  <li><em>10</em><a href="#">排行榜列表</a><span class="date">12</span></li>
</ol>

CSS代码

.top-list li{height: 20px;line-height: 20px;margin-bottom: 15px;overflow: hidden;padding-left: 30px;position: relative;text-overflow: ellipsis;vertical-align: bottom;white-space: nowrap}
.top-list em {background-color: #F8F8F8;border: 1px solid #EBEBEB;color: #333;height: 18px;left: 0;line-height: 18px;position: absolute;text-align: center;top: 0;width: 20px; font-style:normal}
.top-list .top em{ background-color:#390;border:none;color: #fff;height: 20px;line-height: 20px;width: 22px}
.top-list .date {color: #999;font-size: 12px;position: absolute;right: 0;top: 0}

3.1.23 描述

HTML代码

<dl class="dl-horizontal cl"><dt>H-ui</dt><dd>轻量级前端框架，完全免费!</dd></dl>

.dl-horizontal 水平描述，默认不加为垂直模式。

CSS代码

.dl-horizontal.cl{}
.dl-horizontal dt{float:left;width:160px;overflow:hidden;clear:left;text-align:right;text-overflow:ellipsis;white-space:nowrap}
.dl-horizontal dd{margin-left:180px}

3.1.24 隐藏 显示

CSS代码

.hide{display:none}[hidden]{display: none}
.hidden{display:none!important;visibility:hidden!important}
.f-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}
[class*="span"].hide,.row-fluid [class*="span"].hide{display:none}
.show{display:block}
.invisible{visibility:hidden}

3.1.25 尺寸

新增尺寸全局类名，用于表单、按钮、表格、头像、标签等元素上，要与元素一起配合使用，方能看到效果。

PS：它使用起来很简单，就像我们衣服的SIZE，是一个通用单位。不管是上衣、裤子、还是内裤都可使用。

举例说明