简单易用,扩展灵活,开放共享!
首页
常用布局
部件分享
使用文档
四方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
<!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>复杂点的布局-类名:c1-c2_1_2</h2> <div class="row c1-c2_1_2"> <div class="col-wrap"> <div class="col c1"></div> </div> <div class="col c2"></div> <div class="col c3"></div> <div class="col c4"></div> </div> </body> </html>
运行代码
部件分享
©2011 sfidea.com