【大前端】用html和css写一个QQ邮箱登录页面

怪&

已于 2022-04-17 22:57:24 修改

阅读量1.5w

点赞数 45

分类专栏：课程设计｜课程实践实验报告记录文章标签：前端 elementui javascript

于 2022-01-16 16:04:11 首次发布

本文链接：https://blog.csdn.net/qq_21471309/article/details/122524187

版权

课程设计｜课程实践实验报告记录专栏收录该内容

6 篇文章 1 订阅

订阅专栏

一、HTML代码如下：

命名为：QQ邮箱页面.html

<!DOCTYPE html>
<html>
<head>
<style type="text/css"> @import"./QQ邮箱页面.css";</style> <!--引入“QQ邮箱页面.css”-->
</head>

<body>
    <!--  ------------------------------------      header/顶部    ------------------------------------------>
    <div class="header">
        <a href=""><img src="./左上图1.jpeg"></a>
        <nav>  <!--<nav> 元素作为标注一个导航链接的区域。-->
            <a href="">基本版</a> |  
            <a href="">English</a> | 
            <a href="">手机版</a> | 
            <a href="">企业邮箱</a>
        </nav>
    </div>
        
    <!--  ------------------------------------      central/中部    ------------------------------------------>
    <div class="central">
        <div class="word"><!--中部左文字-->
            <h1>QQ邮箱，常联系！</h1>
            <p>2500年前，人们飞鸽传书</p>
            <p>185年前，莫尔斯发明了电报</p>
            <p>52年前，第一封电子邮件发出</p>
            <p>今天，QQ邮箱联系你、我、他</p>
        </div>

        <img src="./中间图1.jpeg"  /><!--中部中图片-->
        
        <div class="logon"><!--中部右登录框-->
            <div class="firstpart">
                <ul>
                    <li class="wx">微信登录</li>
                    <li class="qq">QQ登录</li>
                </ul>    
            </div>
            <input type="account" placeholder="支持QQ号/邮箱/手机号登录"/>  <!--placeholder:占位符，显示在待输入框中-->
            <input type="password" placeholder="QQ密码"/>
            <input type="checkbox" class="checkbox" /> <!--设置“下次自动登录左边按钮”-->
            <p>下次自动登录</p>
            <input type="button" class="button" value="登&nbsp;录" />
            <a href=""><img src="./二维码图.jpeg" /></a>
            <div class="codeword">
                <a href="">扫码快捷登录</a>
            </div>
            <a href="" class="FogretPassword">忘了密码？</a>
            <a href="" class="NewAccount">注册新账号</a>
        </div>
    </div>

        
    <!--  ------------------------------------      footer/底部    ------------------------------------------>
    <div class="footer">
        <nav>
            <a href="">关于腾讯</a> | 
            <a href="">服务条款</a> |
            <a href="">隐私政策</a> |
            <a href="">客服中心</a> |
            <a href="">联系我们</a> | 
            <a href="">帮助中心</a> | 
            ©1998 - 2021 Tencent Inc. All Rights Reserved.
        </nav>
    </div>

</body>

</html>

二、CSS代码如下：

命名为：QQ邮箱页面.css

* {/*全局设置*/
    margin: 0; /*外边距*/
    padding: 0;/*内边距*/
}

body {
    font-size: 20px;/*文本大小*/
}

/*----------------------------------------------header----------------------------------------------*/
.header{/*顶部设置*/
    height:70px;
    width: 100%;
    background: #eff4fa;
}

.header img{/*顶部图片设置*/
    height: 50px;
    width:210px;
    margin-left:20px;
    margin-top: 10px;
}

.header nav{
    font-size:1px;
    color:darkgray;
    margin-top:-35px;
    margin-right: 50px;
    text-align: right;
}

.header nav a{
    color:blue;
    text-decoration: none;
}

.header nav a:hover{/*鼠标悬停在a时*/
    text-decoration: underline;/*显示下划线*/
}

/*----------------------------------------------central----------------------------------------------*/
.central{/*中部设置*/
    background-color:white;
    height: 600px;
    width: 1000px;
    margin:auto;
    margin-top:100px; /*边框顶部*/
}

.central .word{
    float:left;    /*左浮动*/
    margin-left:50px;
    margin-top: 30px;
}

.central .word h1{
    font-size:25px;
    color:blue;
    margin-bottom:15px;
}

.central .word p{
    font-size:15px;
    line-height: 25px;/*设置行间距*/
}

.central img{
    float:left; /*左浮动，该浮动元素会尽量向左，直到它的外边缘碰到包含框或另一个浮动框的边框为止。*/
    height: 350px;
    width: 310px;
    margin-top: 20px;
    margin-right:60px;
}

.central .logon{/*设置登录边框*/
    float:left;
    margin-top:15px;
    width:320px;
    height:350px;
    border-style: solid;/*设置边框为实线*/
    border-radius: 5px;
    border-width:1px; 
    border-color:gray;
}

