ImgCook实现页面弹性布局

                                                                                             IMGCOOK调整页面文档

  1. 上传文件(.sketch/.psd/.jpg/.png)以.Sketch文件为例

            ImgCook实现页面弹性布局

  1. 选择点击导出
  2. 编辑器介绍
  3. ImgCook实现页面弹性布局
  4. 页面组件调整
  5.      1.删除组件
  6. ImgCook实现页面弹性布局
  7. 添加组件
  8. ImgCook实现页面弹性布局
  9. 修改组件属性(重点)
  10.                       (1)自适应  布局模式选择弹性布局
  11. ImgCook实现页面弹性布局
  12. 让页面在画布中置顶   去除margin-to-顶部外边距(设置为0)
  13. ImgCook实现页面弹性布局
  14. 设置画布尺寸宽度为100%  高度为100%
  15. ImgCook实现页面弹性布局
  16. 应用设置 设计稿宽度和布局视口宽度  都为100%
  17. ImgCook实现页面弹性布局
  18. 设置 div宽度(点开div宽无数值   则可改可不改)修改只针对div组件

  19. ImgCook实现页面弹性布局

  20. 全部改完  根据自己对页面的需求再调整css属性
  21. ImgCook实现页面弹性布局
  22. 保存-->点击代码 -->选择H5开发新规范(动态)
  23. ImgCook实现页面弹性布局
  24. 保存并导出   让我们来看一下效果

  25. ImgCook实现页面弹性布局

  26. 发现有白边空隙(这是由于默认css导致)

    解决方案

    打开style.css文件   在首行加入

    * {

    padding: 0;

    margin: 0;

    }  

    即可解决问题(PC端口)

  27. ImgCook实现页面弹性布局

  28. (移动端)

  29. ImgCook实现页面弹性布局