习惯养成之界面优化

程序员文章站 2022-07-14 23:02:33

...

文章目录

习惯养成之界面优化

背景
登陆界面
其他界面

背景
按钮
关于

总结

习惯养成之界面优化

背景

早起打卡小程序的基本功能已经陆续实现，开始优化界面

登陆界面

依据早起的主题找到了太阳作为小程序登陆界面背景，将长方形按钮改成圆形，具体涉及代码比较简单

wxss中将button的长宽改成一致大小，然后改变其margin使按钮处于合适的位置

wxml中将文字改为登陆（比较美观）

最后的loginer中wxss代码为

  button{
  margin-top: 440rpx;
  margin-left:200rpx;
  position: absolute;

  left: 0;

  color: white;

  background-color:  #ffbc04;

  right: 0;

  font-size: 35px;

  text-align: center;    

  width: 140px;

  height: 140px;      

  border-radius: 250px;    

}

.back_img{

  height: 100%;

  background-size: contain;

  width: 100%;

  background-image: url(https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1336687944,3674562065&fm=15&gp=0.jpg);

}