刚开始学习CSS基础,仿做了个京东的登录页面,还不错
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.d0{
position: relative;
width: 300px;
left: 470px;
margin: 10px 0 0;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
height: 6px;
}
.url{
border: 1px solid red;
width: 1920px;
height: 476px;
background-image:url("https:img13.360buyimg.com/da/jfs/t2749/276/1020747574/33213/870500f1/5731485aN1134b4f0.png");
background-size: contain;
}
.d2{
background-color:#000;
margin: 80px;
}
.d3{
width: 260px;
height: 25px;
background-color: #ffe57d;
font-size: 15px;
}
.met
{
display: inline-block;
display: block;
width: 306px;
overflow: visible;
height: 27px;
}
.we{
position: relative;
height: 27px;
right: 83px;
line-height: 27px;
top: -3px;
float: left;
color: #6A87C0;
}
.d4{
position: relative;
height: 27px;
right: 20px;
line-height: 27px;
top: -3px;
float: right;
}
.mima{
position: relative;
height: 27px;
right: 20px;
line-height: 27px;
top: -2px;
float: right;
}
.d6{
background-color: #E4393C;
width: 250px;
height: 39px;
color: #fff;
font-size: 20px;
}
.d7{
font-size: 10px;
color: #999999
}
.d8{
font-size: 14px;
color: #666666;
}
</style>
</head>
<body>
<div class="d0"> <img src="https://misc.360buyimg.com/lib/img/e/logo-201305-b.png" ><img src="https://misc.360buyimg.com/user/passport/1.0.0/css/i/l-icon.png" ></div><br><br><br>
<div class="url">
<div class="d2">
<form>
<table border="1" bgcolor="#fff" width="300px" height="360px" cellspacing="0" cellpadding="11" align="right">
<tr valign="top">
<td>
<ol class=" me"><dir>
<b class="we">京东会员</b>
<b class="d4" ><a href="https://reg.jd.com/reg/person?ReturnUrl=http%3A%2F%2Fwww.jd.com" target="_blank" >>立即注册</a></b>
</dir><br>
</ol>
<div class="d3" >公共场所禁止自动登录,以防账号丢失 </div><br>
<div>用户名<input type="text" name="" placeholder="邮箱/用户名/已验证手机"></div><br>
<div>密 码 <input type="password" name="" tabindex="2" placeholder="密码" ></div><br>
<input type="radio" name="gender" value="" class="d5">自动登录
<b class="mima" align="right"><a href="https://safe.jd.com/findPwd/index.action" target="_blank">忘记密码?</a></b><br><br>
<div >
<input class="d6" type="button" name="" value="登  录">
</div><br>
<div class="d7">使用合作网站账号登录京东:</div><br>
<div class="d8">京东钱包 | QQ | 微信</div>
</td>
</tr>
</div>
</div>
</table>
</form>
</body>
</html>