纯HTML和CSS实现登录注册框

  1.注册

   

 <div class="main">
        <div class="registerbox">
            <h3>注册账号</h3>
            <form action="#" method="get">
                <div class="email">
                    <em class="iconfont icon-xinfeng"></em>
                    <input type="text" name="email" placeholder="请输入邮箱" autocomplete="off">
                </div>
                <label>请输入邮箱/邮箱已注册/邮件格式错误</label>

                <div class="password">
                    <em class="iconfont icon-suo"></em>
                    <input type="password" name="password" placeholder="密码" autocomplete="off">
                </div>
                <label>请输入密码/密码格式为6-20位字母数组组合</label>

                <div class="verification">
                    <input type="text" name="verification" placeholder="验证码" autocomplete="off">
                    <img src="../images/verification.png" alt="verification">
                </div>
                <label class="verlabel">请输入验证码</label>
                <br>
                <input type="submit" value="注册" class="registerbtn">
                <p class="hint">
                    已有账号<a href="../html/login.html">&nbsp;去登录</a>
                </p>
            </form>
        </div>
    </div>

.main{
    width: 100%;
    height: 550px;
    background-color: #f6f6f6;
    position: relative;
}
.main .registerbox{
    width: 750px;
    height: 484px;
    background-color:#ffffff;
    position: absolute;
    left: 50%;
    top:50%;
    margin-left:-375px;
    margin-top:-242px;
    border-top: 3px solid #f36b11;   
}
.main .registerbox > h3{
    margin-top:10px;
    text-align: center;
    font:24px/66px "微软雅黑";
}
.main .registerbox > form .email,
.main .registerbox > form .password{
    width: 380px;
    height: 36px;
    line-height: 36px;
    border: 1px solid #D9D9D9;
    margin: 13px auto;
}

.main .registerbox > form .email:hover,
.main .registerbox > form .password:hover{
  border: 1px solid #f36b11;
}
.main .registerbox > form .email > em,
.main .registerbox > form .password > em
{
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 20px;
    vertical-align: top;
    border-right: 1px solid #D9D9D9;
    background-color: #f4f4f4;
    color:#c7c7c7;
}
.main .registerbox > form .email:hover em,
.main .registerbox > form .password:hover em{
    border-right: 1px solid #f36b11;
    background-color: #fef9f6;
    color:#f36b11;
}
.main .registerbox > form  .email >input,
.main .registerbox > form  .password >input{
    width: 328px; 
    height: 36px;
    line-height: 36px;
    font: 14px/1 "宋体";
    padding-left: 10px;
}
.main .registerbox > form > .verification > input{
    width: 200px;
    height: 36px;
    line-height: 36px;
    font: 14px/1 "宋体";
    border: 1px solid #d9d9d9;
    margin: 13px 0 0 184px;
    padding-left: 10px;
}
.main .registerbox > form > .verification > input:hover{
    border:1px solid #f36b11;
}
.main .registerbox > form > .verification > img{
    margin: 18px 0 0 7px;
}
.main .registerbox > form > label{
    display: inline-block;
    margin-left: 184px;
    padding-bottom: 10px; 
    font:12px/1 "宋体";
    color:#f36b11;
}
.main .registerbox > form > .verlabel{
    padding-top:13px;
}
.main .registerbox > form > .registerbtn{
    width: 386px;
    height: 46px;
    /* line-height: 46px; */
    background-color: #f36b11;
    color:#ffffff;
    font:20px/46px "宋体";
    cursor: pointer;
    border-radius: 6px;
    margin:22px 0 0 184px;
}
.main .registerbox > form > .hint{
    text-align: center;
    padding-top: 35px;
    font:12px/1 "宋体";
}
.main .registerbox > form > .hint > a{
    color:#f36b11;
}

   2.登录

  

<div class="main">
        <div class="banner">
            <img src="../images/login_bg_02.png" alt="banner">
        </div>

        <!-- login box -->
        <div class="loginbox">
            <h3>登录</h3>
            <form action="#" method="get">
                <!-- username -->
                <div class="username">
                    <em class="iconfont icon-xinfeng"></em>
                    <input type="text" name="username" placeholder="手机号/会员名/邮箱" autocomplete="off">
                </div>
                <!-- password -->
                <div class="password">
                    <em class="iconfont icon-suo"></em>
                    <input type="password" name="password" placeholder="密码" autocomplete="off">
                </div>
                <!-- verification -->
                <div class="verification">
                    <input type="text" name="verification" placeholder="验证码" autocomplete="off">
                    <img src="../images/verification.png" alt="verification">
                </div>
                <!-- login button -->
                <input type="submit" value="登录" class="loginbtn">

                <!-- hint -->
                <p class="hint">
                    <label for="autologin">
                        <input type="checkbox" name="autologin" id="autologin" class = "autologin" checked>
                        <span></span>
                        <b class="autologinlabel">自动登录</b>
                    </label>
                    <a href="#">忘记密码?</a>
                </p>

                <!-- choose login methods -->
                <div class="loginmethods">
                    <label for="QQ">
                        <input type="radio" name="loginmethod" id="QQ" class="radio">
                        <span class="radiolabel QQ"></span><b class="radiodesc">QQ</b>
                    </label>
                    <label for="weibo">
                        <input type="radio" name="loginmethod" id="weibo" class="radio">
                        <span class="radiolabel weibo"></span><b class="radiodesc">微博</b>
                    </label>
                    <label for="wechat">
                        <input type="radio" name="loginmethod" id="wechat" class="radio">
                        <span class="radiolabel wechat"></span><b class="radiodesc">微信</b>
                    </label>
                    <a href="../html/register.html">立即注册</a>                   
                </div>
            </form>
        </div>
    </div>

