MUI登录页面的美化(2)

简介: MUI登录页面的美化(2)

引言

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


问题描述

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

算法描述

(1)按钮美化

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


代码清单 1

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



代码清单2

<link rel = stylesheetherf = css/style.css/>

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


(2)间距优化

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

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

代码清单3

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

代码清单4

.mui-card{

top: -40px;/*可正可负,根据实际调整*/

}

/*相隔距离*/

.public-margin-top{

margin-top:20px;

}


结语

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




目录
相关文章
|
2天前
|
前端开发 JavaScript UED
页面美化
页面美化
34 2
|
2天前
|
区块链
html网页title旁边的小图标制作教程
html网页title旁边的小图标制作教程
|
2天前
|
JavaScript
Vue 中关于页面全屏登录页面无法全屏解决
Vue 中关于页面全屏登录页面无法全屏解决
18 2
|
2天前
六个好看实用的html简单登录页面源码
六个好看实用的html简单登录页面源码
40 0
六个好看实用的html简单登录页面源码
|
9月前
|
前端开发
原来CSS也能写出这么漂亮的登录页面,分享一个纯CSS样式Login页面
原来CSS也能写出这么漂亮的登录页面,分享一个纯CSS样式Login页面
139 0
|
11月前
|
前端开发 JavaScript Go
原来CSS的登录界面可以变得这么好看
原来CSS的登录界面可以变得这么好看
144 0
使用elementUI制作简易登录页面
使用elementUI制作简易登录页面
241 0
|
前端开发 开发者
首页-导航条 |学习笔记
快速学习 首页-导航条
75 0
首页-导航条 |学习笔记
|
JavaScript
重读vue电商网站4之登录页面总结使用 iconfont 给输入框添加图标
重读vue电商网站4之登录页面总结使用 iconfont 给输入框添加图标
122 0
重读vue电商网站4之登录页面总结使用 iconfont 给输入框添加图标
|
前端开发 JavaScript
界面按钮样式丑?不可能!16款css实现炫酷按钮
界面按钮样式丑?不可能!16款css实现炫酷按钮
286 0
界面按钮样式丑?不可能!16款css实现炫酷按钮