Recently, I used vue framework + Element-UI to build a website and improved the page according to the design drawing of AI files. As a small thing, I could write a page or set up a class at school and never liked to spend more time to deduct pixels or refine my CSS. So write this article to record their understanding of the UI framework, the process of the CSS, to encourage their own in the front of the road to continue to move forward.

1. Look at the design first

 <button style="width: 155px; height: 50px; font-size: 21px; color: #fff; background-color: #1E88E5; border-raduis: 5px;"> send < / button >Copy the code

But this thing came out

Ugly as it is, this is too far from the original design, which will be seized by pixel police…

Then I had a brainwave ah, not hungry me this good thing? Arrange it, search, search, and finally find a match,

<el-button type="primary"</el-button>Copy the code

But ha, the gap is still a bit wide. Take your time

<el-button type="primary" style="width: 155px; height: 50px; letter-spacing: 10px; font-size: 21px;"> send < / el - button >Copy the code

.el-button--primary{
    color: #fff;
    background-color: #1E88E5;
    border-color: #1E88E5;
  }
  .el-button--primary:hover{
    background-color: #1E88E5;
    border-color: #1E88E5;  
  }
  .el-button--primary:focus{
    background-color: #1E88E5;
    border-color: #1E88E5;  
  }
Copy the code

Hee hee, almost