2018-09-18-day22作业
2018-09-18 本文已影响0人
oxd001
html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/jd_login.css" />
<title></title>
<script>
function change(){
var s=document.getElementById('textinput02');
s.src='img/clear.png';
}
function change2(){
var s=document.getElementById('textinput02');
s.src='';
}
</script>
</head>
<body>
<div id='total'>
<div id='one'>
<img src='./img/logo.png'>
<img src='./img/l-icon.png'>
<span id='one_right'>
<img src='./img/q-icon.png'>
登录页面，调查问卷
</span>
</div>
<div id='two' align="center">
<div style="height:18px;"></div>
<div>
<img src="./img/xx.png"/>
<font style="color:gray;">依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！新版《<font style="color:black;"><b>京东隐私政策</b></font>》已上线，将更有利与保护您的个人隐私</font>
</div>
</div>
<div id="three">
<div>
<div id="login_form" align="center">
<img src="img/warning.png" />
<font style="color:gray;height:50px;background-color:#FFF8F0;font-size:10px;">京东不会以任何要求你转账汇款，谨防诈骗</font>
<table cellspacing="20">
<tr>
<td><font size="5"><b>扫码登录</b></font></td>
<td><font size="5" color="#FF0000"><b>账户登录</b></font></td>
</tr>
</table>
<hr style="color:gray;font-size:5px;">
<br>
<table bgcolor="gray" cellspacing="1">
<tr bgcolor="white" height="40px">
<td><img src='img/pygame.png'></td>
<td>
<input onfocus="change()" id='textinput' class='zh' type='text' onblur="change2()">
<img id='textinput02' style="width:40px;">
</td>
</tr>
<tr bgcolor="white" height="45px" style="border-collapse:separate; border-spacing:10px;">
<td><img src="img/password_icon.png"/></td>
<td><input id="textinput" type='password'></td>
</tr>
</table>
<span style="position:relative;margin-right: -140px;";>
<a href='#'><font>忘记密码</font></a>
</span>
<br>
<span>
<button style="width:200px;height:50px;background-color: red;"><font size="5" color="white"><b>登 录</b></font></button>
</span>
<div style="position: absolute; left:10px;bottom:10px;">
<img src="img/qq.png"/>
<img src="img/weixin.png"/>
</div>
<div style="position: absolute;right: 10px;bottom: 10px;">
<img src="img/right.png" style="margin-bottom:-7px;"/>
<a href='#'><font color="#FF0000">立即注册</font></a>
</div>
</div>
</div>
</div>
</div>
<div id='four' align="center" style="position:relative;margin-top:-150px;">
<span>
<font class='bu'>关于我们</font> | <font class='bu'>联系我们</font> | <font class='bu'>人才招聘</font> |
<font class='bu'>商家入驻</font> | <font class='bu'>广告服务</font> | <font class='bu'>手机京东</font> |
<font class='bu'>友情链接</font> | <font class='bu'>销售联盟</font> | <font class='bu'>京东社区</font> |
<font class='bu'>京东公益</font> | <font class='bu'>English Site</font>
</span>
<br>
<br>
<span>
<font class='bu'>Copyright © 2004-2018 京东JD.com 版权所有</font>
</span>
</div>
<div>
</body>
</html>
2.css部分
#total{
height:766px;
}
#two{
background-color:#FFF8F0;
height:50px;
}
#three{
position:relative;
background: url(../img/bg.png);
display: block;
height:475px;
}
#login_form{
position:absolute;
background-color:white;
top:20px;
right:20px;
width:300px;
height:350px;
}
#one_right{
/*margin-right:20px;*/
float:right;
margin-top:30px;
}
#textinput{
height:35px;
border:0px;
}
.bu{
font-size: 15px;
color:gray;
}
