qq主页面

最新推荐文章于 2023-04-15 10:14:50 发布
最新推荐文章于 2023-04-15 10:14:50 发布
阅读量2.1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fzhwk/article/details/78112849
版权

qq主页面



<style type="text/css">
    * {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    a,
    img {
        border: 0;
    }

    #move_div {
        position: absolute;
        width: 430px;
        height: 330px;
        border: solid 1px #EBF2F9;
    }

    #bottom {
        width: 430px;
        height: 148px;
        position: absolute;
        background-color: #EBF2F9;
    }

    #tx {
        position: absolute;
        width: 80px;
        height: 80px;
        margin-left: 43px;
        margin-top: 12px;
        /*border: solid 1px black;*/
        border-radius: 5px;
    }
    #tx img{
        width:80px;
        height: 75px;
    }
    #QQ {
        margin-left: 135px;
        margin-top: 12px;
    }

    #QQ input {
        font-size: 13px;
        line-height: 20px;
        outline: none;
        width: 193px;
        height: 30px;
        border-radius: 5px;
        border: solid 1px gainsboro;
        text-indent: 4px;
    }

    #QQ input:hover {
        border: solid 1px dodgerblue;
    }

    #QQ a {
        font-size: 12px;
        text-decoration: none;
        color: #2685E3;
        font-family: "微软雅黑";
    }

    #QQ a:hover {
        opacity: 0.5
    }

    #dl {
        width: 193px;
        height: 30px;
        background-color: dodgerblue;
        outline: none;
        border: none;
        font-size: 12px;
        color: white;
        border-radius: 4px;
        display: block;
        margin-top: 32px;
        font-family: "微软雅黑";
    }

    #dl:hover {
        background-color: #3CC3F5;
    }

    .min {
        width: 27px;
        height: 27px;
        /*border: 1px solid red;*/
        position: absolute;
        right: 27px;
        top: 0px;
        z-index: 110;
    }

    .min2 {
        width: 27px;
        height: 27px;
        line-height: 27px;
        text-align: center;
        position: absolute;
        right: 27px;
        top: 4px;
        z-index: 110;
        color: white;

    }

    .min:hover {
        cursor: default;
        background-color: #FFFFFF;
        opacity: 0.3;
        -moz-opacity: 0.3;
    }

    .tz{
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100px;
            z-index: 100;
        }
        .tz:hover{
            cursor: move;
        }

    .min_div{
            position: absolute;
            bottom:5px ;
            left: 5px;
            width: 150px;
            height: 30px;
            background-color:#0096ED;
            line-height: 30px;
            text-align: center;
            color: #FFFFFF;
            display: none;
        }

    .min_div:hover{
            cursor: pointer;
            opacity: 0.8;
        }



    .closeLogin {
        position: absolute;
        right: 0px;
        top: 0px;
        width: 27px;
        height: 27px;
        z-index: 110;
        font-size: 19px;
    }

    .closeLogin2 {
        position: absolute;
        right: 0px;
        top: 0px;
        width: 27px;
        height: 27px;
        font-size: 19px;
        color: white;
        text-align: center;
        line-height: 27px;
    }

    .closeLogin:hover {
        cursor: default;
        filter: Alpha(opacity=30);
        /*border: 1px solid #FFFFFF;*/
        background-color: red;
        opacity: 0.8;
    }

    .showLogin {
        font-family: "宋体";
        width: 88px;
        height: 88px;
        /*border: 1px solid red;*/
    }
    /*.showLogin:hover{
        background-color: dodgerblue;
        opacity: 0.2;
    }*/

    .showLogin img {
        margin-top: 2px;
        width: 60px;
        height: 60px;
        margin-left: 12px;
    }

    #check{
        width: 10px;
        height: 10px;

    }

    .ccc{
        position: absolute;
        margin-left: -30px;
        margin-top: 7px;
    }

    .ddd{
        /*border: 1px solid black;*/
        position: absolute;

        color: gray;
        font-size:13px;
        font-family: "微软雅黑";
        margin-left:30px;
        margin-top:3px ;
    }
    .remember{
        position: absolute;
        margin-left: 75px;
        margin-top: 7px;
    }
    .eee{
        /*border: 1px solid black;*/
        position: absolute;
        color: gray;
        font-size:13px;
        font-family: "微软雅黑";
        margin-left:135px;
        margin-top:3px ;
    }
