相关文章推荐
被表白的眼镜  ·  javax.validation.Unexp ...·  1 年前    · 
千杯不醉的香烟  ·  【数据处理】正则匹配指定字符传后面的字符_正 ...·  2 年前    · 
飘逸的大白菜  ·  android studio 没有 ...·  2 年前    · 
果断的火柴  ·  HttpListenerRequest.In ...·  2 年前    · 
小眼睛的葫芦  ·  Selenium/Xpath/Beautif ...·  2 年前    · 
Code  ›  【大前端】用html和css写一个QQ邮箱登录页面_qq邮箱html代码_怪&的博客
font html代码 border qq邮箱
https://blog.csdn.net/qq_21471309/article/details/122524187
独立的台灯
3 年前
基本版 | English | 手机版 | 企业邮箱

QQ邮箱,常联系!

2500年前,人们飞鸽传书

185年前,莫尔斯发明了电报

52年前,第一封电子邮件发出

今天,QQ邮箱联系你、我、他

  • 微信登录
  • QQ登录
  • 下次自动登录

    扫码快捷登录 忘了密码? 注册新账号
    关于腾讯 | 服务条款 | 隐私政策 | 客服中心 | 联系我们 | 帮助中心 | ©1998 - 2021 Tencent Inc. All Rights Reserved.

    二、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中运行。

     五、运行结果:

    一、HTML代码如下:命名为:qq邮箱页面.html&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;style type="text/css"&gt; @import"./QQ邮箱页面.css";&lt;/style&gt; &lt;!--引入“QQ邮箱页面.css”--&gt;&lt;/head&gt;&lt;body&gt; &lt;!-- ------------------------------------ <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> 然后对这几天的认知学习做一个小笔记 1. 一个盒子的实际高度(宽度)是由content+padding+border+margin组成。 可以通过设定width和height来控制content的大小,并且对于同一个盒子,都可以分别设定4条边的border,padding和margin。 2. 行内元素margin设置 非行内元素块之间margin设置 父子块之间的margin设置...... <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>QQ登录页面</title> <style> a{text-decoration: none;} <label for="username">用户名:</label><br> <input type="text" id="username" name="username"><br> <label for="password">密码:</label><br> <input type="password" id="password" name="password"><br><br> <input type="submit" value="登录"> </form> </body> </html> 这段代码创建了一个包含用户名和密码输入框以及提交按钮的登录表单。 接下来,你可以使用CSS来控制登录页面的布局和样式。 例如,你可以使用CSS定义表单的宽度、输入框的颜色和字体等。 form { width: 300px; input[type="text"], input[type="password"] { color: #666; font-size: 16px; padding: 10px; width: 100%; input[type="submit"] { background-color: #4CAF50; color: white; padding: 10px 20px; font-size: 16px; border: none; cursor: pointer; input[type="submit"]:hover { background-color: #45a049; 上面的代码定义了表单的宽度为300px,输入框的字体颜色为#666,字体大小为16px,以及提交按钮的背景颜色和字体颜色。 希望这些代码能帮
     
    推荐文章
    被表白的眼镜  ·  javax.validation.UnexpectedTypeException: HV000030: No validator could be found for constraint 'org
    1 年前
    千杯不醉的香烟  ·  【数据处理】正则匹配指定字符传后面的字符_正则表达式匹配某个字符后的内容-CSDN博客
    2 年前
    飘逸的大白菜  ·  android studio 没有 profiler_mob64ca12eea322的技术博客_51CTO博客
    2 年前
    果断的火柴  ·  HttpListenerRequest.InputStream 屬性 (System.Net) | Microsoft Learn
    2 年前
    小眼睛的葫芦  ·  Selenium/Xpath/BeautifulSoup - 简书
    2 年前
    今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
    删除内容请联系邮箱 2879853325@qq.com
    Code - 代码工具平台
    © 2024 ~ 沪ICP备11025650号