【HTML+CSS+JS】模仿QQ登录界面

已于 2022-10-30 21:20:20 修改
阅读量1.2w 收藏 191
点赞数 71
分类专栏： 前端小项目 文章标签： css html javascript
于 2022-10-25 10:41:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/btufdycxyffd/article/details/127507693
版权

目录

前言

学了HTML、CSS和JS有了一个月了，JS还未学完，偷懒写一个小项目，用了一个下午，顺便巩固一下所学知识。（内容比较简陋，适合新手）

源代码：https://github.com/yeziyuhai/QQ-login-interface

简介

左边是我的，右边是官方的。没有设计稿和素材，只能自己找，所以是无法做到一模一样的，不够这样子也差不多了。
在这里插入图片描述

布局思路

很明显，简陋的做法是上下两个盒子，中间头像可以定位上面的父级也可以定位下面的父级，这里我选择的是上面，中间内容用一个表单包裹。注册账号和二维码使用定位，父级是大盒子。
.html

    <!-- 登录界面 -->
    <div>
        <div class="login">
            <!-- 顶部 -->
            <div class="top">
                <div class="left">
                    <span class="iconfont icon-QQ"></span>QQ
                </div>
                <div class="right">
                    <span class="iconfont icon-shezhi"></span>
                    <span class="iconfont icon-jianhao"></span>
                    <span class="iconfont icon-chenghao"></span>
                </div>
                <div class="head">
                    <div class="green"></div>
                </div>
            </div>
            <!-- 底部 -->
            <div class="bottom">
                <!-- 表单 -->
                <form action="javascript:;">
                    <div class="input">
                        <div class="text">
                            <label for=""><span class="iconfont icon-QQ"></span></label>
                            <label for=""><span class="iconfont icon-xiala"></span></label>
                            <input type="text" placeholder="QQ号码/手机/邮箱" name="uname">
                        </div>
                        <div class="password">
                            <label for=""><span class="iconfont icon-suoding_huaban"></span></label>
                            <label for=""><span class="iconfont icon-jianpan_o"></span></label>
                            <input type="password" placeholder="密码">                               
                        </div>
                    </div>
                    
                    <div class="check">
                        <!-- 点击文字也可以选中 -->
                        <label><input type="checkbox" >自动登录</label> 
                        <label><input type="checkbox">记住密码</label> 
                        <a href="https://accounts.qq.com/find?aquin" target="_blank">找回密码</a>
                    </div>
                    
                    <input type="submit" value="登录" class="loginBtn">
                </form>
                <!-- 其他 -->
                <a href="https://ssl.zc.qq.com/v3/index-chs.html?from=client&regkey=1720F6EE975B2AFF081EC88BCAE91F145C04012178E039924F1CC17DB69AC184&ADUIN=0&ADSESSION=0&ADTAG=CLIENT.QQ.5929_NewAccount_Btn.0&ADPUBNO=27255" class="signup" target="_blank">注册账号</a>
                <span class="iconfont icon-ico"></span>
                <!-- 手机登录二维码 -->
                </div>
                <div class="mobile">
                    <img src="./images/erweima.png" alt="">
                    <p>用QQ手机版扫描二维码安全登录</p> 
                    <button class="back">返回</button>
                </div>
                <!-- 设置 -->
                <div class="setup">
                    <p>懒得弄了</p> 
                    <button class="back">返回</button>
                </div>
        </div>
    </div>

相关代码

颜色渐变动画

思路是渐变45度角倾斜，之后动画改变定位，当然和官方的不一样，做出差不多效果就行。
.css

