4.2京东登陆界面上部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>京东-欢迎登录</title>
<link rel="icon" href="//www.jd.com/favicon.ico"/>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#jd_header{
height: 100px;
}
.header_img1{
margin-top: 30px;
margin-left: 150px;
}
.header_img2{
margin-left: 30px;
}
.header_img3{
position: relative;
top: 70px;
left: 50px;
}
.header_a1{
font-size: 10px;
color: #999999;
text-decoration: none;
position: relative;
top:67px ;
left: 50px;
}
#header_right a:hover{
color: red;
text-decoration: underline;
}
#header_right{
height:100px ;
width: 400px;
float: right;
}
#jd_tips{
background: #FFF8F0;
height: 40px;
}
#jd_tips p{
color: #999999;
font-size: 10px;
}
.tips_img{
position: relative;
top: 15px;
left: 200px;
}
.tips_content{
position: relative;
left: 222px;
bottom: 6px;
}
p a{
color: black;
text-decoration: none;
}
p a:hover{
text-decoration: underline;
}
#login{
height: 475px;
background-image: url(img/a21e2dac177aa082.jpg);
background-repeat: no-repeat;
background-position: center;
background-color: #0E0D09;
}
#login_div1{
width: 345px;
height: 400px;
background: white;
float: right;
position: relative;
top: 15px;
right: 120px;
}
#login_tips{
height: 60px;
background:#FFF8F0 ;
}
.login_img1{
position: relative;
top: 20px;
left: 30px;
}
#login_tips span{
font-size: 10px;
color: #999999;
position: relative;
top: 17px;
left: 30px;
}
table{
text-align: center;
}
tr{
height: 53px;
}
td{
width: 95px;
}
.table_a1{
color: black;
font-size: 18px;
text-decoration: none;
}
.table_a2{
color: red;
font-size: 20px;
text-decoration: none;
}
.table_img1{
position: absolute;
top: 125px;
left: 10px;
}
.table_img2{
position: absolute;
top: 180px;
left: 10px;
}
#table_input1{
width: 250px;
height: 35px;
position: absolute;
top: 127px;
left: 52px;
}
#table_input2{
width: 250px;
height: 35px;
position: absolute;
top: 180px;
left: 52px;
}
.table_a3{
font-size: 10px;
color: #999999;
text-decoration: none;
}
#aaa a:hover{
color: red;
text-decoration: underline;
}
#table_input3{
width: 305px;
height: 35px;
background: #E4393C;
color: white;
font-size: 18px;
}
.table_img3{
position: absolute;
top: 350px;
left: 10px;
}
.table_a4{
color: #999999;
font-size: 12px;
text-decoration: none;
position: absolute;
top:355px ;
left: 40px;
}
#a4 a:hover{
color: red;
text-decoration: underline;
}
.table_img4{
position: absolute;
top: 353px;
left: 90px;
}
.table_a5{
color: #999999;
font-size: 12px;
text-decoration: none;
position: absolute;
top:355px ;
left: 120px;
}
#a5 a:hover{
color: red;
text-decoration: underline;
}
.table_img5{
position: absolute;
top: 353px;
left: 200px;
}
.table_a6{
color: red;
font-size: 16px;
text-decoration: none;
position: absolute;
top:352px ;
left: 220px;
}
</style>
</head>
<body>
<div id="jd_header">
<img class="header_img1" src="img/logo-201305-b.png" />
<img class="header_img2" src="img/l-icon.png" />
<div id="header_right">
<img class="header_img3" src="img/q-icon.png" />
<a class="header_a1" href="#">登录页面,调查问卷</a>
</div>
</div>
<div id="jd_tips">
<img class="tips_img" src="img/icon-tips.png" />
<p class="tips_content">
依据《网络安全法》,为保障您的账户安全和正常使用,请尽快完成手机号验证! 新版<a href="#"><b>《京东隐私政策》</b></a>已上线,将更有利于保护您的个人隐私。
</p>
</div>
<div id="login">
<div id="login_div1">
<div id="login_tips">
<img class="login_img1" src="img/icon-tips.png" />
<span>
京东不会以任何理由要求您转账汇款,谨防诈骗。
</span>
</div>
<table>
<tr>
<td colspan="2">
<a class="table_a1" href="#"><strong>扫码登录</strong></a>
</td>
<td colspan="2">
<a class="table_a2" href="#"><strong>账号登录</strong></a>
</td>
</tr>
<tr>
<td colspan="4">
<img class="table_img1" src="img/account.png" />
<input type="text" name="" id="table_input1" placeholder="邮箱/用户名/手机号" />
</td>
</tr>
<tr>
<td colspan="4">
<img class="table_img2" src="img/lock.png" />
<input type="password" name="" id="table_input2" placeholder="密码" />
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td id="aaa">
<a class="table_a3" href="#">忘记密码</a>
</td>
</tr>
<tr>
<td colspan="4">
<input type="button" name="" id="table_input3" value="登 录" />
</td>
</tr>
<tr>
<td id="a4">
<img class="table_img3" src="img/qq.png" />
<a class="table_a4" href="#">QQ</a>
</td>
<td id="a5">
<img class="table_img4" src="img/weixin.png" />
<a class="table_a5" href="#">微信</a>
</td>
<td colspan="2">
<img class="table_img5" src="img/jiantou.png" />
<a class="table_a6" href="#">立即注册</a>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>