登陆页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg{
            height: 600px;
            width: 1000px;
            /*background-color: blueviolet;*/
            left: 16%;
            top: 100px;
            border: 1px lightsteelblue solid;
            position: relative;
        }
        .pg .pg-left img{
            position: absolute;
            padding: 85px 30px;
            height: 454px;
            width: 458px;
        }

        .pg .pg-right{
            position: absolute;
            right: 55px;
            top: 86px;
            /*border: 2px saddlebrown solid;*/
            height: 411px;
            width: 456px;

        }
        .pg-right div {
            padding: 20px 30px;
        }

    </style>
</head>
<body>


<div class="pg">
    <div class="pg-left">
        <img src="121.jpg" alt="">
    </div>

    <div class="pg-right" style="padding: 20px 10px">
        <form action="" >
            <div><span style="color: red">*</span>用户名:&ensp;<input type="text" value="22" ></div>
            <div>&ensp;&ensp;<span style="color: red">*</span>密码:&ensp;<input type="text" value="22"></div>
            <div ><span style="color: red">*</span>验证码:&ensp;<input type="text" style=" 50px"></div>
            <div style="position: absolute;left: 43px;"><input type="checkbox">自动登陆 <a href="">忘记密码?</a></div>
            <input type="submit" value="登陆" style="background-color: firebrick;position: absolute;top: 292px;left: 95px; 206px ;height: 40px">
        </form>
            <button style="position: absolute;right: 0;bottom: 0;background-color: lightgreen; 147px;height: 40px" ><a href="">免费注册>></a></button>
    </div>
        <p style="position: absolute;bottom: 0;left: 200px" >2014-2015 www.autohome.com.cn ALL Rights Reserved 老男孩版权所有</p>
</div>


</body>
</html>

相关阅读:
CSS3动画
Grid布局
JS向上取整、向下取整、四舍五入等
JS DOM资料
关于setInterval和setTimeout中的this指向问题
JavaScript 高级技巧 Memoization
请求接口的方式
HTTP协议知识
CSS样式重置
Chrome 为什么使用多进程，不使用多线程

原文地址：https://www.cnblogs.com/polly-ling/p/9404470.html