1.布局
写之前应该大体有一个布局的思路2.编写框架部分
<!DOCTYPE html><html><meta charset="utf-8"><title>登录qq邮箱</title><style type="text/css">*{padding:0;margin:0;}.header{height:60px;width:100%;background:blue;}.content{width:1100px;height:500px;margin:auto;margin-top:80px;background:pink;}.footer{position: fixed;bottom:0;left:0;right:0;height:40px;background:yellow;}</style><body><div class="header">header</div><div class="content">content</div><div class="footer">footer</div></body></html>
完成后的效果就是这个样子，当然中间content宽度不一定如此，后面添加文字图片后可以适当加减宽度。
3.编写header代码
css如下body{font-size:12px;}.header{height:60px;width:100%;line-height:60px;background: #eff4fa;border-bottom:1px solid #d6dfea;}.header img{width:200px;height:56px;margin-left:20px;}.header nav{text-align: right;margin-top:-80px;margin-right:40px;letter-spacing: 0.5px;}.header nav a{color:#1d5494;text-decoration: none;}.header nav a:hover{text-decoration: underline;}
html如下
<div class="header"><img src="tubiao.png"><nav><a href="#">基本版</a> | <a href="#">English</a> | <a href="#">手机版</a> | <a href="#">企业邮箱</a></nav></div>
header没什么难度，说一下nav和img为什么没用float浮动，因为缩小后宽度不够，nav会被挤到下面的块中，布局就很混乱了。
4.编写footer代码
css如下.footer{position: fixed;bottom:0;left:0;right:0;height:40px;line-height:40px;border-top:1px solid #d6dfea;background:#eff4fa;text-align: center;color:#b6b6b6;letter-spacing: 0.5px;}.footer a{color:#1d5494;text-decoration: none;}.footer a:hover{text-decoration: underline;}
html如下
<div class="footer"><p><a href="#">关于腾讯</a> | <a href="#">服务条款</a> | <a href="#">隐私政策</a> | <a href="#">客服中心</a> | <a href="#">联系我们</a> | <a href="#">帮助中心</a> | ©1998 - Tencent Inc. All Rights Reserved.</p></div>
footer比header更简单，用到的知识也是header中有的。但是这里说一个问题，原版footer虽然也是fixed位置，也就是说总在当前浏览器页面底部，不过原版在缩小到footer顶到content的时候就不会在实现总在浏览器底部，而是增长滚动条了。这个问题我当前能力没有解决，在这里提出来一下。不过看这篇博客的应该也是html css初学者吧，所以也可以不太在意这个问题，footer的位置用absolute也可以试试哦。
5.编写content代码
（1）左边文字部分
css如下.content .text{float:left;margin-top:40px;margin-left:70px;line-height: 200%;}.content .text h1{color:#1d5494;margin-bottom:20px;}.content .text p{font-size:13px;}
html如下
<div class="content"><div class="text"><h1>QQ邮箱，常联系！</h1><p>到头来，</p><p>我们记住的，</p><p>不是敌人的攻击，</p><p>而是朋友的沉默。</p><p>——马丁·路德·金</p><p>插画来自丑丑(两岁)</p></div></div>
（2）中间图片部分
编写这一部分的时候要注意父div和子div的对应关系，text和pic同属于content下的子div，他们俩的等级是一样的，所以写html的时候千万不要错位哦css如下
.content .pic{float:left;margin-top:25px;margin-right:60px;}
html如下
<div class="pic"><img src="picture.png" width="320" height="360"> </div>
（3）右边表格部分
表格部分麻雀虽小五脏俱全，有很多input类型的块要写，所以css内容非常多，在做的时候只要一步一步来，由外框login开始，然后把tab(qq微信)选项做好，最后再依次从上往下完成账号密码输入框等等就可以了，css内容固然多但也大同小异。css如下
.content .login{float:left;width:350px;height:400px;border:1px solid #1d5494;}.content .login .sidebar{border-bottom:1px solid #1d5494;height:50px;line-height: 50px;}.content .login ul li{list-style-type: none;display:block;height:50px;font-size:16px;font-family: "微软雅黑";color:gray;}.content .login ul .tab1{float:left;margin-left:45px;cursor: pointer;}.content .login ul .tab2{float:right;margin-right:45px;cursor: pointer;}.content .login .acount{margin-top:40px;margin-left:27px;width:280px;height:35px;font-family: "微软雅黑";}.content .login .password{margin-top:15px;margin-left:27px;width:280px;height:35px;font-family: "微软雅黑";}.content .login .checkbox{float:left;margin-top:30px;margin-left:30px;width:20px;height:20px;border:1px solid black;background:white;}.content .login p{margin-top:30px;float:left;}.content .login .submit{margin-left:27px;margin-top:10px;width:280px;height:40px;background:cornflowerblue;border:1px solid cornflowerblue;font-size:16px;color:white;font-family:"微软雅黑";cursor: pointer; }.content .login .code{margin-top:10px;margin-left:130px;color:#1d5494;cursor: pointer;font-size:13px;}.content .login .forget{float:left;margin-top:80px;margin-left:30px;}.content .login .new{float:right;margin-top:80px;margin-right:30px;}.content .login a{color:#1d5494;text-decoration: none;}.content .login a:hover{text-decoration: underline;}
html如下
<div class="login"><ul class="sidebar"><li class="tab1">微信登录</li><li class="tab2">QQ登陆</li></ul><input type="text" placeholder=" 支持QQ号/邮箱/手机号登录" class="acount" /><br><input type="password" placeholder=" QQ密码" class="password" /><br><input type="checkbox" class="checkbox" /><p>下次自动登录</p><br><input type="submit" value="登 录" class="submit"><nav><a href="#" class="forget">忘了密码？</a><a href="#" class="new">注册新账号</a></nav></div>
做到这里大体已经完成，再将有背景的地方改成对应颜色，精细的调整下css代码即可
6.完整代码
<!DOCTYPE html><html><meta charset="utf-8"><title>登录qq邮箱</title><style type="text/css">*{padding:0;margin:0;}body{font-size:12px;}.header{height:60px;width:100%;line-height:60px;background: #eff4fa;border-bottom:1px solid #d6dfea;}.header img{width:200px;height:56px;margin-left:20px;}.header nav{text-align: right;margin-top:-80px;margin-right:40px;letter-spacing: 0.5px;}.header nav a{color:#1d5494;text-decoration: none;}.header nav a:hover{text-decoration: underline;}.content{width:1100px;height:500px;margin:auto;margin-top:80px;}.content .text{float:left;margin-top:40px;margin-left:70px;line-height: 200%;}.content .text h1{color:#1d5494;margin-bottom:20px;}.content .text p{font-size:13px;}.content .pic{float:left;margin-top:25px;margin-right:60px;}.content .login{float:left;width:350px;height:400px;border:1px solid #1d5494;}.content .login .sidebar{border-bottom:1px solid #1d5494;height:50px;line-height: 50px;}.content .login ul li{list-style-type: none;display:block;height:50px;font-size:16px;font-family: "微软雅黑";color:gray;}.content .login ul .tab1{float:left;margin-left:45px;cursor: pointer;}.content .login ul .tab2{float:right;margin-right:45px;cursor: pointer;}.content .login .acount{margin-top:40px;margin-left:27px;width:280px;height:35px;font-family: "微软雅黑";}.content .login .password{margin-top:15px;margin-left:27px;width:280px;height:35px;font-family: "微软雅黑";}.content .login .checkbox{float:left;margin-top:30px;margin-left:30px;width:20px;height:20px;border:1px solid black;background:white;}.content .login p{margin-top:30px;float:left;}.content .login .submit{margin-left:27px;margin-top:10px;width:280px;height:40px;background:cornflowerblue;border:1px solid cornflowerblue;font-size:16px;color:white;font-family:"微软雅黑";cursor: pointer; }.content .login .code{margin-top:10px;margin-left:130px;color:#1d5494;cursor: pointer;font-size:13px;}.content .login .forget{float:left;margin-top:80px;margin-left:30px;}.content .login .new{float:right;margin-top:80px;margin-right:30px;}.content .login a{color:#1d5494;text-decoration: none;}.content .login a:hover{text-decoration: underline;}.footer{position: fixed;bottom:0;left:0;right:0;height:40px;line-height:40px;border-top:1px solid #d6dfea;background:#eff4fa;text-align: center;color:#b6b6b6;letter-spacing: 0.5px;}.footer a{color:#1d5494;text-decoration: none;}.footer a:hover{text-decoration: underline;}</style><body><div class="header"><img src="tubiao.png"><nav><a href="#">基本版</a> | <a href="#">English</a> | <a href="#">手机版</a> | <a href="#">企业邮箱</a></nav></div><div class="content"><div class="text"><h1>QQ邮箱，常联系！</h1><p>到头来，</p><p>我们记住的，</p><p>不是敌人的攻击，</p><p>而是朋友的沉默。</p><p>——马丁·路德·金</p><p>插画来自丑丑(两岁)</p></div><div class="pic"><img src="picture.png" width="320" height="360"> </div><div class="login"><ul class="sidebar"><li class="tab1">微信登录</li><li class="tab2">QQ登陆</li></ul><input type="text" placeholder=" 支持QQ号/邮箱/手机号登录" class="acount" /><br><input type="password" placeholder=" QQ密码" class="password" /><br><input type="checkbox" class="checkbox" /><p>下次自动登录</p><br><input type="submit" value="登 录" class="submit"><nav><a href="#" class="forget">忘了密码？</a><a href="#" class="new">注册新账号</a></nav></div></div><div class="footer"><p><a href="#">关于腾讯</a> | <a href="#">服务条款</a> | <a href="#">隐私政策</a> | <a href="#">客服中心</a> | <a href="#">联系我们</a> | <a href="#">帮助中心</a> | ©1998 - Tencent Inc. All Rights Reserved.</p></div></body></html>
完成
本人也是前端的新手，学习了几天有所感悟，这篇仿qq邮箱登录界面的博客算是对自己学习的一个总结，希望也能帮到需要的人吧。