.central .logon .firstpart{/*设置内横线分栏*/
    border-bottom-width: 1px;
    border-bottom-style:solid;
    border-bottom-color:gray;
    height:50px;
    line-height: 50px;
}

.central .logon ul li{/*设置列表*/
    list-style-type: none;/*对列表元素进行初始化*/
    font-size: 15px;
    display: block;/*设置其为块级元素，占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形；*/
    height:25px;
    color:gray;
}

.central .logon ul .wx{/*微信登录*/
    float: left;
    margin-left:50px;
    cursor: pointer;/*鼠标指针变成手的形状*/
}

.central .logon ul .qq{/*QQ登录*/
    float: right;
    margin-right:50px;
    cursor: pointer;/*鼠标指针变成手的形状*/
    
}

.central .logon input[type=account]{/*账号输入框*/
    display: inline-block;/*1、使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. */
    /*2、能够改变元素的height，width的值. 3、可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.*/
    height:18px;
    width:250px;
    padding: 10px;/*设置内边距*/
    margin-top: 30px ;
    margin-left: 25px;
}

.central .logon input[type=password]{/*密码输入框*/
    display: inline-block;
    height:18px;
    width:250px;
    padding: 10px;/*设置内边距*/
    margin-top: 15px ;
    margin-left: 25px;
}

.central .logon .checkbox[type=checkbox]{/*选中按钮*/
    float:left;
    height:15px;
    width:15px;
    margin-top:20px;
    margin-left:20px;
    border-width: 1px;
    border-style:solid;
    border-color:blue;
    background:white;
}
.central .logon p{/*设置按钮旁字体“ 下次自动登录 ”*/
    margin-top:18px;
    margin-left:3px;
    float:left;
    font-size:5px;
}
 
.central .logon .button[type=button]{/*设置登录按钮*/
    height:45px;
    width:260px;
    margin-top: 10px;
    margin-left: -3px;
    background-color: blue;
    text-align: center;
    font-size:10px;
    color:white;
    border-width: 1px;
    border-style:solid;
    border-color:blue;
    cursor: pointer;
}

.central .logon img{/* “扫码登录二维码示例图”设置*/
    height: 25px;
    width: 30px;
    margin-left: 100px;
    margin-right: 0px;
    margin-top:10px;
    float:center;
}

.central .logon .codeword {/*设置二维码示例旁字体：“ 扫码快捷登录 ”*/
    margin-top:15px;
    margin-bottom:5px;
    margin-left:3px;
    float:center;
    color: blue;
    font-size:5px;
}

.central .logon .codeword a{/*链接*/
    text-decoration: none;
}

.central .logon .codeword a:hover{/*鼠标悬停在a时*/
    text-decoration: underline;/*显示下划线*/
}

.central .logon .FogretPassword{/*忘了密码?*/
    float:left;
    color:blue;
    font-size:3px;
    margin-left:15px;
    margin-top:20px;
}

.central .logon .NewAccount{/*注册新账号*/
    float:right;
    color:blue;
    font-size:3px;
    margin-right:15px;
    margin-top:20px;
}

.central .logon a{/*链接*/
    text-decoration: none;
}

.central .logon a:hover{/*鼠标悬停在a时*/
    text-decoration: underline;/*显示下划线*/
}

/*----------------------------------------------footer----------------------------------------------*/
.footer{/* 底部设置*/
    background: #eff4fa;
    bottom: 0;/*设置此部分据屏幕下边距距离为0*/
    height:40px;
    width: 100%; /* 也可将此处换为“right:0; ”*/
    text-align: center;
    position: fixed;/*相对于视图窗口定位 */
}

.footer nav {
    font-size:1px;
    color:darkgray;
    margin-top:8px;
    text-align: center;
}

.footer nav a{
    color:blue;
    text-decoration: none;
}

.footer nav a:hover{/*鼠标悬停在a时*/
    text-decoration: underline;/*显示下划线*/
}

三、图片保存

1、命名为“二维码图”：

2、命名为“中间图”：

3、命名为“左上图1”：

四、存储与执行

将“ 一 ”中的HTML代码、“ 二 ”中的CSS代码，“ 三 ”中的三个图片按各自要求命名，放至同一文件夹下，打开“ QQ邮箱页面.html ”与“ QQ邮箱页面.css ”，在html中运行。

五、运行结果：

怪&

关注

45
点赞
踩
174

收藏

觉得还不错? 一键收藏
打赏
15
评论
【大前端】用html和css写一个QQ邮箱登录页面

一、HTML代码如下：命名为：qq邮箱页面.html<!DOCTYPE html><html><head><style type="text/css"> @import"./QQ邮箱页面.css";</style> </head><body> <!-- ------------------------------------
复制链接

扫一扫