模仿京东登录页面——小程序

emmm ，小程序的期中考试，就是实现模仿京东做一个登录的页面，本来挺简单的，但是可能是自己很久没有用样式修饰，一开始做很丑，而且对小程序与前端里面css有点区别，没有掌握好。同时也反映自己css3样式学的非常不好。遇到以下问题：

1、Input的就是显示不出来

原因:如果input在一个view里面，那么用 .class input{}这样去写input的样式，我直接用input{}的样式就是不行，导致后面浪费时间。

2、在文本框里面加开关

本来，这样子加开关，但是一直显示不出来，还以为这样不行，但是正常很多网页都是这样的。原因是的位置被input覆盖了，要设置好位置。把Input设置成相对位置。然后 设置成绝对位置。就可以。

3、文字下划线是颜色跟随文字变化，如果想不一样，可以设置文字下边界线（忘记了，好像可以）。

虽然这个页面挺简单的，但是要跟老师做的一样还是很困难的。

实现效果如下图：

代码：

wxml:

发送验证码




注册
注册即视为同意《京东用户注册协议》

wxss:

.v1{
  border: 1px solid gray;
  padding:3%;
  margin: 10px 20px;
   width: 250px
}
.v2 input{
  border: 1px solid gray;
  padding: 3%;
   width: 250px;
   margin-left: 20px;
   position: relative
}
.v2 switch{
  position: absolute;
  margin-left: 200px;
  top: 2px
}
.v3{
  display: flex;
  flex-direction: row;
  justify-content: center;
   
}
.v3 input{
   border: 1px solid gray;
    margin-left: 20px;
    width: 160px;
    height: 35px
}
.v3 button{
  height:35px;
  margin-right: 35px
}
.v4{
    padding: 3%;
}
.button{
   border: 1px solid gray;
}

剩下的就在app.json里面设置导航栏文字就行了。

《完整代码可以看我的资源，虽然需要5个积分，但是我没有办法，设置不了下载积分！！！！！！》