浅析小米登录/注册页面（原生）

最新推荐文章于 2023-10-27 21:28:45 发布

原创

最新推荐文章于 2023-10-27 21:28:45 发布 · 8.5k 阅读

141 ·

CC 4.0 BY-SA版权

文章标签：

#python #pandas #numpy

本文详细介绍了小米登录注册页面的设计与实现过程，包括整体布局、表单模块制作、二维码交互及页面间的切换效果。

前言

本篇主要介绍小米注册登录页面的一些js布局和书写，将整体的html布局发出来是方便大家对照类名和css。希望可以得到大家的意见，共同勉励。

一、登录/注册页面布局

整体HTML布局：

           <!-- 表单 -->
            <div class="menu">
                <div class="iconfont erweima">&#xe604;</div>
                <div class="login_prompt">扫描登录</div>
                <div class="login_hd">
                    <a href="javascript:;" class="current">登录</a>
                    <a href="javascript:;">注册</a>
                </div>
                <div class="box">
                    <!-- 登录 -->
                    <div class="login">
                        <div class="txt_box">
                            <span class="txt_big">邮箱/手机号码/小米ID</span>
                            <input type="text" class="txt">
                            <p class="txt_error">请输入账号</p>
                        </div>
                        <div class="psd_box">
                            <span class="psd_big">密码</span>
                            <input type="password" class="psd">
                            <p class="psd_error">请输入登录密码</p>
                            <div class="psd_btn iconfont">&#xe60c;</div>
                        </div>
                        <div href="javascript:;" class="check_box">
                            <label for="check" class="iconfont check"></label>
                            <input type="checkbox" id="check">
                            <span>已阅读并同意小米帐号</span> <a href="javascript:;">用户协议</a> <span>和 </span><a href="javascript:;">隐私政策</a>
                        </div>
                        <div class="check_no">
                            <img src="img/loading/point.png">
                            <span>请你同意用户条款</span>
                        </div>
                        <div class="login_btn">
                            登录
                        </div>
                        <div class="forget">
                            <a href="javascrpit:;">忘记密码？</a>
                            <a href="javascrpit:;">手机号登录</a>
                        </div>
                        <div class="login_way">
                            <p>其他方式登录</p>
                            <a href="javascript:;"><