Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

When we first began to learn to draw pages, we must be directly holding the design draft through HTML, CSS began to draw, in fact, this is not right.

First of all, we should carry out the overall conception of the design draft, observe and find some common places or points, thinking clearly, and then the corresponding code writing, which can greatly improve our work efficiency.

Extract reusable common styles

  • First we should analyze the design draft and see if there are any patterns we can reuse. This is the base layer that we talked about earlier.

  • Introduce the component libraries you need, such as Element, Antd, etc., and modify the corresponding UI library based on your design draft.

  • You can usually start by adding some basic common attributes to the outermost HTML tag.

html { background-color: #eee; // Set the default background color to #333; // Set the default font color}Copy the code
  • Also according to their own design draft, set the default P tag line height
p{ margin: 0; The line - height: 1.5; }Copy the code
  • Img tag processing throughVertical - align: middleThe gaps in the picture can be processed accordingly.
img {
  width: 100%;
  vertical-align: middle;
}
Copy the code

It is important to note that these styles are global and apply to the corresponding tags in all pages.

Well, that’s all for today. You are still the best today. Bye!!!!!!