前端开发布局规范---笔记

一、公共样式 base.css

每个网站都会一个相对统一的风格，那么在开发过程中，经常会重复使用到同一个字体颜色、字体大小、背景颜色、a标签以及它们的伪类样式等等的样式，所以就要求我们前端在开发之前，把要做的那个网站重复率高的代码样式写在一个公共类里，这样我们很容易就可以做到网站布局的规范性。
不同网站的公共样式各有不同，以下代码仅供参考，开发前可做适当修改！

* -- 样式说明 -- 
* 最大优先实现法，全局能实现不用区域，区域能实现不用模板， 
* 模板能实现不用界面，界面能实现不用标签 
* g - 全局 
* t - 区域 
* m - 模板 
* ui - 界面 
* lb - 标签 
* 特殊标签 
* j - 脚本 
* fix - 浮窗 */ 

//格式化页面
html, body, ul, li, ol, dl, dd, dt, p,  h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
   
    margin: 0;
    padding: 0;
}

body {
   
    font: 14px "Helvetica Neue", Helvetica, "Microsoft YaHei", Arial, "sans-serif";    
    color: #333;
    background-color: #f3f4f6;
}

table {
   
    border-collapse: collapse;
    border-spacing: 0;
}

input,img,table{
   
	outline: none;
	border: none;
	margin: 0;
	padding: 0;
}

ul,li{
   
	text-decoration: none;
	list-style: none;
}

a {
   
    color: #333;
    text-decoration: none;
}

a, a:hover {
   
    transition: all .3s ease-out 0s;
}

a:hover, a:focus {
   
    color: #509524;
    text-decoration: none;
}

//定义各种字体大小
.font14 {
   
    font-size: 14px;
}

.font16 {
   
    font-size: 16px;
}
//定义浮动和清除浮动
.fl{
   
	float:left;
}

.fr{
   
	float