前端规范-布局构思

1、前言

最近在思考怎么完全脱离视觉去思考结构，让写出来的结构更有语义？交互原型出来后，怎么让前端结构和视觉设计同时并行？结构写完可以先让程序套模板并且结构不会再修改？视觉设计出来后，前端写样式，写完样式链接到套好的模板？

参考了35王少峰的四方框架，他把结构层单独拿出来，然后画格子。 我觉得这个思路很好，布局是属于视觉的，应该先定义好，免得写样式的时候再来修改结构。我参考了一下他的思想，并结合自己的理解，谈谈布局层的构思。

2、布局

我们用r表示行，并且清除浮动。为每一行添加索引，方便每一行间距的调节，如图1所示。

图1

用c表示列，并且左浮动。为每一列添加索引，方便定义宽度和间距。我们把r2分成三列，如图2所示。

图2

我们再把r2c2分成两行，如图3所示。

图3

我们再把r2c2r1分成两列，如图4所示。

图4

3、总结

这样结构可以无限制的分下去，并且每一格都有唯一的索引，可以方便的来定义每一格的布局。思路刚成型，还得拿几个项目来尝试看看是否可行。