</style>
<script>
    var move_div, min_div;

    window.onload = function() {

        move_div = document.getElementById("move_div");
        min_div = document.getElementById("min_div");
    }

    //显示登录窗口
    function showLogin() {
        move_div.style.display = "block"

    }

    //登录窗口最小化

        function minLogin(){
            move_div.style.display = "none";
            min_div.style.display = "block";
        }


        //登录窗口最大化

        function maxLogin(){
            move_div.style.display = "block";
            min_div.style.display = "none";
        }

    //关闭窗口
    function closeLogin() {
        move_div.style.display = "none";
    }
</script>
<script type="text/javascript" src="js/js/move.js" ></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>


登录

<div class="closeLogin" onclick="closeLogin()"></div>
<div id="move_div" onmousedown="down()" onmouseup="up()" onmousemove="move()">


            <!--实现拖拽-->
        <div class="tz"></div>



    <!--上半部分蓝色动态图-->

    <div id="container" style="width:430px;height:182px;">
        <!--<span id="bigQQ" style="font-size: 60px;">
            QQ
        </span>-->
        <div class="min2">
            <font style="font-size: 17px;font-weight: 900px;">－</font>
        </div>
        <div class="min" onclick="minLogin()"></div>

        <div class="closeLogin2">
            <font style="font-size:22px;">×</font>
        </div>
        <div class="closeLogin" onclick="closeLogin()"></div>

        <div id="anitOut"></div>
    </div>

    <!--下半部分选项等-->
    <div id="bottom">
        <div id="tx">
            <img src="img/img/news_default_AF2F541937CE17C5F3C7A0819D5BEBE8.jpg"/>
        </div>
        <div id="QQ">
            <input type="text" value="149772262"/>
            <a href="https://ssl.zc.qq.com/v3/index-chs.html?from=client&pt_clientver=5539&pt_src=1&ptlang=2052&regkey=4B0AE3ED88DFC374570559FD92BEC59C3A8FD333343989A73CE98FD31949E79E&ADUIN=0&ADSESSION=0&ADTAG=CLIENT.QQ.5539_NewAccount_Btn.0&ADPUBNO=26730">&nbsp;&nbsp;&nbsp;注册账号</a><br />
            <input type="password" placeholder="&nbsp;密码" onfocus="this.placeholder=''" onblur="this.placeholder='&nbsp;密码'" />
            <a href="https://aq.qq.com/v2/uv_aq/html/reset_pwd/pc_reset_pwd_input_account.html?v=4.0&old_ver_account=149772262">&nbsp;&nbsp;&nbsp;找回密码</a><br />
            <div class="ccc">
            <input type="checkbox" name="vehicle" value="Bike" style="zoom: 50%;">
            </div>
            <font class="ddd">自动登录</font>

            <div class="remember">
            <input type="checkbox" name="vehicle" value="Bike" style="zoom: 50%;">
            </div>

            <font class="eee">记住密码</font>


            <button id="dl">登&nbsp;&nbsp;录</button>
        </div>
    </div>
</div>


