结果
代码 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用户登录页面</title><link rel="stylesheet" href="./css/login.css"><script src="js/jquery-3.1.0.min.js"></script><script>$(function () {// 初始时刻隐藏手机号验证码，显示用户名密码$('.login-box').hide();$('.login-box').first().show();// 显示或隐藏登录方式$('.login-method').each(function (i) {$(this).click(function () {$('.login-box').hide();$('.login-box').eq(i).show();})})})
</script>
</head>
<body>
<div class="login-bg">
</div>
<div class="login-box-wrapper"><div class="login-title"><span class='login-method'>用户名|密码</span> <span class='login-method'>手机号|验证码</span></div><div class="hr-line-div"></div><form action="" class="login-box"><p class="paragraph">用户名：</p><p><input type="text" placeholder="请输入用户名" name="username"></p><p class="paragraph">密码：</p><p><input type="password" placeholder="请输入密码" name="password"></p><p><input type="submit" class="login-btn" value="立即登录"><input type="button" class="login-btn" value="返回首页"></p></form><form action="" class="login-box"><p class="paragraph">手机号：</p><p><input type="text" placeholder="请输入手机号" name="phone"></p><p class="paragraph">验证码：</p><p><input type="text" placeholder="请输入验证码" name="checkcode" id="checkcode"><input type="button" id="mybtn" value="获取验证码"></p><p><input type="submit" class="login-btn" value="立即登录"><input type="button" class="login-btn" value="返回首页"></p></form>
</div></body>
</html>
/*去除浏览器默认样式*/
*{padding: 0;margin: 0;
}
/*设置背景颜色*/
.login-bg{height: 300px;background-color: #1C2327;
}
/*设置登录容器*/
.login-box-wrapper{border-radius: 8px;background-color: #ffffff;box-shadow: 0 0 5px rgba(10,10,10,.5);width: 350px;padding: 20px;margin: 0 auto;margin-top: -100px;margin-bottom: 100px;
}
/*设置登录标题*/
.login-box-wrapper .login-title{width: 350px;height: 28px;/*文字水平居中*/line-height: 28px;cursor: pointer;
}
.login-box-wrapper .login-title span{color: black;font-size: 20px;
}
/*设置分割线样式*/
.login-box-wrapper .hr-line-div{width: 350px;border-top: 1px solid #e4e3e3;margin-bottom: 20px ;margin-top: 10px;
}
/*设置login-box样式*/
.login-box .paragraph{line-height: 28px;margin: 20px 0;font-size: 18px;
}
.login-box input{padding-left: 10px;width:328px;height: 36px;outline: none;
}
.login-box .login-btn{width: 150px;line-height: 36px;margin-top: 20px;background-color:#009688;border: none;color: white;padding: 0;
}
/*设置返回首页按钮样式*/
.login-box .login-btn:nth-child(2){margin-left: 38px;
}
/*设置验证码标签的样式*/
#checkcode{width: 238px;
}
#mybtn{float: right;width: 74px;height: 36px;box-sizing: content-box;color: white;background-color: blue;border:none;padding: 2px 1px;margin-right: 6px;
}
