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

公共样式

通常我们在写css样式的时候，为了避免一些浏览器兼容性问题或者代码书写的便捷性，我们经常会定义一个公共样式base.css，但是一般公共样式有很多的个性化设计，所以建议大家，只选用一些平时自己常用的就行。

* -- 样式说明 -- 
* 最大优先实现法，全局能实现不用区域，区域能实现不用模板， 
* 模板能实现不用界面，界面能实现不用标签 
* 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;
}

a {
    color: #333;
    text-decoration: none;
}
a, a:hover {
    transition: all .3s ease-out 0s;
}
a:hover, a:focus {
    color: #509524;
    text-decoration: none;
}

.g-font14 {
    font-size: 14px;
}
.g-font16 {
    font-size: 16px;
}

.fl{
	float:left;
}
.g-fr{
	float:right;
}

.g-hide {
    display: none
}
.g-block{
    display: block;
}
.g-inline{
	display:inline;
}
.g-inline-bo{
	display:inline-block;
}

//padding和fontsize同理
.g-mgt10{
	margin-top:10px;
}
.g-mgr10{
	margin-right:10px;
}
.g-mgb10{
	margin-bottom:10px;
}
.g-mgl10{
	margin-left:10px;
}

h1, h2, h3, h4, h5, h6, th {
	 font-size: 100%; 
	 font-weight: normal; 
 }

.g-clearfix{
 	clear: both; 
 	content: ""; 
 	display: block; 
	overflow: hidden
  }
  
.g-overflow-hidden{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

img {
    border: none
}

页面布局

一个好的前端页面，布局一定是整体看上去统一规范的。我们开发的时候，要先把布局搭建好，在往里面填写内容，这个框架我们可以称它为一个组件，组件形式的开发可以大大地提高前端开发的效率，并且代码的可复用强，不仅是对开发人员，包括用户的体验都是棒棒的。

我们开发前应该先想好怎么去搭建一个整体的架构：

两列布局：

<div class="main">
	<div class="col-left">
		<div class="box"></div>
	</div>
	<div class="col-auto">
		<div class="box"></div>
	</div>
</div>

//在框架里，我们要注意，不要写死height值，要让它自适应
.main{
	display: block;
    width: 960px;
    margin: 0 auto;
}

//如果是两列布局，我们可以设置左边的width固定，右边为自适应
.main .col-left {
    width: 700px;
    margin-right: 10px;
}
.col-left {
    float: left;
}
.col-auto {
    overflow: hidden;
    _zoom: 1;
    _float: left;
}
.box {
    background-color: #fff;
}
.box {
    border: 1px solid #c3d4e7;
    zoom: 1;
    overflow: auto;
}

单行布局：这里我们使用h5规范的section和article来搭建

<div class="section">
	<article class="wrapper "></article>
</div>

//不唯一，只是写一些可能用上的样式作为参考
.main {
    background: #6d6b69 url(https://cdn.aoscdn.com/img/about-us/main/bg.jpg?c645) center center/cover no-repeat;
    height: calc(100% - 349px);
    min-height: 452px;
    position: relative;

	//或者不固定高度
	padding-top: 150px;
    padding-bottom: 150px;
    border-bottom: 1px solid #ebebeb;
    overflow: hidden;
}

.wrapper {
    width: 1200px;
    margin: 0 auto;
    max-width: 80%;
}