如何快速的用html和css写静态页面

	这两个星期，又写了一些静态页面，感觉比之前要快多了，下面来总结总结写静态页面的时候要注意的一些问题，以及如何更高效的搞定需求。
	
	在团队作战中，规范尤其重要，一个项目需求出来之后，经历需求分析，产品出原型，UI出图，前端写页面，后台处理接口数据库等等。每一个环节都至关重要，缺一不可。这里我们讨论的是将UI图转换为页面的过程。
	
	在出图之前，我们应该跟UI有个沟通，沟通的细节有：
		1、间距值尽量统一。举个栗子： 8px, 16px, 32px, 40px 等等，不要出现一些乱七八糟的值
		2、颜色统一。主题色， 对应的hover，active；背景色；边框色；常用的透明度值
		3、按钮风格。分颜色，圆角，大小等等。不要高度大小不一
		4、图标。使用css spirits, 将图标放一张图里面，虽然使用起来要用background-position处理，但是既省了空间，也提高的图片请求的性能。

待UI出完图之后，先不要急着写页面，而是写一份不仅属于自己也适用于团队其他成员的css类公用文件。
这份类文件不要奢望适用于你所有的项目，能适用于你当下要做的项目就ok。能适用所有的也就那么几行。比如定义浮动，设置box-sizing等等
具体问题具体分析:
	1、UI图常用字体大小从12到40，不等，那就把这些常用的定义出来，如：.font-14{ font-size: 14px }
	2、颜色值。包括背景色。这里我没有用变量处理主题色，感觉也够用了
	3、有些我的个人习惯， 比如浮动的fl,fr； 还有清楚浮动等等
	
有时候一个项目三五个前端合作，势必会出现沟通和使用方式的问题。所以这个类文件也需要一个前端leader去把握，能不能做到让每个团队成员都用的舒服就看水平了。当然，前期写出来给团队成员讲解分享一波还是很有必要，毕竟沟通很重要！

下面贴一份我的类文件：

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6{
    font-size: 12px;
    font-weight normal
}
.fl{
    float: left;    
}
.fr{
    float: right;    
}
.clear{
    clear: both;
}
.text-center{
    text-align center    
}
.text-right{
    text-align right    
}
.flex-center{
    display flex
    align-items center
}
.page-container{
    width: 1200px;
    margin: 0 auto;    
}
.font-12{
    font-size: 12px;    
}
.font-13{
    font-size: 13px
}
.font-14{
    font-size: 14px;
}
.font-16{
    font-size: 16px;
}
.font-18{
    font-size: 18px;
}
.font-20{
    font-size: 20px;
}
.font-24{
    font-size: 24px;
}
.font-28{
    font-size: 28px;
}
.font-32{
    font-size: 32px;
}
.font-40{
    font-size: 40px;
}
.bold{
    font-weight: bold;
}
.normal{
    font-weight: normal
}
.color-white{
    color #fff
}
.color-000{
    color #000
}
.color-111{
    color #111
}
.color-222{
    color #222222    
}
.color-666{
    color #666666  
}
.color-333{
    color #333333
}
.color-555{
    color #555555    
}
.color-777{
    color #777777}
.color-999{
    color #999999
}
.theme-color{
    color: #ff9e00    
}
.bg-fff{
  background #fff  
}
.touch{
    cursor pointer
}