效果图
01.代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#img1{
width: 375px;
height: 84px;
padding-top: 1px;
}
#div1{
width: 100%;
height: 84px;
background-color: white;
}
#div1 .right{
background: url(../img/提示.png) no-repeat left center;
padding-left: 20px;
margin-top: 62px;
}
#div2{
width: 100%;
height: 50px;
background: url(../img/提示.png) no-repeat 246px center;
background-color: cornsilk;
}
.right{
float: right;
}
.top{
text-align: center;
padding-top: 12px;
}
a:link,a:visited{
text-decoration:none;
}
#imgtop{
padding-top: 10px;
}
#mian{
/*background-size:contain|cover;
height: auto;*/
background: url(../img/GJ.jpg) no-repeat;
background-color: darkgray;
background-size: 100% 100%;
height: 550px;
width:auto;
margin:0 auto;
}
.img2{
padding-left: 10px;
}
#div4{
width: 1000px;
height: 550px;
}
#div5{
width:380px;
height:500px;
background-color: white;
margin-left: 60px;
margin-top: 25px;
}
#div4,#div5{float:left;}
</style>
</head>
<body>
<div id="div1">
<img id="img1" src="../img/JDlog.png"/>
<a class="right" href="">登录页面，调查问卷</a>
</div>
<div id="div2">
<p class="top">依据 《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！新版
<a href="">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。</p>
</div>
<div id="mian">
<div id="div4">
</div>
<div id="div5" style="text-align:center; vertical-align:middel;>
<form action="" method="post" >
<p style="pa">
<img src="../img/提示.png" />京东不会以任何理由要求您转账汇款，谨防诈骗</p>
<a href=""><p style="font-size: 25px; text-align: center;">账户登录</p></a><hr />
<input type="text" name="user" value="" placeholder="账号" style="width: 290px; height: 30px; margin-top: 30px;"/><br />
<input type="password" name="password" value="" placeholder="密码" style="width: 290px; height: 30px; margin-top: 20px;"/><br />
<a href="" style="float: right; margin-right: 12px;margin-top: 9px;">忘记密码</a><br /><br />
<input type="button" name="" value="登 录" style=" border=0; background-color: red;width: 290px;height: 40px;"/>
</form>
</div>
</div>
<p style="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>
<p style="text-align: center;">Copyright © 2004-2018 京东JD.com 版权所有</p>
</body>
</html>
网友评论