四方CSS框架

四方CSS框架将页面分为两层，一层布局，一层部件。布局层由行和列组成，简明灵活易扩展。可自行扩展行中的列数，调整布局样式，期待您分享新布局！
部件是由结构、样式可能还有脚本封装起来的一个独立的整体，方便共享使用，欢迎分享您的部件！部件的命名一般是xx-text/grid/list等（比如：sf-text/grid/list等），可以查看本站的源码和widget.css样式文件做参考。
探讨交流：sfidea#gmail.com　QQ：80333017。

快速链接

- 框架源码
- 快速指南
- 命名规范

常用布局

更多布局

2列-类名：c2m1

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>四方CSS框架</title>
<link type="text/css" rel="stylesheet" href="css/layout.css">
<style type="text/css">
.row{ border:2px dashed #aaa; min-height:60px;}
.col-wrap .col{background:#f9eba8;}
.col{ min-height:60px; background:#ececec;}
</style>
</head>
<body>
<h2>2列-类名：c2m1</h2>
<div class="row c2m1">
    <div class="col-wrap">
    <div class="col c1"></div>
    </div>
    <div class="col c2"></div>
</div>
</body>
</html>

2列-类名：c2m2

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>四方CSS框架</title>
<link type="text/css" rel="stylesheet" href="css/layout.css">
<style type="text/css">
.row{ border:2px dashed #aaa; min-height:60px;}
.col-wrap .col{background:#f9eba8;}
.col{ min-height:60px; background:#ececec;}
</style>
</head>
<body>
<h2>2列-类名：c2m2</h2>
<div class="row c2m2">
    <div class="col-wrap">
    <div class="col c1"></div>
    </div>
    <div class="col c2"></div>
</div>
</body>
</html>

3列-类名：c3m2

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>四方CSS框架</title>
<link type="text/css" rel="stylesheet" href="css/layout.css">
<style type="text/css">
.row{ border:2px dashed #aaa; min-height:60px;}
.col-wrap .col{background:#f9eba8;}
.col{ min-height:60px; background:#ececec;}
</style>
</head>
<body>
<h2>3列-类名：c3m2</h2>
<div class="row c3m2">
    <div class="col-wrap">
    <div class="col c1"></div>
    </div>
    <div class="col c2"></div>
    <div class="col c3"></div>
</div>
</body>
</html>

复杂点的布局-类名：c1-c2_1_2