话不多说，直接贴代码
body部分
<body><!--=====1、顶部=====--><div id="header"><div class="h-top"><!--图标部分--><div class="icon"><img style="width:350px;"src="JingD/页面02.png"/></div><!--问卷--><a href="/index.php?r=survey/index/sid/568245/lang/zh-Hans" target="_blank">登录页面，调查问卷</a></div><!--下面的文字--><div class="h-bottom"><div id=""><img style="width:25px;"src="JingD/感叹号.png"/><p>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a href="/privacy/">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。</p></div></div></div><!--=====2、中间内容=====--><div id="content"><div class="input_div"><div class="info-top"><div class="top-top"><img style="width:25px;"src="JingD/感叹号.png"/><p>京东不会以任何理由要求您转账汇款，谨防诈骗。</p></div><div class="top-bottom"><button >扫码登录</button>|<button>账号登录</button></div></div><!--输入框模块--><div class="info-middle"><div class="username"><img src="JingD/用户.png"/><input type="text" name="username" id="" value="" placeholder="邮箱/用户名/已验证手机" /></div><div class="password"><img src="JingD/密码.png"/><input type="password" name="password" id="" value="" placeholder="密码" /></div><!--忘记密码--><a href="/findPwd/index.action">忘记密码</a><button id="log">登 录</button></div><div class="info-bottom"><!--<ul><li class="qq"><a href="">QQ</a></li><li class="wx"><a href="">微信</a></li></ul>--><div class="login"><img style="width:25px;" src="JingD/qq.png"/> <a href="">QQ</a> | <img style="width:25px;"src="JingD/微信.png"/><a href="">微信</a></div><div class="logon"><img style="width:20px;" src="JingD/注册.png"/><p ><a href="/reg/person?ReturnUrl=http%3A%2F%"><font color="red">立即注册</font></a></p></div></div></div></div><!--=====3、底部=====--><div id="footer"><div class="other"> <a href="/" class="about">关于我们</a> | <a href="/contact" class="call">联系我们</a> | <a href="/home;jsessionid=0D8472A29BF72DC239E3DE9FA99D04A9.s1" class="people">人才招聘</a> | <a href="/" class="peo">商家入驻</a> | <a href="/" class="tall">广告服务</a> | <a href="/" class="phone">手机京东</a> | <a href="/links.aspx" class="friend">友情链接</a> | <a href="/" class="shop">销售联盟</a> | <a href="/act/n0hAvqy5CW8.html" class="club">京东社区</a> | <a href="/" class="love">京东公益</a> | <a href="/" class="english">English Site</a> </div> <div class="versions"> <span>Copyright © - 京东 版权所有</span> </div> </div></body>
css部分
<style type="text/css">*{margin: 0;padding: 0;position: relative;}a{text-decoration: none;}/*=====1、header=====*/#header{width: 100%;height: 150px;background-color: white;}#header .h-top{width: 100%;height: 100px;}#header .h-top .icon{height: 60px;position: absolute;/*垂直居中*/left: 150px;top: 50%;line-height: 60px;margin: -30px 0 0;}#header .h-top a{/*布局*/position: absolute;right: 40px;bottom: 10px;/*字体*/font-size: 12px;color: rgb(153,153,153);/*背景图*/background: url(JingD/消息.png) no-repeat 0 center;padding-left: 20px;}#header .h-top a:hover{color: red;text-decoration: underline;}#header .h-bottom{width: 100%;height: 50px;background-color: rgb(255,248,240);text-align: center;}#header .h-bottom div,.top-top{display: inline;}#header .h-bottom div p,.top-top p{font-size: 12px;color: rgb(153,153,153);display: inline;}#header .h-bottom div img,.top-top img{top: 8px;}/*#header .h-bottom p{text-align: center;height: 50px;line-height: 50px;font-size: 12px;color: rgb(153,153,153);background: url(../img/warning.png) no-repeat 230px center;}*/#header .h-bottom p a{color: rgb(40,40,40);}#header .h-bottom p a:hover{text-decoration: underline;}/*=====2、content=====*/#content{width: 100%;height: 475px;background: url(JingD/页面01.png) no-repeat 20% center;background-color:#E93854;}#content .input_div{width: 344px;height: 438px;background-color: wheat;position: absolute;right: 160px;top:10px;}#content .input_div .info-top{height: 100px;background-color: rgb(255,248,240);text-align: center;}#content .input_div .info-top .top-bottom{background-color: white;height: 55px;position: absolute;width: 100%;top: 45px;/*设置中间竖线的颜色*/color: rgb(200,200,200);border-bottom:1px solid rgb(200,200,200);}#content .input_div .info-top .top-bottom button{width: 160px;height: 55px;border: 0;background-color:rgba(0,0,0,0);font-size: 20px;color: rgb(53,53,53);}#content .input_div .info-top .top-bottom button:hover{color: red;}#content .input_div .info-top .top-bottom button:focus{color: red;/*按钮和输入框成为焦点后默认的边框，是outline*/outline: none;}#content .input_div .info-middle{height: 288px;background-color: white;border-top: 1px solid rgb(200,200,200);border-bottom: 1px solid rgb(200,200,200);}/*用户名和密码*/#content .input_div .info-middle .username,#content .input_div .info-middle .password{background-color: white;width: auto;height: 50px;position: absolute;left: 20px;right: 20px;top: 40px;border:1px solid rgb(180,180,180) ;}#content .input_div .info-middle .password{top: 110px;}#content .input_div .info-middle img{float: left;height: 100%;border:1px solid rgb(180,180,180)}#content .input_div .info-middle input{border: 0;float: left;height: 100%;width: auto;padding-left:10px ;}#content .input_div .info-middle input:focus{outline: none;}/*忘记密码*/#content .input_div .info-middle a{position: absolute;top: 180px;right: 20px;font-size: 12px;color: rgb(220,220,220);}#content .input_div .info-middle a:hover,.about:hover,.call:hover,.club:hover,.english:hover,.friend:hover,.love:hover,.peo:hover,.people:hover,.phone:hover,.shop:hover,.tall:hover{color: red;text-decoration: underline;}#content .info-middle #log{background-color: #E93854;font-size: 20px;letter-spacing: 23px;height: 55px;width: 89%;position: absolute;left: 20px;right: 20px;bottom: 30px;}#content .info-middle #log:focus{color: yellow;outline: none;}#content .input_div .info-bottom{height: 50px;background-color: white;/*text-align: center;*/}/** 用列表调了半天感觉效果很勉强* #content .input_div .info-bottom ul{float: left;list-style-position: initial;list-style-type: circle;}#content .input_div .info-bottom .qq{list-style-image: url(../img/qq.png);position: absolute;left: 30px;top: 10px;}#content .input_div .info-bottom .wx{list-style-image: url(../img/weixin.png);position: absolute;left: 100px;top: 10px;}*//*设置注册按钮*/#content .input_div .info-bottom div { top: 8px;/*left: 111px;*/display: inline;}#content .input_div .info-bottom .login{position: absolute;left: 12px;}#content .input_div .info-bottom .logon{/*position: absolute;*/left: 233px;}#content .input_div .info-bottom div p {color: #E93854;display: inline;}#content .input_div .info-bottom div p:hover{color: #E4393C;text-decoration: underline;}#content .input_div .info-bottom div img{top:6px }/*=====3、footer=====*/#footer{width: 100%;height: 111px;background-color: white;color: rgb(153,153,153);font-size: 12px;text-align: center;top: 5px;}#footer .versions{top: 5px;}#footer .other a{font-size: 12px;color: rgb(220,220,220);}
做出来是这个样子的，不好勿怪！
