emmm ，小程序的期中考试，就是实现模仿京东做一个登录的页面，本来挺简单的，但是可能是自己很久没有用样式修饰，一开始做很丑，而且对小程序与前端里面css有点区别，没有掌握好。同时也反映自己css3样式学的非常不好。遇到以下问题：
1、Input的border就是显示不出来
原因:如果input在一个view里面，那么用 .class input{}这样去写input的样式，我直接用input{}的样式就是不行，导致后面浪费时间。
2、在文本框里面加switch开关
本来，<input><switch></switch></input>这样子加switch开关，但是一直显示不出来，还以为这样不行，但是正常很多网页都是这样的。原因是switch的位置被input覆盖了，要设置好位置。把Input设置成相对位置relatives。然后switch 设置成绝对位置。就可以。
3、文字下划线是颜色跟随文字变化，如果想不一样，可以设置文字下边界线（忘记了，好像可以）。
虽然这个页面挺简单的，但是要跟老师做的一样还是很困难的。
实现效果如下图：
代码：
wxml:
<!--index.wxml-->
<view class="v1">
<input name="username" type="text" placeholder="请设置4-20位用户名"></input>
</view>
<view class='v2'>
<input name="password" type="text" placeholder="请设置6-20位登陆密码">
<switch checked></switch>
</input>
</view>
<view class="v1">
<input name="gongshang" type="text" placeholder="请填写工商局注册名称"></input>
</view>
<view class="v1">
<input name="lianxiname" type="text" placeholder="请输入联系人姓名"></input>
</view>
<view class='v3'>
<input name="phone" type="text" placeholder="请输入手机号"></input>
<button size='mini'>发送验证码</button>
</view>
<view class='v1'>
<input name="yanzheng" type="text" placeholder="短信验证码"></input>
</view>
<button form-type='submit'>注册</button>
<view class='v5'>注册即视为同意<text class='tx' style='color:red;text-decoration:underline'>《京东用户注册协议》</text>
</view>
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个积分，但是我没有办法，设置不了下载积分！！！！！！》
