本文实例为大家分享了微信小程序实现登录界面的具体代码，供大家参考，具体内容如下注：这里使用的是原生微信小程序使用wxss和wxml index.wxml文件中代码
index.wxss样式文件代码（使用绝对布局和相对布局）
/* 最大的父元素 */.v1{display: block;position:absolute;height: 100%;width: 100%;background: #356363;/* 换图片 */
}/* 白色区域 */.v1 .v2{position: relative;margin-top: 150rpx;left: 100rpx;width: 545rpx;height: 750rpx;background: #FFFFFF;border-radius: 50rpx;}/* 白色区域内的登录文本 */.v1 .v2 .dltext{margin-top: 50rpx;position: absolute;margin-left:80rpx;width: 150rpx;height: 100rpx;font-size: 60rpx;font-family: Helvetica;color: #000000;line-height: 100rpx;letter-spacing: 2rpx;}/* 手机图片+输入框+下划线的父容器view */.v1 .v2 .phoneCs{margin-top: 200rpx;margin-left: 35rpx;position: absolute;display: flex;width:450rpx ;height: 80rpx ;border-bottom: 3rpx solid rgb(58, 57, 57);}/* 手机图标 */.v1 .v2 .phoneCs .ph{margin-top: 5rpx;margin-left: 30rpx;width: 55rpx;height: 55rpx;}/* 手机号输入框 */.v1 .v2 .phoneCs input{width: 200rpx;font-size: 25rpx ;margin-top: 15rpx;margin-left: 30rpx;}/* 密码图标+输入框+小眼睛图标+下划线父容器view */.v1 .v2 .passwordCs{margin-top: 400rpx;margin-left: 35rpx;position: absolute;display: flex;width:450rpx ;height: 80rpx ;border-bottom: 3rpx solid rgb(58, 57, 57);}/* 密码图标 */.v1 .v2 .passwordCs .ps{margin-top: 5rpx;margin-left: 30rpx;width: 55rpx;height: 55rpx;}/* 眼睛 图标*/.v1 .v2 .passwordCs .eye{margin-top: 5rpx;margin-left: 65rpx;width: 55rpx;height: 55rpx;}/* 密码输入框 */.v1 .v2 .passwordCs input{width: 200rpx;font-size: 25rpx ;margin-top: 15rpx;margin-left: 30rpx;}/* 注册+忘记密码父容器 */.v1 .v2 .zhuce{font-size: 25rpx;margin-left: 85rpx;width: 370rpx;margin-top: 540rpx;position: absolute;display: flex;justify-content: space-between;}/* 登录按钮容器view */.v1 .v2 .denglu{width: 350rpx;height: 50rpx;position: absolute;margin-top: 600rpx;margin-left: 85rpx;
}/* 登录按钮 */.v1 .v2 .denglu button{padding: 0rpx;line-height: 50rpx;font-size: 25rpx;width: 100%;height: 100%;border-radius: 30rpx;}/* 复选框+协议文字容器view */.v1 .v2 .xieyi{margin-left: 10rpx;margin-top: 680rpx;width: 400rpx;display: flex;position: absolute;}/* 复选框 */.v1 .v2 .xieyi .isXY{margin-left: 85rpx;/* 修改复选框的大小 */ transform:scale(.6);}/* 协议文本 */.v1 .v2 .xieyi .text-xy{margin-left: 10rpx;margin-top: 20rpx;color: #000000;font-size:18rpx;}/* 提示文本 */.v3{padding-left: 100rpx;display: flex;position: relative;width: 100%;height: 60rpx;padding-top: 50rpx;}.v3 .line{margin-left: 5rpx;margin-top: 18rpx;width: 120rpx;height: 3rpx;background-color:#FFFFFF;}.v3 .lText{color: #FFFFFF;font-size: 25rpx;}/* qq wx wb */.qwwIcon{margin-top: 100rpx;padding-top: 50rpx;position: relative;display: flex;width: 100%;height: 150rpx;}.qwwIcon image{padding-left: 120rpx;width: 80rpx;height: 80rpx;}结果图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:微信小程序登录与注册功能的实现详解微信小程序实现登录注册功能详解微信小程序入门从这里出发（登录注册、开发工具、文件及结构介绍）
微信小程序实现注册登录功能(表单校验、错误提示)微信小程序+云开发实现欢迎登录注册微信小程序登录态和检验注册过没的app.js写法微信小程序实现登录注册tab切换效果微信小程序实现登录界面微信小程序实现登录注册界面