前言

在我们刚开始学习绘制页面的时候，想必都是直接拿着设计稿通过 HTML，css 就开始画了，其实这样是不对的。

首先我们应该对着设计稿进行整体的构思，观察并发现其中一些共通的地方或要点，思路捋清楚之后，再进行相应代码的编写，这样很大程度上能提高我们的工作效率。

抽出可复用的公共样式

• 首先我们应该分析设计稿观察有没有一些我们可以复用的样式。这也就是我们之前说到的 base 层。

• 引入你所需要的组件库，比如 Element，Antd 等，根据你的设计稿可以在相应 UI 库的基础上进行相应的修改。

• 一般上我们可以先通过在最外层的 html 标签上，添加一些基础公用属性。

html {  background-color: #eee; // 设置默认的背景色  color: #333; // 设置默认的字体颜色}

• 还有根据自己的设计稿，设置默认的 p 标签行高

p{  margin: 0;  line-height: 1.5;}

• img 标签的处理，通过vertical-align：middle可以对图片的空隙进行相应的处理。

img {  width: 100%;  vertical-align: middle;}

需要注意的是，这些样式是全局的，作用的是所有页面中相应的标签，所以一定要考考考虑，找到真正全局的样式。

好，今天就到这里了，今天努力的你依然是最棒的。加油，加油，你最棒！加油，加油，你最强！哦豁，Bye Bye！！！