HTML和CSS实现京东登录页面（html css代码详解）

HTML代码

基本布局

下载链接地址

/download/dwjdj/15807158

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>京东-欢迎登陆</title><meta name="keywords" content="京东在线商城"><meta name="description" content="电商网站"><link rel="icon" href="favicon.ico"><link rel="stylesheet" href="./css/login.css"><link rel="stylesheet" href="./css/base.css"></head><body><div class="login_w"><div class="l_login"><a href="#">京东首页</a><b></b></div><div class="r_login"><a href="#">登录页面，调查问卷</a><b></b></div></div><div class="main_content"><div class="text"><b></b><p>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！新版《京东隐私政策》已上线，将更有利于保护您的个人隐私。</p></div><div class="login_w"><div class="form"><div class="form_text"><p>京东不会以任何理由要求您转账汇款，谨防诈骗。</p><b></b></div><div class="top"><a href="#">扫码登录</a><a href="#" class="one">账户登录</a></div><div class="middle"><div class="inputs"><input type="text" class="public user"><input type="text" class="public pwd"><span class="user_img"></span><span class="pwd_img"></span><a href="#">忘记密码</a><input type="button" class="btn" value="登    录"></div></div><div class="bottom"><a href="#" class="qq"><b></b>QQ</a><a href="#" class="wx"><b></b>微信</a><a href="#" class="register"><b></b>立即注册</a></div></div></div></div><div class="footer"><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><p class="copyright">Copyright © - 京东版权所有</p></div></body></html>

css代码

初始化文件(base.css)

p,h1,h2,h3,h4,h5,h6,ul,li,ol,dl,dd,dt,body{margin: 0;padding: 0;font-size: 12px;font-family: "微软雅黑";color: #666666;list-style: none;}img,input{outline-style: none;padding: 0;margin: 0;border: none;vertical-align: middle;}.clearfix::after{content: "";height: 0px;line-height: 0px;clear: both;visibility: hidden;display: block;}.clearfix{*zoom:1;}a{text-decoration: none;color: #666666;}a:hover{color:#e4393c;}/*登录的版心*/.login_w{width: 990px;margin: 0 auto;}/*首页的版心*/.w{width: 1190px;margin: 0 auto;}

login.css

.login_w{background-color: white;height: 92px;}.l_login{float: left;padding-top: 22px;}.r_login{float: right;padding-top: 65px;position: relative;}.r_login b{width: 18px;height: 14px;display: block;background: url("../images/q-icon.png") no-repeat;position: absolute;left: -22px;bottom: -1px;}.l_login a{width: 170px;height: 60px;display: inline-block;background: url("../images/logo-05-b.png") no-repeat;text-indent: -2000px;vertical-align: bottom;}.l_login b{width: 110px;height: 40px;display: inline-block;background: url("../images/l-icon.png") no-repeat;vertical-align: bottom;}.text{height: 35px;background-color: #fff8f0;line-height: 35px;text-align: center;position: relative;}.text b{display: inline-block;width: 16px;height: 16px;background: url("../images/icon-tips.png") no-repeat;position: absolute;left: 268px;top: 9px;}.main_content{width: 100%;height: 510px;background-color: #e93854;}.main_content .login_w{height: 475px;background: url("../images/登录背景.png") no-repeat;}.main_content .form{width: 346px;height: 400px;box-sizing: border-box;background-color: #fff;float: right;margin-top: 10px;}.main_content .form_text{height: 38px;background-color: #fff8f0;line-height: 38px;padding-left: 50px;position: relative;}.main_content .form_text b{display: block;width: 16px;height: 16px;background: url("../images/icon-tips.png") no-repeat;position: absolute;top: 11px;left: 30px;}.main_content .top{height: 54px;line-height: 54px;display: flex;border-bottom: 1px solid #ccc;text-align: center;}.main_content .top a{flex: 1;font-size: 18px;font-weight: 700;border-right: 1px solid #ccc;}.main_content .top .one{border-right: none;}.form .middle{padding-top: 33px;padding-left: 20px;padding-right: 20px;}.form .middle .public{width: 304px;height: 38px;border: 1px solid #ccc;margin-bottom: 20px;padding-left: 50px;box-sizing: border-box;}.form .inputs {position: relative;}.form .middle span {display: block;width: 36px;height: 36px;border-right: 1px solid #ccc;background-color: #f3f3f3;position: absolute;}.form .middle .user_img {top: 1px;left: 1px;background: url("../images/pwd-icons-new.png") no-repeat;}.form .middle .pwd_img {top: 59px;left: 1px;background: url("../images/pwd-icons-new.png") no-repeat -48px 0px;}.inputs a {float: right;}.inputs .btn {width: 100%;height: 36px;background-color: #e4393c;color: #fff;margin-top: 20px;font-size: 20px;text-align: center;}.bottom {margin-top: 30px;border-top: 1px solid #ccc;height: 55px;line-height: 55px;color: #cccccc;}.qq,.wx{display: inline-block;width: 70px;height: 55px;padding-left: 35px;box-sizing: border-box;}.bottom a {position: relative;}.qq b {width: 19px;height: 18px;display: block;background: url("../images/QQ-weixin.png") no-repeat;position: absolute;top: 18px;left: 13px;}.wx b{width: 19px;height: 18px;display: block;background: url("../images/QQ-weixin.png") no-repeat right;position: absolute;top: 18px;left: 13px;}.bottom .register{margin-left: 120px;font-size: 15px;}.bottom .register b{width: 19px;height: 18px;display: block;background: url("../images/pwd-icons-new.png") no-repeat -104px -75px;position: absolute;top: 2px;left: -20px;}.footer {text-align: center;padding-top: 20px;}.footer a {padding: 0 10px;}.footer .copyright{padding-top: 15px;padding-bottom: 40px;}