结果

代码

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>&nbsp;&nbsp;&nbsp;&nbsp;<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;
}

更多推荐

html网页设计一个简单的用户登录页面