1.应用场景
主要用于思考总结, 如何快速高效地实现UI布局效果, 避免走弯路或者少走弯路. 给自己预留一些事件放在更有意义的事情上. |
2.学习/操作
1.文档阅读 TBD 2.个人思考整理输出 //供参考 实现UI, 忌讳的就是没有将UI分割, 而且作为一个整体, 哪里不对, 调哪里, 看似没问题, 实际上越到后面, 越发感到崩溃. 最后的结果很可能是就是重构UI实现代码, 甚至完全重写. 实现UI的流程: 1.首先认真查看设计稿, 按照设计稿, 将页面UI从上往下, 分割成多个容器. 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库样式直接吻合,还是要做调整, 如果调整幅度太大, 建议还是自行编写,反而更好控制. 响应式布局: https://blog.csdn.net/william_n/article/details/108678426 7.上面步骤层层下来, 基本上UI能比较轻松实现, 当然你要掌握CSS相关技能, 不然也是很折磨人的. https://blog.csdn.net/william_n/article/details/104017944 //css资源 附上[部分]最终效果: 使用braid UI + UI调整. key points: 分割 + 边界化 + 盒子模型 (+ 响应式布局区分) 后续补充 ... |
3.问题/补充
TBD |
4.参考
TBD |
后续补充
...