基本 HTML 文档结构。
<!DOCTYPE html> <!--[if lt IE 7 ]><html class="ie6" lang="zh-cn"><![endif]--> <!--[if IE 7 ]><html class="ie7" lang="zh-cn"><![endif]--> <!--[if IE 8 ]><html class="ie8" lang="zh-cn"><![endif]--> <!--[if IE 9 ]><html class="ie9" lang="zh-cn"><![endif]--> <!--[if (gt IE 9)|!(IE)]><!--><html lang="zh-cn"><!--<![endif]--> <head> <meta charset="utf-8" /> <title>Tom Template</title> <link rel="stylesheet" href="./static/css/common/reset.css" /> <link rel="stylesheet" href="./static/css/common/component.css" /> <link rel="stylesheet" href="./static/css/project/common.css" /> </head> <body> <div id="doc-hd"> 头部 </div> <div id="doc-bd"> 主体 </div> <div id="doc-ft"> 尾部 </div> <script src="./static/js/common/jquery.min.js"></script> <script src="./static/js/project/common.js"></script> </body> </html>
样式重设 reset.css。
html{background:#fff;color:#000;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
body{font:12px/1.5 arial,SimSun,georgia,verdana,helvetica,sans-serif;}
body{background:#fff;color:#000;}
ul,ol,menu{list-style:none;}
fieldset,img{border:none;}
img,object,select,input,textarea,button{outline:0;vertical-align:middle;}
button{border:none;cursor:pointer;}
table{border-collapse:collapse;border-spacing:0;}
article,aside,footer,header,section,nav,menu,figure,figcaption,hgroup,details{display:block;}
address,caption,cite,code,dfn,em,strong,th,var,i,b,small,abbr{font-style:normal;font-weight:normal;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%;}
legend{color:#000;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
::selection{background-color:#39f;color:#fff;}
::-moz-selection{background-color:#39f;color:#fff;}
24 栅格系统。
class="ui-row" 是一个行。
<div class="ui-row m-b-10">
<div class="ui-col ui-col-4" style="background:#999;height:50px;">col-4</div>
<div class="ui-col ui-col-20" style="background:#ccc;height:50px;">col-20</div>
</div>
<div class="ui-row m-b-10">
<div class="ui-col ui-col-6" style="background:#999;height:50px;">col-6</div>
<div class="ui-col ui-col-6" style="background:#ccc;height:50px;">col-6</div>
<div class="ui-col ui-col-6" style="background:#999;height:50px;">col-6</div>
<div class="ui-col ui-col-6" style="background:#ccc;height:50px;">col-6</div>
</div>
<div class="ui-row m-b-10">
<div class="ui-col ui-col-8" style="background:#999;height:50px;">col-8</div>
<div class="ui-col ui-col-8" style="background:#ccc;height:50px;">col-8</div>
<div class="ui-col ui-col-8" style="background:#999;height:50px;">col-8</div>
</div>
<div class="ui-row m-b-10">
<div class="ui-col ui-col-8" style="background:#999;height:50px;">col-8</div>
<div class="ui-col ui-col-16" style="background:#ddd;height:50px;">col-16</div>
</div>
<div class="ui-row m-b-10">
<div class="ui-col ui-col-12" style="background:#999;height:50px;">col-12</div>
<div class="ui-col ui-col-12" style="background:#ddd;height:50px;">col-12</div>
</div>
公共样式，放在了 component.css 中。
<div class="show">显示内容</div> <div class="hide">隐藏内容</div> <div class="f-l">左浮动</div> <div class="f-r">右浮动</div> <div class="c-b">清除之前元素浮动</div> <div class="clearfix">清除内部元素浮动</div> <div class="v-a-m">垂直居中</div> <div class="f-w-b">文字粗体</div> <div class="f-w-n">文字默认字体</div> <div class="ui-black">文字黑色</div> <div class="ui-gray">文字灰色</div> <div class="ui-green">文字绿色</div> <div class="ui-orange">文字橙色</div> <div class="ui-red">文字红色</div> <div class="t-a-l">文字左对齐</div> <div class="t-a-c">文字居中</div> <div class="t-a-r">文字右对齐</div> <div class="t-d-u">文字下划线</div> <div class="f-s-12">文字 12px</div> <div class="f-s-14">文字 14px</div> <div class="m-b-10">距离下边元素 10px</div> <div class="m-b-20">距离下边元素 20px</div>