1-00-1 2024-06-15 13:45 采纳率: 100%
浏览 1
已结题

关于html+css

如何选中的时候可以切换不同的界面
就比如注册一个界面 密码登录一个界面

短信登录/注册 密码登录
  • 写回答

3条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-06-15 13:46
    关注

    引自免费微信小程序：皆我百晓生

    要实现短信登录与密码登录之间的界面切换，可以通过HTML和CSS结合JavaScript来完成。这里提供一个基本的示例，展示如何通过按钮点击切换两种登录方式的显示。

    HTML 结构

    首先，创建HTML结构，包括两个登录表单（一个用于短信登录，另一个用于密码登录）以及切换按钮。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login System</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="login-container">
        <button id="switchToSms">短信登录</button>
        <button id="switchToPassword">密码登录</button>

        <!-- 短信登录表单 -->
        <form id="smsForm" class="login-form">
            <h2>短信登录</h2>
            <input type="text" placeholder="手机号">
            <input type="text" placeholder="验证码">
            <button type="submit">登录</button>
        </form>

        <!-- 密码登录表单 -->
        <form id="passwordForm" class="login-form">
            <h2>密码登录</h2>
            <input type="text" placeholder="用户名">
            <input type="password" placeholder="密码">
            <button type="submit">登录</button>
        </form>
    </div>

    <script src="script.js"></script>
</body>
</html>

    CSS 样式

    接下来是CSS，用来美化表单和按钮，并隐藏默认情况下不需要显示的表单。

    /* styles.css */
.login-container {
    width: 400px;
    margin: auto;
    text-align: center;
}

.login-form {
    display: none;
    border: 1px solid #ccc;
    padding: 20px;
    margin-top: 20px;
}

.login-form h2 {
    margin-bottom: 20px;
}

.login-form input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
}

.login-form button {
    width: 100%;
    padding: 10px;
    background-color: #5c67f2;
    color: white;
    border: none;
}

    JavaScript 逻辑

    最后，添加JavaScript逻辑来控制表单的显示和隐藏。

    // script.js
document.getElementById('switchToSms').addEventListener('click', function() {
    document.getElementById('smsForm').style.display = 'block';
    document.getElementById('passwordForm').style.display = 'none';
});

document.getElementById('switchToPassword').addEventListener('click', function() {
    document.getElementById('smsForm').style.display = 'none';
    document.getElementById('passwordForm').style.display = 'block';
});

// 默认显示密码登录表单
document.getElementById('passwordForm').style.display = 'block';

    这个示例展示了如何使用简单的HTML、CSS和JavaScript来实现短信登录和密码登录的界面切换。你可以根据具体需求调整样式和功能。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 6月23日
  • 已采纳回答 6月15日
  • 修改了问题 6月15日
  • 创建了问题 6月15日

悬赏问题

  • ¥50 请教 麒麟系统挂载怎么安装
  • ¥15 如何在ns3中实现路径的自由切换
  • ¥20 SpringBoot+Vue3
  • ¥15 IT从业者的调查问卷
  • ¥65 LineageOs-21.0系统编译问题
  • ¥30 关于#c++#的问题，请各位专家解答！
  • ¥15 App的会员连续扣费
  • ¥15 不同数据类型的特征融合应该怎么做
  • ¥15 用proteus软件设计一个基于8086微处理器的简易温度计
  • ¥15 用联想小新14Pro