MUI登录页面的美化（2）

布满荆棘的人生 2022-09-05 04:15 183阅读 0赞

**本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。**

在此之前我已写过一部分美化操作，本篇文章主要讲的是MUI登录页面的其他美化。

# 问题描述 #

在将主要的内容构造之后，如今思考如何实现将页面进行美化是软件的一个基本阶段。

![b75dfca89a4eecbab082fceb647072c2.png][]

# 步骤描述 #

（1）按钮美化

第一种：style形式。之间在head之间输入以下代码即可。

![cdfec87712a4572f987d197e68c47b08.png][]

代码清单 1

![a89d9ab5ddb542f0f6903708660651cf.png][]

![a15106bcbbf8bb91c284ef69dce12146.png][]

第二种：css形式。在css目录中新建一个style.css文件夹；在文件中head之间引用以下代码；

代码清单 2

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;"> <p>&lt;link rel = “stylesheet”&nbsp;herf = “css/style.css”/&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

再输入以下代码清单1中代码即可。

（2）间距优化

根据APP间距与边距设计规范来进行优化。注意的是，不同手机尺寸可能有所不同。

若要做出所有框在中间的效果则可借助<br />调整。例如本篇文章在手机/邮箱/用户的相关代码前加<br />：

代码清单 3

![4c4d0a4fddeba5c3d6f9b41e8d568d66.png][]

框与框之间可用top、margin-top设置值调整。

代码清单 4

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;"> <p>.mui-card{ </p> <p>top: -40px;/*可正可负，根据实际调整*/</p> <p>}</p> <p>或</p> <p>/*相隔距离*/</p> <p>.public-margin-top{ </p> <p>margin-top:20px;</p> <p>}</p> </td> 
  </tr> 
 </tbody> 
</table>

# 结语 #

本篇文章主要继续讲的是MUI登录页面的其他方面的美化，在写代码的过程中发现有不同的方式可以进行实现。美化的代码不仅仅只有这些，还有许多其他的方法可以进行调整，希望在一次次操作实践中，找到不同的方法。

实习编辑：李欣容

稿件来源：深度学习与文旅应用实验室（DLETA）

[b75dfca89a4eecbab082fceb647072c2.png]: /images/20220829/6a321e5c300d4e3a99b2b76b1cfa9c46.png
[cdfec87712a4572f987d197e68c47b08.png]: /images/20220829/46c5bf124a3545f787daa8f9da6834d6.png
[a89d9ab5ddb542f0f6903708660651cf.png]: /images/20220829/3fa61a5779e94a7bb1e259c1d2bdf832.png
[a15106bcbbf8bb91c284ef69dce12146.png]: /images/20220829/89c8190553ee4855ba871d1b4eca8753.png
[4c4d0a4fddeba5c3d6f9b41e8d568d66.png]: /images/20220829/64864a91b0314c779af58554945f9615.png