.main{
    width: 100%;
    height: 450px;
    position: relative;
}
.main .banner{
    height: 450px;
}
.main .banner > img{
    width: 100%;
    height: 450px;
}
.main .loginbox{
   width: 350px;
   height: 380px;
   background-color: #ffffff; 
   position: absolute;
   right: 120px;
   top: 36px;
   border-top: 3px solid #EE6910;
}
.main .loginbox > h3{
    font:18px/1 "微软雅黑";
    margin: 25px 0 25px 35px;
}
.main .loginbox > form .username,
.main .loginbox > form .password{
    width: 280px;
    height: 36px;
    line-height: 36px;
    border: 1px solid #d8d8d8;
}
.main .loginbox > form .username{
    margin: 25px 0 0 35px;
}
.main .loginbox > form .password{
    margin: 13px 0 0 35px;
}
.main .loginbox > form .username:hover,
.main .loginbox > form .password:hover{
    border: 1px solid #f36b11;
    color:#f36b11;
}
.main .loginbox > form .username > em,
.main .loginbox > form .password > em{
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 18px;
    vertical-align: top;
    border-right: 1px solid #d8d8d8;
    background-color: #f4f4f4;
    color: #c7c7c7;
}
.main .loginbox > form .username:hover > em,
.main .loginbox > form .password:hover > em{
    border-right: 1px solid #f36b11;
    background-color: #fef9f6;
    color:#f36b11;
}
.main .loginbox > form .username > input,
.main .loginbox > form .password > input
{
    width: 224px;
    height: 36px;
    font: 14px/36px "宋体";
    padding-left: 15px;
}
.main .loginbox > form > .verification > input{
    width: 193px;
    height: 36px;
    /* line-height: 36px; */
    font-size: 14px/36px "宋体";
    padding-left:16px;
    border: 1px solid #d8d8d8;
    margin:13px 0 0 35px;    
}
.main .loginbox > form > .verification > img{
    margin: 18px 0 0 7px;
}
.main .loginbox > form > .loginbtn{
    width: 286px;
    height: 40px;
    background-color: #f36b11;
    color: #ffffff;
    font: 19px/40px "宋体";
    cursor: pointer;
    border-radius: 6px;
    margin: 25px 0 0 33px;
}
.main .loginbox > form > .hint{
    font: 12px/1 "宋体";
    color: #686868;
    margin-top: 12px;
}

/* set new checkbox*/
.main .loginbox > form > .hint >label> .autologin{
    display: none;
}
.main .loginbox > form > .hint >label> .autologin[type=checkbox]+span{
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 1px solid #d7d7d7;
    color: #b5b5b5;
    margin-left: 35px;
    vertical-align: middle;
}
.main .loginbox > form > .hint >label>.autologin[type=checkbox]:checked+span:after{
    content:'\2714';
    font-size: 14px;
}
.main .loginbox > form > .hint >label> .autologinlabel{
    margin-left:6px;
}

.main .loginbox > form > .hint > a{
    color: #686868;
    margin-left: 147px;  
}
.main .loginbox > form .loginmethods{
    height:50px;
    line-height: 50px;
    margin-top: 30px;
    border-top: 1px solid #efefef;
}
/* change radio styles */
.main .loginbox > form .loginmethods .radio{
    display: none;
}
.main .loginbox > form .loginmethods .radiolabel{
    display: inline-block;
    width: 8px;
    height: 8px;
    /* border:1px solid #27a6f7; */
    border-radius: 100%;
    vertical-align: middle;
    margin-left: 30px;
}
.main .loginbox > form .loginmethods .QQ{
    border:1px solid #27a6f7;
}
.main .loginbox > form .loginmethods .weibo{
    border: 1px solid #dc2b1b;
}
.main .loginbox > form .loginmethods .wechat{
    border: 1px solid #1ae647;
}

.main .loginbox > form .loginmethods .radio:checked+ .radiolabel:after{
    content:"";
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 100%;
    margin-top: 1px; 
    margin-left: 1px;
}
.main .loginbox > form .loginmethods .radio:checked+ .QQ:after{
    background: #27a6f7;
}
.main .loginbox > form .loginmethods .radio:checked+ .weibo:after{
    background: #dc2b1b;
}
.main .loginbox > form .loginmethods .radio:checked+ .wechat:after{
    background: #1ae647;
}
.main .loginbox > form .loginmethods .radio:checked + .QQ{
    border: 1px solid #27a6f7;
}
.main .loginbox > form .loginmethods .radio:checked + .weibo{
    border: 1px solid #dc2b1b;
}
.main .loginbox > form .loginmethods .radio:checked + .wechat{
    border: 1px solid #1ae647;
}
.main .loginbox > form .loginmethods .radiodesc{
    font:12px/1 "宋体";
    color: #6d6d6d;
    padding-left: 8px;
}
.main .loginbox > form .loginmethods > a{
    font:14px/1 "宋体";
    color: #f36b17;
    margin-left:48px;
}