代码效果图:

Html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        .left{
            float:left;
        }
        .right{
            float:right;
        }
        .commons{
            width:980px;
            margin: 0 auto;
            background-color: white;
            border: 1px solid #dddddd;
        }
        .pg-header{
            height:100px;

        }
        .pg-header-content{
            background-image: url(logo2.png);
            height: 72px;
            width: 176px;
            margin-top:20px;
        }
        .pg-body{
            margin-top:10px;
            height:550px;
            position: relative;
        }
        .pg-body-top{
            float:left;
            height:500px;
            width:980px;
        }
        .pg-body-bottom{
            position: absolute;
            right:0;
            bottom:0;
            width:100px;
            height:30px;
            background-color: yellowgreen;
            line-height:30px;
            color: white;
            text-align: center;
        }
        .pg-body-top-left{
           height:500px;
           width:400px;
           padding-left:30px;
           padding-top:30px;

        }
        .pg-body-top-left .i1{
            height:400px;
            width:350px;
        }
        .pg-body-top-right{
            height:500px;
            width:420px;
            padding-left:80px;
            padding-top:30px;
        }
        .pg-body-top-right1{
            width:400px;
            height:38px;
            margin-top:15px;

        }
        .pg-body-top-right11{
            width:70px;
            height:30px;
            font-size:16px;
            line-height:38px;
            text-align: right;
            padding-right:10px;
        }
        .s1{
            color: red;
        }
        .pg-body-top-right12{
            width:300px;
            height:30px;
            position: relative;

        }
        .pg-body-top-right12 .i1{
            height:30px;
            width:270px;
            padding-right:30px;

        }
        .pg-body-top-right13{
            position:absolute;
            top:10px;
            right:5px;
            background-image: url(i_name.jpg);
            height:16px;
            width:16px;
        }
        .pg-body-top-right14{
            position:absolute;
            top:10px;
            right:5px;
            background-image: url(i_pwd.jpg);
            height:19px;
            width:14px;
        }
        .pg-body-top-right15{
            height:30px;
            width:200px;
        }
        .pg-body-top-right16{
            background-image:url(1.jpg);
            background-repeat: no-repeat;
            height:35px;
            width:30px;
            margin-left: 10px;
        }
        .pg-body-top-right15 .i1{
            height:30px;
            width:150px;
        }
        .pg-body-top-right21{
            padding-left:75px;
            font-size:16px;
            height:30px;
            line-height:30px;
        }
        .pg-body-top-right3{
            margin-left: 80px;
            background-color:darkred;
            height:30px;
            line-height:30px;
            text-align:center;
            width:300px;
            font-size:16px;
            font-weight:bolder;
            color: white;
        }
        .pg-bottom-content{
            width:400px;
            margin: 0 auto;
            height:30px;
            line-height:30px;
            text-align: center;
        }
    </style>
</head>
<body style="margin: 0">
    <div class="pg-header commons" style="border: none">
        <div class="pg-header-content left">
        </div>
    </div>
    <div class="pg-body commons">
        <div class="pg-body-top left">
            <div class="pg-body-top-left left">
                <img src="1.jpg" class="i1"/>
            </div>
            <div class="pg-body-top-right left">
                <div class="pg-body-top-right1 left">
                    <div class="pg-body-top-right11 left">
                        <span class="s1">*</span>
                        <span>用户名:</span>
                    </div>
                    <div class="pg-body-top-right12 left">
                        <input class="i1"/>
                        <div class="pg-body-top-right13">
                        </div>
                    </div>
                </div>
                <div class="pg-body-top-right1 left">
                    <div class="pg-body-top-right11 left">
                        <span class="s1">*</span>
                        <span>密码:</span>
                    </div>
                    <div class="pg-body-top-right12 left">
                        <input class="i1"/>
                        <div class="pg-body-top-right14">
                        </div>
                    </div>
                </div>
                <div class="pg-body-top-right1 left">
                    <div class="pg-body-top-right11 left">
                        <span class="s1">*</span>
                        <span>验证码:</span>
                    </div>
                    <div class="pg-body-top-right15 left">
                        <input class="i1 left"/>
                        <div class="pg-body-top-right16 left">
                        </div>
                    </div>
                </div>
                <div class="pg-body-top-right1 left">
                    <div class="pg-body-top-right21">
                        <input type="checkbox" checked="checked"/>
                        <span>自动登录&nbsp;</span>
                        <span style="color: blue">忘记密码?</span>
                    </div>
                </div>
                <div class="pg-body-top-right1 left">
                    <div class="pg-body-top-right3">登录</div>

                </div>
            </div>
        </div>
        <div class="pg-body-bottom left">
            <span>免费注册&nbsp;&gt;&gt;</span>
        </div>
    </div>
    <div class="pg-bottom commons" style="border: none">
        <div class="pg-bottom-content">
            <span>&#169;2018 www.liujindong.com 版权所有</span>
        </div>
    </div>
</body>
</html>