Dragon

简约移动端登录注册页面源码

2022-10-23 19:22 8 抢沙发 深云太熹中文网

一款简约的移动端登陆和注册页面源码。页面代码部分做了充分的注释说明。

效果图

简约移动端登录注册页面源码

源码分享

HTML 部分

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>【HTML+CSS】实现移动端高级简约的登录注册界面</title>
    <link rel="stylesheet" href="./css.css">
</head>

<body>
    <div class="box">
        <!-- 登录 -->
        <div class="login">
            <div class="login_top">
                <img src="./logo-pang.png" alt="头像">
                <br>
                <h2>欢 迎 登 陆</h2>
            </div>
            <div class="login_bottom">
                <form>
                    <!-- 邮箱/手机号输入框 -->
                    <input type="text" class="input" placeholder="邮箱或手机号码" />
                    <!-- 密码输入框 -->
                    <input type="Password" class="input" placeholder="密码" />
                </form>
                <!-- 确认框/忘记密码 -->
                <p>
                    <input type="checkbox">
                    <span>我同意遵守规则</span>
                    <a href="#">忘记密码</a>
                </p>
                <!-- 登录按钮 -->
                <button>登 陆</button>
                <p>
                    <span>首次来访?</span>
                    <a href="#">新用户注册</a>
                </p>
            </div>
        </div>
        <!-- 注册 -->
        <div class="register">
            <div class="register_top">
                <div>+</div>
                <h2>欢 迎 注 册</h2>
            </div>
            <div class="register_bottom">
                <form>
                    <!-- 邮箱/手机号输入框 -->
                    <input type="text" class="input" placeholder="邮箱或手机号码" />
                    <!-- 密码输入框 -->
                    <input type="Password" class="input" placeholder="密码" />
                    <!-- 重复密码输入框 -->
                    <input type="Password" class="input" placeholder="再次输入密码" />
                </form>
                <!-- 注册按钮 -->
                <button>注 册</button>
                <p>
                    <span>您已经有账号?</span>
                    <a href="#">请登陆</a>
                </p>
            </div>
        </div>
    </div>
</body>

</html>

CSS 部分

去当前内容已被隐藏,您需要评论才能查看评论

「点点赞赏,手留余香」

还没有人赞赏,快来当第一个赞赏的人吧!

弥雅给弥雅打赏
×
予人玫瑰,手有余香
  • 2
  • 5
  • 15
  • 20
  • 25
5
支付

本文来自投稿,不代表深云太熹中文网立场,版权归原作者所有,欢迎分享本文,转载请保留出处!

2022-10-21

2022-10-23

发表评论

表情 格式 链接 私密 签到

扫一扫二维码分享