使用场景:
接到任务,需要在WEB ERP系统上,实现一个核对平台与ERP订单数量的问题,
大概的结构是,左边是显示ERP订单数据,右边是显示平台订单数据,显示的效果如下:
ERP订单 | 空隙 | 平台订单 |
数据项一 | 数据项一 | |
数据项二 | 数据项二 | |
数据项三 | 数据项二 | |
保存按钮 |
通过核对两边数据,进行相应的保存操作。
那么我们如何通过HTML CSS实现这样的显示呢?
首先,说CSS,要实现这样的显示,我们可以用float来处理。
我们共定义三个样式:
1)per70 表示 70%左右的宽度比例。
2)per1 表示 表示1%的空隙,宽度比例。
3)per30 表示 30%左右的宽度比例。
代码如下:
这样,就可以让它把一定的比例分左右两边显示。
接着,我们写HTML,只需要用DIV加上相应的样式即可,如下图。
记住:最后还要加个样式.cl_b{clear:both},把左右两侧浮动取消,这样就可以把“保存”按钮摆在两者的下面了。
以上是一个比较简单的显示。
接下来,我们再看一个稍为数据情况多一点的。这个也是实际工作中涉及的业务:
业务是这样的:我们需要在左侧显示多组数据,在右侧显示一组数据,比如,我们需要在左侧显示ERP发货情况
ERP换货情况,ERP退货情况;右侧不变,仍然显示平台订单情况。要实现的表格如下:
ERP订单 | 空隙 | 平台订单 |
数据项一 | 数据项一 | |
ERP订单 | ||
数据项一 | ||
ERP订单 | ||
数据项一 | ||
保存按钮 |
要实现上面的表格也很简单:
左侧显示三组数组,右侧不变,CSS也可以不变
原结构保存不变,只是把原来左侧的内容,变成三个DIV,放在per30里面即可。
好了,分享到此,大家有任何想法,都可留言,一起学习。