<script type="text/javascript">
    $(function() {
        if(!window.ActiveXObject && !!document.createElement("canvas").getContext) {
            $.getScript("http://im-img.qq.com/pcqq/js/200/cav.js?_=1428576021379",
                function() {
                    var t = {
                        width: 1.5,
                        height: 1.5,
                        depth: 10,
                        segments: 12,
                        slices: 6,
                        xRange: 0.8,
                        yRange: 0.1,
                        zRange: 1,
                        ambient: "#525252",
                        diffuse: "#FFFFFF",
                        speed: 0.0002
                    };
                    var G = {
                        count: 2,
                        xyScalar: 1,
                        zOffset: 100,
                        ambient: "#002c4a",
                        diffuse: "#005584",
                        speed: 0.001,
                        gravity: 1200,
                        dampening: 0.95,
                        minLimit: 10,
                        maxLimit: null,
                        minDistance: 20,
                        maxDistance: 400,
                        autopilot: false,
                        draw: false,
                        bounds: CAV.Vector3.create(),
                        step: CAV.Vector3.create(Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1))
                    };
                    var m = "canvas";
                    var E = "svg";
                    var x = {
                        renderer: m
                    };
                    var i, n = Date.now();
                    var L = CAV.Vector3.create();
                    var k = CAV.Vector3.create();
                    var z = document.getElementById("container");
                    var w = document.getElementById("anitOut");
                    var D, I, h, q, y;
                    var g;
                    var r;

                    function C() {
                        F();
                        p();
                        s();
                        B();
                        v();
                        K(z.offsetWidth, z.offsetHeight);
                        o()
                    }

                    function F() {
                        g = new CAV.CanvasRenderer();
                        H(x.renderer)
                    }

                    function H(N) {
                        if(D) {
                            w.removeChild(D.element)
                        }
                        switch(N) {
                            case m:
                                D = g;
                                break
                        }
                        D.setSize(z.offsetWidth, z.offsetHeight);
                        w.appendChild(D.element)
                    }

                    function p() {
                        I = new CAV.Scene()
                    }

                    function s() {
                        I.remove(h);
                        D.clear();
                        q = new CAV.Plane(t.width * D.width, t.height * D.height, t.segments, t.slices);
                        y = new CAV.Material(t.ambient, t.diffuse);
                        h = new CAV.Mesh(q, y);
                        I.add(h);
                        var N, O;
                        for(N = q.vertices.length - 1; N >= 0; N--) {
                            O = q.vertices[N];
                            O.anchor = CAV.Vector3.clone(O.position);
                            O.step = CAV.Vector3.create(Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1));
                            O.time = Math.randomInRange(0, Math.PIM2)
                        }
                    }

                    function B() {
                        var O, N;
                        for(O = I.lights.length - 1; O >= 0; O--) {
                            N = I.lights[O];
                            I.remove(N)
                        }
                        D.clear();
                        for(O = 0; O < G.count; O++) {
                            N = new CAV.Light(G.ambient, G.diffuse);
                            N.ambientHex = N.ambient.format();
                            N.diffuseHex = N.diffuse.format();
                            I.add(N);
                            N.mass = Math.randomInRange(0.5, 1);
                            N.velocity = CAV.Vector3.create();
                            N.acceleration = CAV.Vector3.create();
                            N.force = CAV.Vector3.create()
                        }
                    }

                    function K(O, N) {
                        D.setSize(O, N);
                        CAV.Vector3.set(L, D.halfWidth, D.halfHeight);
                        s()
                    }

                    function o() {
                        i = Date.now() - n;
                        u();
                        M();
                        requestAnimationFrame(o)
                    }

                    function u() {
                        var Q, P, O, R, T, V, U, S = t.depth / 2;
                        CAV.Vector3.copy(G.bounds, L);
                        CAV.Vector3.multiplyScalar(G.bounds, G.xyScalar);
                        CAV.Vector3.setZ(k, G.zOffset);
                        for(R = I.lights.length - 1; R >= 0; R--) {
                            T = I.lights[R];
                            CAV.Vector3.setZ(T.position, G.zOffset);
                            var N = Math.clamp(CAV.Vector3.distanceSquared(T.position, k), G.minDistance, G.maxDistance);
                            var W = G.gravity * T.mass / N;
                            CAV.Vector3.subtractVectors(T.force, k, T.position);
                            CAV.Vector3.normalise(T.force);
                            CAV.Vector3.multiplyScalar(T.force, W);
                            CAV.Vector3.set(T.acceleration);
                            CAV.Vector3.add(T.acceleration, T.force);
                            CAV.Vector3.add(T.velocity, T.acceleration);
                            CAV.Vector3.multiplyScalar(T.velocity, G.dampening);
                            CAV.Vector3.limit(T.velocity, G.minLimit, G.maxLimit);
                            CAV.Vector3.add(T.position, T.velocity)
                        }
                        for(V = q.vertices.length - 1; V >= 0; V--) {
                            U = q.vertices[V];
                            Q = Math.sin(U.time + U.step[0] * i * t.speed);
                            P = Math.cos(U.time + U.step[1] * i * t.speed);
                            O = Math.sin(U.time + U.step[2] * i * t.speed);
                            CAV.Vector3.set(U.position, t.xRange * q.segmentWidth * Q, t.yRange * q.sliceHeight * P, t.zRange * S * O - S);
                            CAV.Vector3.add(U.position, U.anchor)
                        }
                        q.dirty = true
                    }

                    function M() {
                        D.render(I)
                    }

                    function J(O) {
                        var Q, N, S = O;
                        var P = function(T) {
                            for(Q = 0, l = I.lights.length; Q < l; Q++) {
                                N = I.lights[Q];
                                N.ambient.set(T);
                                N.ambientHex = N.ambient.format()
                            }
                        };
                        var R = function(T) {
                            for(Q = 0, l = I.lights.length; Q < l; Q++) {
                                N = I.lights[Q];
                                N.diffuse.set(T);
                                N.diffuseHex = N.diffuse.format()
                            }
                        };
                        return {
                            set: function() {
                                P(S[0]);
                                R(S[1])
                            }
                        }
                    }

                    function v() {
                        window.addEventListener("resize", j)
                    }

                    function A(N) {
                        CAV.Vector3.set(k, N.x, D.height - N.y);
                        CAV.Vector3.subtract(k, L)
                    }

                    function j(N) {
                        K(z.offsetWidth, z.offsetHeight);
                        M()
                    }

                    C();
                })
        } else {
            alert('调用cav.js失败');
        }
    });
