一，项目结构目录；

项目结构

在项目resources下的2个文件，templates里面是页面，除了templates目录下的index.html，其他的都根据项目的几大模块分别写成了不同文件夹，文件夹里面含有的页面就是模块里面包含的页面及弹窗。在static文件下的css文件夹里有对应templates文件夹里面的各个页面需要的css文件。其他的有js文件夹跟images文件夹与引用的各种框架/插件之类。

二，各种元素的命名；

a,文件夹与文件的命名：小写英文字母加下划线进行命名不同单词直接用下划线链接；如果是弹窗文件在文件名的最后加"_pop"方便识别；所有的图片用英文加下划线加数字的方式进行命名；

b,html页面元素命名：ID命名用首字母大写加驼峰写法命名，class类名用英文(简称)加数字加“-”的命名方式进行；

三，各种元素的布局与定位；

a,表单元素：

表单

由于layui.js不支持自定义的表单长度，我们这里要改写layui源码，我们在相应的页面样式文件里面写上Layui里面相应的css代码将源码覆盖掉。(由于css覆盖方式是后面的代码优先级高于前面的代码所以我们在Html里面引用css文件的时候要先引用layui.css后引用页面对应的自有css文件)。例如图上的表单样式。我们主要利用了修改以下代码来覆盖原有样式。

.layui-form-label{
    width: 160px;
}
.layui-input-block{
    margin-left: 160px;
}
.details > .layui-form-item{
    width: 49%;
    display: inline-block;
    margin: 16px 0 8px 0;
}

b,table布局：

table

由于laui的table组件里面不包含各种筛选/搜索框。我们也不能直接把筛选/搜索框写到table里面去。所以我们采用把筛选框写到与table同一层级容器里，利用绝对定位放到table页的右上角，right与top值需要我们手动调节。
由于UI需要，每一个未全屏宽度的table外面加一层容器：

未全屏(左边有布局的元素)的table

<div class="table-box">
    <table id="demo" lay-filter="demo"></table>
 </div>

.table-box{
    padding:16px;
}

c,flex布局；
由于浮动属性(float)容易产生元素塌陷与错位，或者容易忘记清除浮动导致后面的一连串样式错误。我们尽可能的多利用flex布局来代替浮动元素；
flex布局用的最多的是父元素内部2个子元素需要左右分开对齐的情况，与竖直居中。

flex布局实例，代替原有的左右float

.box{
display:flex;
align-items: center;
justify-content: center;
}

关于flex布局可以看http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html这篇文章