微信登录界面

程序员小谢~

于 2024-07-25 23:23:49 发布

阅读量508

点赞数 1

文章标签：微信

本文链接：https://blog.csdn.net/X11970606/article/details/140702161

版权

最近学习了前端html和css样式，因此想自己动手写一个微信登录界面，大致内容如下图所示：

大致样式如上图，其中如果空密码点登录，会弹窗出来提示，跟微信目前的实现是一样的：

废话不多说，请看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form</title>
    <style>
        body {
            font-family: "Microsoft YaHei", "微软雅黑", "Arial", sans-serif;
            background-color:  burlywood;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            
        }

        .avatar {
            display: block;
            width: 70px; /* 头像的直径 */
            height: 70px;
            margin: 20px auto; /* 上下外边距，左右自动居中 */
            margin-top: 80px;
            margin-bottom: 10px;
            background-image: url('https://pic-image.yesky.com/uploadImages/newPic/2023/198/25/P8W8I6VK68VQ.png'); /* 替换为你的头像图片URL */
            background-size: cover; /* 保证图片始终覆盖整个div */
        }

        .nickname {
            /* 昵称样式 */
            display: block;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            margin-top: 2px; /* 头像与昵称之间的间距 */
            background: #acacac; /* 白色背景 */
            -webkit-background-clip: text; /* 将背景色应用于文本 */
            -webkit-text-fill-color: transparent; /* 文本颜色设为透明，以显示背景色 */
        }

        .login-container {
            background-color: #111111;
            position: relative;
            padding: 20px;
            width: 300px;
            height: 600px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .form-group {
            display: flex; /* 使用Flexbox布局 */
            align-items: center; /* 垂直居中 */
            margin-bottom: 5px;
            margin-top: 40px;
        }

        .form-group label {
            flex: 1; /* 占据可用空间的1份（与输入框平分空间） */
            margin-right: 10px; /* 与输入框的间距 */
            color: #cfcfcf;
            font-size: 14px;
        }

        .form-group input[type="password"] {
            background-color: #111111; /* 背景色为黑色 */
            color: white; /* 文本颜色（虽然对于密码输入框来说不可见） */
            border: none; /* 无边框 */
            flex: 2; /* 占据可用空间的2份（比标签多） */
            padding: 10px;
            outline: none; /* 去掉轮廓线 */
            box-sizing: border-box;
        }

        .sms-login {
            /* 短信验证码登录文字样式 */
            color: #7c8191; /* 淡蓝色文字 */
            font-size: 12px; /* 你可以根据需要调整字体大小 */
           
        }

        .login-btn {
            display: block;
            width: 50%;
            padding: 10px;
            background-color: #05c160;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            text-align: center;
            margin-top: 40px;
            margin: 40px auto 0; /* 上下外边距可以按需调整，左右设置为auto以居中 */
        }

        .login-btn:hover {
            background-color: #45a049;
        }
        .word-list {
            margin-top: 200px;
            text-align: center;
        }
        .word-list .word {
            font-family: Arial, sans-serif; /* 指定字体 */
            font-size: 12px; /* 指定字体大小 */
            color: #7c8191; /* 指定字体颜色 */
            /* 其他样式... */
        }

        .word-list .word:not(:last-child)::after {
            content: " | ";
            /* 其他样式，如颜色、字体大小等 */
            color: #1b1b1b; /* 示例：黑色 */
            font-size: 16px; /* 示例：字体大小为16px */
            margin-left: 5px; /* 左侧添加一些间距 */
            margin-right: 5px; /* 右侧也可以添加一些间距，以平衡视觉效果 */
        }

        /* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: absolute; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 10px; /* Location of the box */
  left: 8%;
  right: 8%;
  top: 50%;
  width: 80%; /* Full width */
  height: 20%; /* Full height */
  text-align: center; /* Centered text/links */
  
  border-radius: 5%;
  background-color: #2c2c2c; /* Fallback color */
  
}

#loginfaild{
    font-weight: bold;
    letter-spacing: 2px;
    color: #d5d5d5;
    font-size: 14px;
}

#loginmessage{
   
    letter-spacing: 1px;
    color: #979797;
    font-size: 14px;
    
}

.confirm-btn{
    background-color: #2c2c2c;
    border: none;
    font-weight: bolder;
    width: 100%;
    height: 30px;
    color: #7c8ca9;
}

    </style>
</head>
<body>

<div class="login-container">
    <!--<h2>QQ登录</h2>-->
    <div class="avatar"></div> <!-- 在这里添加头像 -->
    <div class="nickname">180 **** 8806</div> <!-- 昵称 -->
    <div class="form-group">
        <label for="password">密码</label>
        <input type="password" id="password" placeholder="请填写微信密码">
    </div>
    <hr style="margin-top: 6px; border: none; height: 1px; background-color: #1a1a1a;">
    <div class="sms-login">用短信验证码登录</div>
    <button type="button" class="login-btn" onclick="login()">登录</button>
    <div class="error-message" id="errorMessage"></div>
    <div class="word-list">
        <span class="word">找回密码</span>
        <span class="word">紧急冻结</span>
        <span class="word">更多</span>
    </div>
    <!-- Modal -->
    <div id="myModal" class="modal">
        <p id="loginfaild">登录失败</p>
        <p id="loginmessage">密码不能为空，请输入密码</p>
        <hr style="margin-top: 6px; border: none; height: 1px; background-color: #353535;">
        <button type="button" class="confirm-btn" id="close-modal">确定</button>
       
    </div>
</div>

<script>
    function login() {
        // 清除之前的错误信息
        document.getElementById('errorMessage').textContent = '';
  
        // 获取密码值
        var password = document.getElementById('password').value;
  
        // 检查密码是否为空
        if (!password) {
        // 显示模态框
        document.getElementById("myModal").style.display = "block";
        return;
        }
  
        // TODO: 如果密码不为空，继续验证或登录...
        // 这里只是模拟成功登录并跳转到另一个页面
        alert('登录成功！');
        window.location.href = 'https://www.csdn.net/'; // 跳转到成功页面（示例）
    }

    document.getElementById('close-modal').addEventListener('click', function() {
    document.getElementById('myModal').style.display = 'none';
    });


</script>

</body>
</html>

感谢大家花时间阅读我的第一篇博客文章。我很高兴能够分享我的思考、经验和见解。如果你对本文中提到的内容有任何疑问、反馈或想要进一步讨论的点，请随时在评论区留言。你的每一条评论和反馈都是对我最大的支持和鼓励。

此外，如果你喜欢这篇文章，不妨分享给你的朋友或同事，让更多的人受益。如果你对我的其他话题感兴趣，欢迎关注我的博客，未来我将继续带来更多有价值的内容。

最后，如果你有任何关于博客写作、内容建议或合作的机会，也请不吝赐教。期待与你们一起成长和进步！

再次感谢大家的支持和关注！