京东登录页 

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title>京东登录页</title>
  6     <style>
  7         header div{
  8             background: url("image/logo2.png") 180px   no-repeat;
  9             padding-left:370px;
 10             font-size: 24px;
 11             height:80px;
 12             line-height:80px;
 13             color: #55565F;
 14         }
 15         .content{
 16             background-color: #e93650;
 17         }
 18         .wrap{
 19             width: 990px;
 20             margin: 0 auto;
 21         }
 22         .login-box{
 23             background: url("image/banner.png")    no-repeat;
 24             height:475px;
 25         }
 26         h2{
 27             color:gray;
 28             font-size: 21px;
 29             padding-left:20px;
 30             line-height: 20px;
 31             height:20px;
 32             margin-top: 24px;
 33             margin-bottom: 0;
 34             font-weight: 400;
 35         }
 36         h2 a{
 37             background: url("image/icon5.jpg") 10px   no-repeat;
 38             float: right;
 39             width:80px;
 40             padding-left:30px;
 41             color: #e9063c;
 42             font-size: 14px;
 43             height:18px;
 44             line-height: 18px;
 45         }
 46         .login-form{
 47             width:340px;
 48             height:273px;
 49             border:1px #A4FFF3 solid;
 50             float:right;
 51             margin-top: 40px;
 52             background: white;
 53         }
 54         #loginForm{
 55             padding:30px 0;
 56         }
 57         .f1{
 58             height: 38px;
 59             border:1px rgba(163, 163, 163, 0.56) solid;
 60             float: left;
 61             padding:  0 ;
 62             margin-bottom: 0;
 63             margin-left: 20px;
 64         }
 65         .f2{
 66             height: 38px;
 67             border:1px rgba(163, 163, 163, 0.56) solid;
 68             float: left;
 69             padding:  0 ;
 70             margin-top: 0;
 71             margin-left: 20px;
 72         }
 73         .kong{
 74             height: 25px;
 75         }
 76         #name,#pwd {
 77             border-left: none;
 78             height:32px;
 79             padding:3px  0 ;
 80             float: left;
 81             border-bottom:1px rgba(163, 163, 163, 0.56) solid;
 82             border-top:1px rgba(163, 163, 163, 0.56) solid;
 83             border-right:1px rgba(163, 163, 163, 0.56) solid;
 84             width:260px;
 85             color: gray;
 86             font-size:14px ;
 87         }
 88         .kong2{
 89             margin-top: 60px;
 90             width: 300px;
 91             margin-left: 20px;
 92             padding-top: 10px;
 93             height: 20px;
 94         }
 95         #auto-login{
 96             float:left;
 97             height: 20px;
 98         }
 99         p span:nth-of-type(1){
100             font-size: 12px;
101             color:gray;
102             height: 20px;
103             line-height: 20px;
104         }
105         p span:nth-of-type(2){
106             display:inline-block;
107             float:right;
108             font-size: 12px;
109             height: 20px;
110             line-height: 20px;
111         }
112         #submit{
113             background-color: #f03c3d;
114             color:white;
115             width: 300px;
116             text-align: center;
117             height: 35px;
118             line-height: 30px;
119             font-size: 17px;
120             margin-left: 20px;
121             border:1px white solid;
122         }
123         footer{
124             text-align: center;
125             color:gray;
126             font-size: 12px;
127         }
128         a{
129             color:gray;
130             text-decoration: none;
131         }
132         a:hover{
133             text-decoration:underline;
134             color:red;
135         }
136     </style>
137 </head>
138 <body>
139 <header>
140     <div>欢迎登录</div>
141 </header>
142 <article class="content">
143     <div class="wrap">
144         <div class="login-box">
145             <div class="login-form">
146                 <h2>京东会员<a href="">立即注册</a></h2>
147                 <form action="" method="post" id="loginForm">
148                     <div class="f1"><input type="image" src="image/icon1.jpg"></div>
149                     <input name="name" placeholder="  邮箱/用户名/已验证手机" type="text" id="name">
150                     <p class="kong"></p>
151                     <div class="f2"><input type="image" src="image/icon2.jpg"></div>
152                     <input name="pwd" type="password" id="pwd">
153                     <p class="kong2">
154                         <input type="checkbox" name="auto-login" id="auto-login"><span>自动登录</span>
155                         <span><a href="">忘记密码?</a></span>
156                     </p>
157                     <input type="submit" id="submit" name="submit" value="登 录">
158                 </form>
159             </div>
160         </div>
161     </div>
162 </article>
163 <footer>
164     <div>
165         <p><a href="">关于我们</a> | <a href="">联系我们</a> | <a href="">人才招聘</a> | <a href="">商家入驻</a> | <a href="">广告服务</a> | <a href="">手机京东</a> | <a href="">友情链接</a> | <a href="">销售联盟</a> | <a href="">京东社区</a> | <a href="">京东公益</a> | <a href="">English Site</a></p>
166         <p>Copyright&copy;2004-2017 京东JD.com 版权所有</p>
167     </div>
168 </footer>
169 </body>
170 </html>

 

posted @ 2021-01-20 09:18  残冰辉  阅读(272)  评论(0)    收藏  举报