.login .top {
  position: relative;
  width: 100%;
  height: 40%;
  background: linear-gradient(-45deg, #23A6D5, rgba(106, 103, 255), rgba(158, 81, 255), #23A6D5, #23D5AB);
  background-size: 400% 400%;
  animation: bg 4s infinite linear forwards;
  color: #fff;
}

@keyframes bg {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

头像

头像绝对定位，顶部相对定位，小绿点绝对定位。

.login .top .head {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0px 5px 10px 0px rgba(118, 118, 118, 0.4);
  background-image: url(/images/head.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-color: rgba(234, 28, 39);
}
.login .top .head .green {
  position: absolute;
  right: -10px;
  bottom: -8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0px 5px 10px 0px rgba(118, 118, 118, 0.4);
  background-color: rgba(9, 241, 117);
}

表单区域

直接搬.less过来，清除一些。这里面挺多细节的，先说好字体大小浏览器最小只能是12px，除非你把自己浏览器最小字号调到10px，视觉上好看一些，不然下面复选框的字会换行。

添加了textChange类，因为需要点击输入框之后样式的改变。

这里耗费我比较多的时间，挺多细节，毕竟我这个人追求完美。
.less

form {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            
            text-align: center;
            margin-top: 8px;
            .input {
                .text {
                    position: relative;
                    width: 100%;
                    border-bottom: 1px solid #ccc;
                    margin-bottom: 5px;

                    .icon-QQ {
                        position: absolute;
                        left: 0;
                        top: 0;
                        color: rgba(184, 186, 188);
                    }

                    .icon-xiala {
                        position: absolute;
                        right: 0;
                        top: 0;
                    }
                }

                .password {
                    position: relative;
                    width: 100%;
                    border-bottom: 1px solid #ccc;

                    .icon-suoding_huaban {
                        position: absolute;
                        left: 2px;
                        top: 4px;
                        font-size: 12px;
                        color: rgba(184, 186, 188);
                    }

                    .icon-jianpan_o {
                        position: absolute;
                        right: 0;
                        top: 0;
                    }
                }

                // 要放在后面，不然层叠
                .textChange {
                    border-bottom: 1px solid rgba(28, 196, 252);
                    .icon-QQ {
                        color: rgba(28, 196, 252);
                    }
                }
                .passWordChange {
                    border-bottom: 1px solid rgba(28, 196, 252);
                    .icon-suoding_huaban {
                        color: rgba(28, 196, 252);
                    }
                }

                input {
                    width: 80%;
                    height: 20px;
                    /* 去掉默认边框样式 */
                    border: 0;
                    outline: none; 
                }
            }

            .check {
                display: flex;
                justify-content: space-between;
                width: 100%;
                margin: 5px 0;
                font-size: 10px;
                color: rgba(166, 166, 166);

                // 多选框大小
                input {
                    // ohhhhhhhhhhh
                    float: left;
                    transform: scale(.8);
                }

                label {
                    position: relative;
                    margin-right: 12px;
                }

                a {
                    color: rgba(166, 166, 166);
                }

                a:hover {
                    color: rgba(166, 190, 177);
                }
            }

            // 点击登录
            .loginBtn {
                width: 100%;
                height: 28px;
                border-radius: 3px;
                background-color: rgba(28, 196, 252);
                color: #fff;
                font-size: 12px;
            }

            .loginBtn:active {
                background-color: rgba(34, 174, 250);
            }
        }

        .signup {
            position: absolute;
            left: 0;
            bottom: 0;
            margin: 5px;
            font-size: 10px;
            color: rgba(166, 166, 166);
        }
        .signup:hover {
            color: rgba(166, 190, 177)
        }

JS相关

拖拽界面、界面关闭、输入框显示、点击二维码使用手机登录
在这里插入图片描述

在这里插入图片描述
.js

// window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像，脚本文件，CSS文件等），就调用的处理函数。
window.addEventListener('load', function() {
    // 1.登录界面
    // 关闭
    var jianhao = this.document.querySelector('.icon-jianhao');
    var chenghao = this.document.querySelector('.icon-chenghao');
    var login = this.document.querySelector('.login');
    jianhao.addEventListener('click', function() {
        login.style.display = 'none';
    })
    chenghao.addEventListener('click', function() {
        login.style.display = 'none';
    })

    // 输入框
    var text = this.document.querySelector('.text');
    var password = this.document.querySelector('.password');
    var textInput = text.querySelector('input');
    var passwordInput = password.querySelector('input');
    
    textInput.addEventListener('focus', function() {
        this.placeholder = '';
        text.className = 'text textChange';
    })
    textInput.addEventListener('blur', function() {
        this.placeholder = 'QQ号码/手机/邮箱';
        text.className = 'text';
    }) 
    passwordInput.addEventListener('focus', function() {
        this.placeholder = '';
        password.className = 'password passWordChange';
    })
    passwordInput.addEventListener('blur', function() {
        this.placeholder = '密码';
        password.className = 'password';
    }) 

    // 拖拽界面
    // 新的坐标 = 鼠标离盒子内距离 - 鼠标距离在网页距离
    var top = this.document.querySelector('.top');
    top.addEventListener('mousedown', function(e) {
        var x = e.pageX - login.offsetLeft;
        var y = e.pageY - login.offsetTop;
        document.addEventListener('mousemove', move);
        function move(e) {
            login.style.left = e.pageX - x + 'px';
            login.style.top = e.pageY - y + 'px';
        }
        document.addEventListener('mouseup', function() {
            document.removeEventListener('mousemove', move);
        })
    })

    // 手机登录
    var ico = this.document.querySelector('.icon-ico');
    var mobile = this.document.querySelector('.mobile');
    var bottom = this.document.querySelector('.bottom');
    var head = this.document.querySelector('.head');
    var back = this.document.querySelector('.back');
    ico.addEventListener('click', function() {
        mobile.style.display = 'block';
        bottom.style.display = 'none';
        head.style.display = 'none';
    })
    back.addEventListener('click', function() {
        bottom.style.display = 'block';
        head.style.display = 'block';
        mobile.style.display = 'none';
    })
})

总结

多动手技术才会提升，写代码才会熟练，之后也会更新这一系列文章。

叶子与海
关注
  • 71
    点赞
  • 踩
  • 191
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 49
    评论
专栏目录
HTML+CSS+JS的爱心代码.zip
06-19
HTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码.zipHTML+CSS+JS的爱心代码....
高仿QQ登陆界面
07-04
用Qt5做的高仿登陆界面，可以直接运行，由于版本原因，Qt4运行可能需要修改一下。
QQ登录页面制作
m0_72852791的博客
12-14 599
【代码】QQ登录页面制作。
使用html+css3实现QQ登录界面
black_bamboo的博客
08-06 5968
1.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>20210806exm_QQlogin</title> <style> /*初始化样式*/ html,body,dl,dd,p,h1,h2,h3,h4,h5,h6,form,input,textarea,button{
html实战例子: 简易的qq登录界面
辉小歌的博客
10-01 6047
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>QQ登录页面</title> <style> a{text-decoration: none;}
html-QQ登陆界面
热门推荐
straw_的博客
02-17 1万+
初学30节课html的入门课程，花了几个小时模仿了一个qq的登陆界面。 效果图如下： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scal...
html+css 制作简单QQ登录页面
m4587的博客
07-27 6454
HTML+css制作简单QQ登录页面。欢迎一起动手创作交流讨论。
HTML +CSS制作QQ登录页面
Pythonfinish的博客
11-30 2982
Html,CSS,QQ，校园官网制作
QQ注册界面仿写（HTML+CSS+JS）
不迁怒，不贰过。小知识，大智慧。
12-16 1万+
1:1还原仿写的QQ注册界面（利用HTML+CSS+JS技术）
用html写一个QQ空间登录页面
weixin_35756373的博客
12-30 677
这是一个基本的 QQ 空间登录页面的 HTML 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>QQ空间登录</title> </head> <body> <h1>QQ空间登录</h1> ...
用HTML写手机QQ登录界面
weixin_44768794的博客
10-22 4676
把HTML按钮设置为圆形 <button style="border-radius: 50% ;width: 60px;height: 60px;border: none;background-color: dodgerblue"><b>登录</b></button><br/> 调整按钮中字体大小 style = “font-size: 30px”; HTML将文字写放置左下角 忘记密码 HTML字体加粗 ...
HTML5+CSS3 精美登陆界面源码
01-19
3个很精美的登陆界面，全都是用HTML5+CSS3开发的，所以可能不适合低版本IE浏览器。大家可以下来看看，做的超级漂亮的。
html+css+js模仿淘宝搜索商品页面
11-11
纯html+css+js实现，百分之90以上和原网站基本相同
美食网站js+html+css
01-03
利用js+html，简单的美食网站设计，完整源代码+网站图片
基于HTML5+css+JS的精美登陆注册界面
03-22
基于HTML5+css+JS的精美登陆注册界面
css利用transform:skew()属性画一个大屏的背景斜面四边形特效
最新发布
Demon's blog
04-27 290
使用css transform function中的skew()方法实现画其中一个斜面，然后调整背景色实现ß。在工作工程中需要写一个如下的大屏背景，是由几个斜面做成的效果。2. 添加transform属性。4. 重复三个，注意背景色不一样。3. 添加渐变背景色和阴影。
【React】CSS 局部样式
小秀的博客
04-26 440
的时候，如果 CSS 文件名包含 module，那么说明该 CSS 是一个局部 CSS 样式文件，类似于 vue 中的 scoped。
CSS中的圆角和阴影
小何代码咖啡馆
04-21 1283
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（可选值）将外（盒子的背面）阴影改为内（盒子之上）阴影。CSS3 中新增了盒子阴影，可以使用。属性为盒子添加阴影。（可选值）阴影模糊程度。（可选值）阴影模糊程度。
前端科举八股文-CSS篇
星海拾遗
04-25 615
BFC 块级格式化上下文，它是指页面的一块独立的渲染区域，和其他区域相互独立出来互不干扰。它可以解决外边距折叠和高度塌陷的问题。根据它的定义，可以设置position不为static，overflow不为visible，或者设置浮动都可以设置BFC。
用html+css+js写一个登陆界面
05-26
好的，以下是一个简单的登录界面的HTML，CSS和JS代码： HTML代码： ```html <!DOCTYPE html> <html> <head> <title>Login Form</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>Login Form</h1> <form> <label for="username">Username:</label> <input type="text" id="username" name="username" required> <label for="password">Password:</label> <input type="password" id="password" name="password" required> <button type="submit" id="submit-btn">Login</button> </form> </div> <script src="script.js"></script> </body> </html> ``` CSS代码： ```css body { background-color: #f2f2f2; font-family: Arial, sans-serif; } .container { margin: 100px auto; background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); max-width: 400px; } h1 { text-align: center; margin-bottom: 30px; } form { display: flex; flex-direction: column; align-items: center; } label { margin-top: 10px; } input { padding: 10px; margin-bottom: 20px; border-radius: 5px; border: none; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); } button { padding: 10px 20px; background-color: #4CAF50; color: #fff; border: none; border-radius: 5px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); cursor: pointer; } ``` JS代码： ```js const form = document.querySelector('form'); const submitBtn = document.querySelector('#submit-btn'); submitBtn.addEventListener('click', function(event) { event.preventDefault(); const username = form.username.value; const password = form.password.value; if (username === '' || password === '') { alert('Please enter a username and password.'); } else if (username === 'admin' && password === 'password') { alert('Login successful!'); form.reset(); } else { alert('Incorrect username or password. Please try again.'); form.reset(); } }); ``` 这个登录界面包含一个包含用户名和密码输入字段的表单以及一个提交按钮。当用户点击提交按钮时，JavaScript代码将检查用户名和密码是否为空，是否正确，并相应地显示警报消息。CSS代码用于为页面提供样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 49
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

叶子与海

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值