练习4: 仿京东商城登录页面


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
header{
text-indent: 5em;
}
section div{
background-image: url(../img/banner.png);
border: solid 1px white;
background-repeat: no-repeat;
background-size: cover;
width: 1600px;
height: 600px;
padding: 100px;
}
#j1{
float: right;
background: white;
width: 350px;
height:400px;
padding: 0px;
}
#p1{
color: gray;
font-size: 25px;
float: left;
}
#p2{
color: red;
font-size: 20px;
float: right;
}
#p3{
float: right;
}
#b1{
border: solid 1px red;
width: 100px;
height: 20px;
padding: 0px;
text-align: center;
}
#c1{
text-align: center;
}
</style>
</head>
<body>
<header>
<img src="../img/jingdong.png">
</header>
<section>
<div>
<div id="j1">
<span id="p1">京东会员</span>
<span id="p2"><img src="../img/icon5.jpg">立即注册</span>
<form action="#" method="get">
<p>
<img src="../img/icon1.jpg">
<input type="text" name="userName" />
</p>
<p>
<img src="../img/icon2.jpg">
<input type="password" name="psw"/>
</p>
<p>
<input type="checkbox" value="autoLogin"/>自动登录
<span id="p3">忘记密码?</span>
</from>
<div id="b1">登录</div>
</div>
</div>
</section>
<footer>
<p id="c1">关于我们| 联系我们| 人才招聘| 商家入驻| 广告服务|
手机京东| 友情链接| 销售联盟| 京东社区| 京东公益| English Site</p>
<p id="c1">Copyright?2004-2017 京东JD.com 版权所有</p>
</footer>
</body>
</html>


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM