CSS - 编码实现UI的流程与注意事项 - 学习/实践

1.应用场景

主要用于思考总结, 如何快速高效地实现UI布局效果, 避免走弯路或者少走弯路. 给自己预留一些事件放在更有意义的事情上.

2.学习/操作

1.文档阅读

TBD

2.个人思考整理输出 //供参考

实现UI, 忌讳的就是没有将UI分割, 而且作为一个整体, 哪里不对, 调哪里, 看似没问题, 实际上越到后面, 越发感到崩溃. 最后的结果很可能是就是重构UI实现代码, 甚至完全重写.

实现UI的流程:

1.首先认真查看设计稿, 按照设计稿, 将页面UI从上往下, 分割成多个容器.

扫描二维码关注公众号，回复： 12889228 查看本文章

2.每个容器中, 再次分割成多个容器, 如此进行下去, 分割粒度要合适, 不要太大, 也不要太细.

1, 2步骤以下方UI设计稿为例, 供参考

3.上面步骤进行完毕, 接下就是编码实现过程.参见 4---end

插入:

编码阶段, 实现UI通常有两种方式,

一.可以借助已有的第三方UI库, 如bootstrap, ant-design (pro) braid等, 快速实现UI, 有时候这些UI已经做了响应式布局. 拿来就用, 不合适的地方做调整即可.

二.完全自己写UI, 响应式布局也要自己写, 一般情况, 相当于写两套UI(PC与Mobile)

4.定义一个根容器, 比如<div id="app"></div>, 同时将border显示出来[背景色也可以, 个人选择].

5.依然是从上往下逐步实现UI. 同样是使用border, 将各个容器标记出来, 便于一眼看到布局分布, 快速进行下一步ui布局实现,

以及做UI调整时, 也会很方便.

Note:

实现UI的关键点, 就是掌握好盒子模型, 将区域划分清楚, 以及不需要容器之间耦合, 做到互不干涉.

在实现ui时, 尽可能都留有margin, padding值, 充分使用盒子模型的margin, padding属性.

6.至于响应式布局, 如上所说,可以借助第三方UI库, 也可以自己自行布局, 而且通常情况下, 如果有专业UI的话, 并不会和第三方UI库样式直接吻合,还是要做调整, 如果调整幅度太大, 建议还是自行编写,反而更好控制.

7.上面步骤层层下来, 基本上UI能比较轻松实现, 当然你要掌握CSS相关技能, 不然也是很折磨人的.

附上[部分]最终效果:

使用braid UI + UI调整.

key points:

分割 + 边界化 + 盒子模型 (+ 响应式布局区分)

后续补充

...

3.问题/补充

TBD

4.参考

TBD

后续补充

...