admin管理员组

文章数量:1558103

1.布局

写之前应该大体有一个布局的思路
header 高度:60
content (文本 图片 表格) 居中
footer 高度：:40

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 - 2019 Tencent Inc. All Rights Reserved.</p>
        </div>

footer比header更简单，用到的知识也是header中有的。但是这里说一个问题，原版footer虽然也是fixed位置，也就是说总在当前浏览器页面底部，不过原版在缩小到footer顶到content的时候就不会在实现总在浏览器底部，而是增长滚动条了。这个问题我当前能力没有解决，在这里提出来一下。不过看这篇博客的应该也是html css初学者吧，所以也可以不太在意

本文标签： 界面邮箱htmlcssqq

版权声明：本文标题：HTML+CSS 仿QQ邮箱登录界面 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1727385896a1112346.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。