CSS 页面设计稿构思与实现(一)
前言
在我们刚开始学习绘制页面的时候,想必都是直接拿着设计稿通过 HTML,css 就开始画了,其实这样是不对的。
首先我们应该对着设计稿进行整体的构思,观察并发现其中一些共通的地方或要点,思路捋清楚之后,再进行相应代码的编写,这样很大程度上能提高我们的工作效率。
抽出可复用的公共样式
首先我们应该分析设计稿观察有没有一些我们可以复用的样式。这也就是我们之前说到的 base 层。
引入你所需要的组件库,比如 Element,Antd 等,根据你的设计稿可以在相应 UI 库的基础上进行相应的修改。
一般上我们可以先通过在最外层的 html 标签上,添加一些基础公用属性。
复制代码
还有根据自己的设计稿,设置默认的 p 标签行高
复制代码
img 标签的处理,通过
vertical-align:middle
可以对图片的空隙进行相应的处理。
复制代码
需要注意的是,这些样式是全局的,作用的是所有页面中相应的标签,所以一定要考考考虑,找到真正全局的样式。
好,今天就到这里了,今天努力的你依然是最棒的。加油,加油,你最棒!加油,加油,你最强!哦豁,Bye Bye!!!
评论