这是运行界面
这里放了源码
<!DOCTYPE html><html><head><meta charset="utf-8"><title>京东登录</title><link rel="stylesheet" type="text/css" href="./common.css"/></head><body><div class="header"><img class="logo" src="./image/logo.png" ><a href="#" class="header_one"><span>欢迎登录</span></a></div><div class="content"><div class="contion"><div class="login"><a class="login_a" href="#">扫码登录</a><a class="login_a" href="#"><img src="./image/icon5.jpg" alt="">立即注册</a><form action="#"><div class="login_content"><i><img src="./image/icon1.jpg" alt=""></i><input type="text" name="user" value="" placeholder="邮箱/用户名/手机"></div><div class="login_content"><i><img src="./image/icon2.jpg" alt=""></i><input type="text" name="user" value="" placeholder="密码"></div><div class="fpwd"><div class="fpwd-input"><input type="checkbox"><span>自动登录</span></div><div class="fpwd-pwd"><a href="#">忘记密码？</a></div></div><a class="login_b" href="#">登     录</a></form></div></div></div><div class="footer"><a href="#">关于我们</a><span> | </span><a href="#">联系我们</a><span> | </span><a href="#">人才招聘</a><span> | </span><a href="#">商家入驻</a><span> | </span><a href="#">广告服务</a><span> | </span><a href="#">手机京东</a><span> | </span><a href="#">友情链接</a><span> | </span><a href="#">销售联盟</a><span> | </span><a href="#">京东社区</a><span> | </span><a href="#">京东公益</a><span> | </span><a href="#">English Site</a><p class="footer_m">Copyright © - 京东 版权所有</p></div></body></html>*{margin: 0;padding: 0;/* 头部 */}.header{width: 990px;height: 60px;margin:0 auto;padding: 10px 0;}.header .logo{display: block;margin-right: 20px;float: left;}.header a{color:#999999 ;float: left;height: 60px;line-height: 60px;font-size: 24px;text-decoration: none;}.header a:hover span{color: red;}/* 整个内容 登录页 */.content{background-color: #e93854;}.content .contion{width: 990px;height: 475px;margin: 0 auto;background: url(./image/banner.png) ;}.content .contion .login{width: 346px;height: 338px;float: right;margin-top: 30px;background-color: white;}.content .contion .login .login_header{width: 346px;line-height: 40px;background-color: #fff8f0;font-size: 12px;text-align: center;color: #999999;}.content .contion .login .login_a{display: inline-block;width: 50%;line-height: 55px;text-align: center;/* float: left; */text-decoration: none;color: black;font-size: 18px;border-bottom: 1px solid #f4f4f4;}.content .contion .login .login_a::after{clear: both;}.content .contion .login .login_a:hover{color: red;}.content .contion .login .login_content{width: 304px;height: 38px;border: 1px solid #999999;margin: 0 auto;margin-top: 30px;}.content .contion .login .login_content:nth-of-type(1){margin-bottom: -10px;}.content .contion .login .login_content i{/* display: inline-block; */height: 38px;width: 39px;float: left;border-right: 1px solid #999999;} .content .contion .login .login_content input{/* vertical-align: middle; */box-sizing: border-box;width: 250px;height: 38px;border: none;padding-left: 10px;outline: none;}.fpwd-input{float: left;margin-top: 20px;margin-left: 20px;}.fpwd-pwd{float: right;margin-top: 20px;margin-right: 20px;}.content .contion .login .fpwd a{font-size: 16px;border-bottom: none;color: black;text-decoration: none;}.content .contion .login .fpwd a:hover{color: red;}.content .contion .login .login_b{display: inline-block;width: 304px;line-height: 33px;margin: 30px 21px;background-color: #e4393c;text-align: center;text-decoration: none;color: white;font-size: 18px;}.footer{width: 845px;margin: 0 auto;text-align: center;color: gray;font-size: 14px;margin-top: 20px;}.footer a{text-decoration: none;color: gray;}.footer p{margin-top: 10px;}.footer a:hover{color: #e4393c;}
