cc
本来想加上JS实现选项卡功能的，奈何本人水平实在有限，用JavaScript用到一半就放弃了，真的不会使用啊！！！给你们看看效果吧。
整体布局
个人认为我这个整体布局还是比较科学的，把这个界面分成了三个div部分，整体还是display:block上面的欢迎登录界面，中间的主界面包括登录框，下面的版权和关于我们。我毕竟是初学者，当然就是只会用div盒子一点一点做了哈哈哈
由于考虑到css可能要写比较多，所以分为了两个css来写，一个是base.css主要用于设置一些基础预设，另一个是main.css主要用于写各方面的细节。
登录界面
这个是我本人花了最长事件的地方，因为这里运用的知识很多，各种布局方式，input等等，包括后面的第三方登录框和立即注册用了一个弹性布局，效果还是比较美观的。
细节方面
作为一名初学者，当然要养成代码写注释的好习惯了，另外规范命名（学好英语很重要，尽量不要拼音命名了！！！）提高了代码的可读性。关于图标和图片在哪找，其实百度解决百分之95的问题，还有些小图标实在是不知道往哪里找了，我就去iconfont-阿里巴巴矢量图标库，这里基本常用的图标都找得到，虽然找不到一模一样，类似的也总找得到了。
废话不多说，开始整代码
HTML（index.html)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>京东-欢迎登录</title><link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/main.css"></head><body><!-- 顶部 --><div class="top"><!-- 左边 --><div class="logo"><img src="img/logo.png" alt="" class="logo"><h2 class="wel">欢迎登录</h2></div><!-- 右边 --><div class="survey"><img src="img/massage.png" alt="" ><a href="#">登录页面，调查问卷</a> </div></div> <!-- 条款法律 --><div class="policy"><img src="img/warn.png" alt=""><span class="text">依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a href="#" class="policy">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。</span></div><!-- 主界面 --><div class="main"><!-- 主界面下的子盒子用于放背景图片 --><div class="img"><!-- 登录页 --><div class="login"><!-- 登录页顶部 --><div class="top"><img src="img/warn.png" alt=""><span>京东不会以任何理由要求您转账汇款，谨防诈骗。</span></div><!-- 账户登录和扫码登录选项卡 --><div id="tab"><div class="sel"><ul><div class="left"><li class="off"><a href="">扫码登录</a></li></div><div class="right"><li class="on"><a href="">账户登录</a></li></div></ul> </div><!-- 账户密码登录界面 --><div class="m"><div class="show"><div class="inputs"><input type="text" class="user"><input type="text" class="pwd"><span class="user_img"></span><span class="pwd_img"></span><a href="#">忘记密码</a><input type="button" class="button" value="登 录"></div></div></div></div><!-- 登录页底部 --><div class="login-bottom"><!-- 第三方登录界面 --><div class="other-login"><img src="img/qq.png" alt=""> <a href="#">QQ</a> <img src="img/WeChat.png" alt=""> <a href="#">微信</a></div><!-- 注册界面 --><div class="enroll"><img src="img/login.png" alt=""><a href="#">立即注册</a></div></div> </div></div><!-- 底部 --><div class="bottom"><ul class="about"><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> </ul><!-- 底部版权 --><p class="copy">Copyright © - 京东 版权所有</p></div></body></html>
CSS(base.css)
/* 基本预设 *//*清除页面中标签自带的外间距和内填充*/* {margin: 0;padding: 0;}/*清除ul自带的列表符*/ul, li {list-style: none;}/*去掉a自带的下划线*/a {color: #666666;text-decoration: none;}/* 删除a点击后变蓝色 */a:visited { color: #999999; text-decoration: none; } /* 点击a上面有下划线 且变红*/a:hover{text-decoration: underline;color: red;}/*去掉img自带的边框<当图像加上a标签后，IE浏览器在不去除图像边框时会显示边框>*/img {border: none;}html {height:100%;}body {min-height: 100%;position: relative;}
(main.css)
/* 顶部基础设置 */.top{width: 1000px;margin: 0 auto;padding: 18px;overflow: hidden;}/* 左浮动京东logo和欢迎登录 */.top .logo .logo,.top .logo .wel{float: left;}/* 调整京东logo和欢迎登录之间的距离以及字体颜色和样式 */.top .logo .wel{height: 60px;line-height: 70px;font-weight: normal;margin-left: 25px;color: #333333;}/* 使用元素的相对定位将其调整到合适的界面并调整字体颜色和样式 */.top .survey {position: relative;float: right;top: 45px;font-size: 12px;font-family: SimSun;color: #999999;}/* 政策条款 改背景色、字体、字号并居中*/.policy{margin: 0 auto;padding-top: 10px;padding-bottom:10px;background: #fff8f0;width: 100%;text-align: center;font-size: 12px;font-family: SimSun;color: #999999; }/* 条款 调整颜色*/.policy .policy{padding:0px;color: #333333;}/* 定义主界面高度和颜色*/.main{height: 475px;background-color: #E93854;}/* 导入背景图并居中 */.main .img{width: 990px;height: 475px;/* 或者100% */margin: 0 auto;background: url(../img/main.png);}/* 定义登录页面的高度宽度 并定位好位置 */.main .img .login{width: 350px;height: 410px;background-color: white;float: right;margin-top: 15px;}/* 上边的提醒警告栏 修改padding 字号 字体 */.main .img .login .top{text-align: center;width: 350px;padding: 10px 0;background-color:#fff8f0;color: #666666;font-size: 12px;font-family: SimSun;}/* 扫码登录和账号登录大盒子 */.main .img .login .sel{width: 350px;height: 56px;display: block;}/* 扫码登录和账号登录 */.main .img .login .left,.main .img .login .right{width: 175px;height: 55px;text-align: center;line-height: 55px;font-size: 18px;border-bottom: 1px solid #f4f4f4;}.main .img .login .left{float: left;} .main .img .login .right{float: right;}/* 取消放上去的下划线 */.main .img .login a:hover{text-decoration: none;}.main .img .login .right a{color: #E93854;font-weight: bolder;}/* 两个输入框都定位 */.show{padding-top: 33px;padding-left: 20px;padding-right: 20px;}.show .user,.show .pwd{width: 304px;height: 38px;border: 1px solid #ccc;margin-bottom: 20px;padding-left: 50px;box-sizing: border-box;}.inputs {position: relative;}/* 图标位置定位 */.show span {display: block;width: 36px;height: 36px;border-right: 1px solid #ccc;background-color: #f3f3f3;position: absolute;}/* 将图标导入 */.show .user_img {top: 1px;left: 1px;background: url("../img/account.jpg") no-repeat;}.show .pwd_img {top: 59px;left: 1px;background: url("../img/password.jpg") no-repeat;}/* 忘记密码定位 */.inputs a{float: right;font-size: 12px;font-family: SimSun;padding-bottom: 30px;}/* 登录按钮定位 */.inputs .button{border: 1px solid #e85356;display: block;width: 302px;background: #e4393c;height: 31px;line-height: 31px;color: #fff;font-size: 20px;}/* 底部第三方登录和注册 */.login-bottom{width: 100%;height: 50px;line-height: 50px;border-top:1px solid #f4f4f4 ;background-color: #fcfcfc;display: flex;justify-content: space-around;padding-top: 40px;}/* 调整底部的一些细节 图标与文字的位置等 */.login-bottom .other-login a{position: relative;font-size: 12px;bottom: 5px;}.login-bottom .enroll a{position: relative;font-family: SimSun;font-size: 14px;color: #E93854;bottom: 3px;}/* 底部基础设置 与中央部分的距离调整 文字居中 字体、字号、颜色 */.bottom{margin-top: 25px;text-align: center;font-size: 12px;font-family: SimSun;color: #666666; }/* 调整版权和关于我们项目之间的距离 */.bottom .copy{margin-top: 12px;}
以上就是我的全部代码，一点一点敲的，希望对你们有帮助。
如果你想追求完美，模仿所有，个人建议学习js选项卡以实现扫码登录和账号登录的切换。
