网页效果
01.代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
}
#img1{
width: 175px;
height: 60px;
padding-top: 1px;
margin-left: 220px;
}
#div1{
width: 100%;
height: 70px;
background-color: white;
}
#div1 .right{
background: url(../img/log信息.png) no-repeat left center;
padding-left: 20px;
margin-top: 47px;
margin-right: 200px;
}
#ct{
background: url(../img/QQ.jpg) no-repeat left center;
padding-left: 20px;
margin-top: 47px;
}
#cf{
background: url(../img/weixin.jpg) no-repeat left center;
padding-left: 20px;
margin-top: 47px;
}
#ce{
background: url(../img/注册.jpg) no-repeat left center;
padding-left: 20px;
margin-top: 47px;
margin-left: 125px;
}
#div2{
width: 100%;
height: 38px;
background: url(../img/提示.png) no-repeat 266px center;
background-color: cornsilk;
}
.right{
float: right;
}
.top{
text-align:center;
padding-top: 10px;
font-size: 13px;
}
a:link,a:visited{
text-decoration:none;
}
#imgtop{
padding-top: 10px;
}
#mian{
/*background-size:contain|cover;
height: auto;*/
background-color:#611EE8;
background-size: 100% 100%;
height: 475px;
width:auto;
margin:0 auto;
}
.img2{
padding-left: 10px;
}
#div5{
width:350px;
height:406px;
background-color: white;
margin-top: -466px;
margin-left: 868px;
}
.pa{
width: 100%;
text-align: center;
background: url(../img/提示.png) no-repeat 17px center;
background-color: cornsilk;
line-height: 38px;
margin-top: 0px;
}
.cc{
height: 60px;
width: 200px;
margin-left: 120px;
}
.icon-user {
width:130px;
background:#FFFFFF url(../img/账户.png) -4px -3px no-repeat;
padding-left:29px;
border: gainsboro 1px solid;
font-size: 22px;
color: #000000;
height: 30px;
}
.icon-pass {
width:130px;
background:#FFFFFF url(../img/密码.png) -4px -3px no-repeat;
padding-left:29px;
border: gainsboro 1px solid;
font-size: 22px;
color: #000000;
height: 30px;
}
#qw{
margin-left: 210px;
}
#ftr{
margin-top:30px;
height: 43px;
width: 348px;
background-color:#EEF3FA;
border-style: solid;
border-width: 1px;
border-color: gainsboro;
}
#cct{
margin-top: -14px;
}
#div4,#div5{float:left;}
</style>
</head>
<body>
<div id="div1">
<a href="http://jingdong.com" style="font-size: 30px;">
<img id="img1" src="../img/JDlog.png"/> <img src="../img/l-icon.png" style="margin-top: 12px;width: 110px;height: 40px;"/></a>
<a class="right" href="" style="font-size: 9px;padding-bottom: 3px;"> 登录页面，调查问卷</a>
</div>
<div id="div2">
<p class="top">依据 《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！新版
<a href="">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。</p>
</div>
<div id="mian">
<img src="../img/beijing.jpg" ="" style="background: no-repeat center center; margin-left: 200px; float: left;"/>
<div id="div5" style="text-align:center; >
<form action="" method="post" >
<p class="pa" style="font-size:11px;">京东不会以任何理由要求您转账汇款，谨防诈骗</p>
<p style="font-size: 18px; text-align: center;height:50px;line-height: 50px;color: gainsboro;"><a href="">账户登录 </a>丨<a href=""> 扫码登录</a></p>
<hr color="gainsboro" />
<div id="inputname">
<i class="icon-user"></i>
<input type="text" name="user" value="" placeholder="邮箱/用户名/已验证手机" src="../img/账户.png" style="width: 290px; height: 35px; margin-top: 40px;"/><br />
</div>
<div id="inputpass">
<i class="icon-pass"></i>
<input type="password" name="password" value="" placeholder="密码" style="width: 290px; height: 35px; margin-top: 30px;"/><br />
</div>
<a href="" style="float: right; margin-right: 11px;margin-top: 19px;font-size: 13px;">忘记密码</a><br /><br />
<input type="button" id="" value="登 录" style=" border=0; background-color: crimson;width: 326px;height: 40px;font-size: 20px; color: white; margin-top: 10px;"/>
<a href=""></a>
<div id="ftr">
<div id="qw">
<p style="color: gainsboro; font-size: 14px; line-height: 45px; margin-left: -214px;"><a id="ct" href="">
QQ </a>丨<a id="cf" href=""> 微信</a><a id="ce" href="">立即注册</a></p>
</div>
</div>
</form>
</div>
</div>
<div>
<br />
<p style="font-size: 13px; text-align: center;"><a href="">关于我们</a> 丨 <a href="">联系我们</a> 丨 <a href="">人才招聘</a> 丨 <a href="">商家入驻</a> 丨 <a href="">广告服务</a> 丨
<a href="">手机京东</a> 丨 <a href="">友情链接</a> 丨 <a href="">销售联盟</a> 丨 <a href="">京东社区</a> 丨 <a href="">京东公益</a> 丨
<a href="">English Site</a></p><br />
<div id="cct">
<p style="text-align: center;font-size: 9px;">Copyright © 2004-2018 京东JD.com 版权所有</p>
</div>
</div>
</body>
</html>
