简单的注册页面

最新推荐文章于 2023-07-18 20:29:19 发布

kylinxjd

最新推荐文章于 2023-07-18 20:29:19 发布

阅读量227

点赞数 2

文章标签： HTML css 注册

本文链接：https://blog.csdn.net/kylinxjd/article/details/92795899

版权

HTML代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>register</title>
    <link rel="stylesheet" href="./css/register.css">
</head>
<body>
    <div class="register-container">
        <form action="">
            <div class="form-item">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" placeholder="用户名">
            </div>
            <div class="form-item">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" placeholder="密码">
            </div>
            <div class="form-item">
                <label for="username">确认密码</label>
                <input type="password" id="cpassword" name="cpassword" placeholder="确认密码">
            </div>
            <div class="form-item">
                <label for="phone">手机号码</label>
                <input type="text" id="phone" name="phone" placeholder="手机号码">
            </div>
            <div class="form-item">
                <label for="email">邮箱</label>
                <input type="text" id="email" name="email" placeholder="邮箱">
            </div>
            <div class="form-item">
                <label for="code">验证码</label>
                <input style="width: 150px" type="text" id="code" name="code" placeholder="验证码">
                <button style="width: 110px;" type="button" class="code-btn" id="code-btn">获取验证码</button>
            </div>
            <div class="form-item">
                <button type="button" class="sub-btn" id="sub-btn">立 即 注 册</button>
            </div>

        </form>
    </div>
</body>
</html>

css样式

* {
    margin: 0;
    padding: 0;
}
body{
    background: url('../img/bac4.jpg') no-repeat;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-size: cover;
}
.register-container{
    width: 50%;
    min-width: 400px;
    height: auto;
    min-height: 400px;
    position: absolute;
    top: 10%;
    left: 40%;
    /*background: rgba(93,255,178,0.83);*/

}
.form-item{
    margin: 20px 0;
    position: relative;
    left: 20%;
    overflow: hidden;
}
.form-item label{
    line-height: 40px;
}
.form-item input{
    position: absolute;
    left: 100px;
    border: 1px solid gainsboro;
    border-radius: 8px;
    height: 40px;
    width: 40%;
    line-height: 40;
    font-size: 16px;
    padding-left: 10px;
}
input:focus{
    outline: none;
}
.form-item button{
    width: 40%;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    font-family: '微软雅黑', sans-serif;
    background: lightcyan;
    border: hidden;
    outline: none;
    /*margin-left: 100px;*/
}
.sub-btn{
    margin-left: 50px;
}
.code-btn{
    margin-left: 220px;
    border-radius: 8px;
}

界面展示
在这里插入图片描述