</script>
<div id="min_div" class="min_div" onclick="maxLogin()">
        +&nbsp;用户登录
    </div>

凯凯王
关注
signature=9357ba213647505b8240e6d7d6ce48bf,life-game/yarn.lock at master · soouup/life-game · GitHub...
weixin_39685836的博客
05-29 6万+
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.# yarn lockfile v1"@babel/code-frame@^7.8.3":version "7.8.3"resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tg...
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...
QQ主界面Demo
03-17
这是我在学习ios的过程中写的一个demo，模仿QQ的主界面。
实现QQ主界面效果[图]
打雷啦的专栏
11-07 9405
实现QQ主界面的滚动效果[图]1. GC实现QQ的主界面截图2.实现方法最主要的计算各个组和头像的位置信息,有了位置信息,画图就很方便了.(画图请参考本专栏其他文章)2.1 一些概念: 项 : 组和头像,如果组合并,那么这个组只有组1项,如果展开那么 组+ 组成员的个数m_scrollIndex : 滚动了几个项(滚动时计算)m_scrollY : 实际滚动的像数(通过m_scrollInde
1.28QQ设置主页面状态
小谭同学
02-01 130
Qt模拟简易版QQ登录页面及主页面
最新发布
努力到无能为力，拼搏到感动自己！
04-15 479
Qt模拟简易版QQ登录页面及主页面
qq登录界面
马艺诚的博客
08-13 4211
弄了弄qt，就知道为什么产品和程序员关系不好了。。 仿qq做的，感觉和qq差局还是很大，上图*.*   首先肯定是要把图片分成几部分，我分了4个框来处理这些（顺便吐槽一下Linux的画图软件，太难收了） 下一个就是要对每一部分进行相应的处理，写相应代码 //创建用户名，动图，等等 buttonfindpasswd = new QPushButton("找回密码"...
Android仿QQ空间主页面的实现
09-05
今天模仿安卓QQ空间,打开程序的启动画面和导航页面我就不做了，大家可以模仿微信的那个做一下，很简单。这次主要做一下主页面的实现,感兴趣的朋友可以参考下
Android仿QQ6.0主页面侧滑效果
01-20
在Android应用开发中，创建类似QQ6.0主页面的侧滑效果是一项常见的需求，它为用户提供了一种优雅的方式来展示侧边栏菜单。本篇将详细介绍如何实现这一效果，主要涉及自定义视图、手势识别以及谷歌提供的DrawerLayout...
仿QQ主界面
06-03
在IT行业中，设计一个仿QQ主界面是一项挑战性的任务，涉及到多个技术和设计概念。这个项目旨在重现QQ的主要交互特点，包括左侧拉出功能、右侧拉删除功能、未读消息的红色气泡显示以及通过拖拽消除气泡并播放动画的...
瞎几把写的QQ注册页面
abc1498880402的博客
09-24 1230
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;注册&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form action="baidu.html&q
Qt模仿QQ登录界面（一）
水枂的博客
03-05 3834
这两天研究qt，练习时做了个仿QQ登录界面，我这次实现的比较简单，先在这里记录一下，以后有空了会继续完善的。 （一）效果图 这里使用我的qq号测试的如图： （二）工程文件 （三）代码实现 mainwindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> QT_BEGIN_NAMESPA...
使用HTML+CSS打造经典登录界面 QQ邮箱 链接官网登录
热门推荐
Gestwr博客
04-13 3万+
先来个完成图 然后对这几天的认知学习做一个小笔记 1. 一个盒子的实际高度（宽度）是由content+padding+border+margin组成。 可以通过设定width和height来控制content的大小，并且对于同一个盒子，都可以分别设定4条边的border,padding和margin。 2. 行内元素margin设置 非行内元素块之间margin设置 父子块之间的margin设置......
第三方登录（QQ登录）开发流程详解
weixin_30520015的博客
03-15 1176
　　近排由于工作的繁忙，已经一个星期没写博文做分享了，接下来我对网站接入第三方登录----QQ登录的实现逻辑做一个详细的讲解。 　　对于整个流程的详细文档可以到QQ互联官网（http://wiki.connect.qq.com）查看，我这里就简单地进行描述，主要是分析代码的实现过程。 　　我用的是CI框架(MVC模式)，模板引擎用的是smarty。 　　下图为整个接入流程： 　　 一、准...
免费申请九位数QQ
我的学习笔记
02-28 1万+
参考文章：http://www.52pojie.cn/forum.php?mod=viewthread&amp;tid=625242&amp;extra=page%3D1%26filter%3Dlastpost%26orderby%3Dlastpost出现的一些限制：一个手机号，可以免费注册两个，剩下的需要短信验证收费申请。个人总结的一些技巧：生日选择的...
仿QQ登录界面UI设计
qq_28102553的博客
03-09 3084
    这个界面实现了以前QQ登录界面的大部分功能，由于水平原因界面背景暂时还没实现，希望有大神指教一下，万分感谢 import java.io.IOException; import java.net.URI; import java.net.URISyntaxException; import javax.swing.JFrame; import javax.swing.JTe...
319. 灯泡开关(java)
与望
10-16 668
文章目录解法一(超时)思路解法二 解法一(超时) 解法一会超时，但是这里要讲一下思路为正确的解法做铺垫。 思路 当我们自己写几个测试用例会发现每次需要判断只有最后一个值，也就是n的值，这个位上的灯泡到底有没有转换。 然而判断这个灯泡有没有转换我们要看看什么会导致他的值发生改变。 我们单纯考虑一个点拿n = 9来做例子，首先第1次，第9次都会改变，然后是第3次的时候会改变。总共改变了3次所以状态变了...
JAVA 灯泡开关
abc1498880402的博客
05-17 2551
import java.util.Scanner; public class Hello { public static void main(String[] args) { Scanner reader=new Scanner(System.in); System.out.println("请输入灯泡个数"); int n=reader.nextInt(); //输入灯泡个数 ...
java代码生成phter_go.sum · 浩然科技/istio-java-api - Gitee.com
weixin_39894104的博客
02-26 3281
cloud.google.com/go v0.26.0/go.mod h1:aQUYkXzVsufM+DwF1aE+0xfcU+56JwCaLick0ClmMTw=github.com/BurntSushi/toml v0.3.1 h1:WXkYYl6Yr3qBf1K79EBnL4mak0OimBfB0XUf9Vl28OQ=github.com/BurntSushi/toml v0.3.1/go....
Android仿QQ空间主页面布局及实现教程
本文档主要介绍了如何在Android平台上仿制QQ空间的主页面设计。作者首先强调，由于启动画面和导航页面的实现相对简单，可以参考微信的设计方法进行制作，这里主要关注主页面的实现。主页面的布局采用了LinearLayout...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值