结果
代码
login.html
<!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>
login.css
/*去除浏览器默认样式*/*{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;}
