京东登陆
代碼：
| ? | <!DOCTYPE html> |
| ? | <html> |
| ? | <head lang="en"> |
| ? | <meta charset="UTF-8"> |
| ? | <link href="css/main.css" rel="stylesheet" type="text/css"> |
| ? | <title></title> |
| ? | </head> |
| ? | <body> |
| ? | <!-- 頭部--> |
| ? | <header> |
| ? | ? |
| ? | <img src="pic/logo.png"/> |
| ? | <div class="ft">歡迎登陸</div> |
| ? | </header> |
| ? | <div class="content"> |
| ? | <div class="bg"> |
| ? | <div class="login"> |
| ? | <div class="top"> |
| ? | <div class="shaoma">掃碼登陸</div> |
| ? | <div class="zhanhu">賬戶登陸</div> |
| ? | </div> |
| ? | <div class="login1"> |
| ? | <div class="tishi">公共場(chǎng)所不建議自動(dòng)登錄，以防賬號(hào)丟失</div> |
| ? | <div class="usname a"> |
| ? | <span></span><input type="text" placeholder="郵箱/用戶名/已驗(yàn)證手機(jī)"> |
| ? | </div> |
| ? | <div class="usname b"> |
| ? | <span></span><input type="text"> |
| ? | </div> |
| ? | <div class="zd_login"> |
| ? | <input type="checkbox" checked /> 自動(dòng)登陸 |
| ? | <span>忘記密碼</span> |
| ? | </div> |
| ? | <div class="denglu">登 陸</div> |
| ? | </div> |
| ? | <div class="bottom"> |
| ? | <a href="#" class="qq">QQ</a><span>|</span> |
| ? | <a href="#" class="wxin">微信</a><span>|</span> |
| ? | <a href="#">京東錢包</a> |
| ? | <a href="#" class="zhuce">立即注冊(cè)</a> |
| ? | </div> |
| ? | </div> |
| ? | ? |
| ? | </div> |
| ? | ? |
| ? | </div> |
| ? | </body> |
| ? | </html> |
body,header,div,ul,li,span,a,input{margin:0px;padding: 0px;font-family:"微軟雅黑 Light"}
a{text-decoration:none; color:#999;}
header{width: 990px;height: 60px;line-height: 100px;margin: 0px auto;}
header img{float: left; }
.ft{height: 60px;line-height:60px;font-size: 24px;float: left;margin-left: 15px;font-weight: bold;color: #666;}
.content{width:100%;height: 475px;background:#E80403;position: relative;}
.content .bg{width: 990px ;height: 475px;margin: 0px auto;background:url("../pic/bg.jpg");}
.content .login{ width:348px;height: 365px;background: #fff;margin-top: 50px;float:right;}
.content .login .top{width: 348px;height: 56px;font-size: 17px;font-weight: bold;border-bottom: 1px solid #ccc;}
.content .login .top .shaoma{width: 50%;height: 56px;text-align: center;line-height: 56px;float: left}
.content .login .top .shaoma:hover{color:#E4393C;}
.content .login .top .zhanhu{width: 50%;height: 56px;text-align: center;line-height: 56px;float: left;color:#E4393C; }
.content .login .login1{width:326px;height: 255px;padding:0px 10px;border-bottom: 1px solid #ccc;}
.content .login .login1 .tishi{width:326px;height:23px;margin-top: 8px;float: left;border: 1px solid #F6C090;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? background:url("../pic/pwd-icons-new.png") -93px 2px no-repeat; background-color: #FEF4E5;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? font-size: 12px;text-align: center;line-height: 23px;}
.content .login .login1 .usname{width: 326px;height: 38px;border: 1px solid #ccc;margin-top: 8px;float: left;line-height: 38px;}
.content .login .login1 ?.a span{ width:38px;height:38px;background: url("../pic/pwd-icons-new.png") 0px 0px no-repeat;display: block;float: left}
.content .login .login1 ?.a:hover span{ width:38px;height:38px;background: url("../pic/pwd-icons-new.png") 0px -48px no-repeat;display: block;float: left}
.content .login .login1 .b{margin-top: 23px;}
.content .login .login1 ?.b span{ width:38px;height:38px;background: url("../pic/pwd-icons-new.png") -48px 0px no-repeat;display: block;float: left}
.content .login .login1 ?.b:hover span{ width:38px;height:38px;background: url("../pic/pwd-icons-new.png") -48px -48px no-repeat;display: block;float: left}
.content .login .login1 .usname input{float: left;width:276px; height:36px;border: 0px;outline: none;margin-left: 10px;}
.content .login .login1 .zd_login{width:326px;height: 22px;line-height: 22px;margin-top: 26px;font-size: 12px;float: left; }
.content .login .login1 .zd_login input{float: left;}
.content .login .login1 .zd_login span{float:right;display:block;}
.content .login .login1 .zd_login span:hover{color: red;text-decoration:underline;}
.content .login .login1 .denglu{width: 326px;height: 33px;float: left;margin-top: 23px;background: #E4393C;line-height: 33px;text-align: center;
? ? color: #fff;font-size: 22px;font-weight: bold;}
.content .login .bottom{width:348px;float: left;padding:0px 15px;padding-top:10px;}
.content .login .bottom a{display:block;padding-left:22px;line-height:24px;float:left;font-size:12px;}
.content .login .bottom a.qq{background:url(../pic/QQ-weixin.png) no-repeat 0px 4px;}
.content .login .bottom a.wxin{ background:url(../pic/QQ-weixin.png) no-repeat 0px -32px;}
.content .login .bottom a.zhuce{background:url(../pic/pwd-icons-new.png) no-repeat -103px -70px;}
.content .login .bottom span{ width:20px; display:block; float:left; color:#CCC; font-size:10px; line-height:24px; text-align:center;}
.content .login .bottom a:last-child{margin-left:30px; color:#900; font-size:14px;}
總結(jié)
- 上一篇： Box2d源码学习十四TOI之碰撞时间的
- 下一篇： ev3编程变量模块_英文视频教学翻译-机