html代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>QQ登录界面</title>

    <link rel="stylesheet" type="text/css" href="css/index4.css">

</head>

<body>

    <div id="container">

        <div class="input">

            用户名：<input type="text" id="user">

        </div>

        <div class="input">

            密&nbsp;码：<input type="password" id="password">

        </div>

        <div class="button">

            <input type="button" class="btn" value="登录">

            <input type="button" class="btn" value="注册">

        </div>

    </div>

</body>

</html>

css代码：

#container{

    height: 300px;

    width: 400px;

    border: 1px solid;

    margin-top: 300px;

    margin-left: 40%;

    background-image: url("../img/qq.jpg");

    background-repeat: no-repeat;

    background-position: center center;

}

.input{

    height: 40px;

    width: 280px;

    margin-top: 50px;

    margin-left: 50px;

}

.button{

    margin-top: 10px;

    margin-left: 100px;

}

.btn{

    margin-left: 30px;

}

#user{

    background-image: url("../img/head.png");

    background-repeat: no-repeat;/*图片背景取消平铺*/

    padding-left: 30px;

}

#password{

    background-image: url("../img/key.jpg");

    background-repeat: no-repeat;

    padding-left: 30px;

}

图片：                                    

零基础~仿qq登录界面的更多相关文章

  1. WPF开发实例——仿QQ登录界面

    原文:WPF开发实例--仿QQ登录界面 版权声明:本文为博主原创文章,如需转载请标明转载地址 http://blog.csdn.net/u013981858 https://blog.csdn.net ...

  2. 编写Java程序，使用Swing布局管理器和常用控件，实现仿QQ登录界面

    返回本章节 返回作业目录 需求说明: 使用Swing布局管理器和常用控件,实现仿QQ登录界面 实现思路: 创建登录界面的类QQLogin,该类继承父类JFrame,在该类中创建无参数的构造方法,在构造 ...

  3. JavaSwing仿QQ登录界面，注释完善，适合新手学习

    使用说明: 这是一个java做的仿制QQ登录界面,界面仅使用一个类, JDK版本为jdk-11 素材包的名字为:素材(下载)请在项目中新建一个名字为“素材”的文件夹. 素材: https://pan. ...

  4. 32.qt quick-模仿QQ登录界面实现3D旋转(Rotation、Flipable)

    要想模仿QQ登录界面的3D旋转,我们需要学习Rotation和Flipable.由于没找到QQ的资源图,所以我们以两个图片为例模仿QQ的3D旋转,如下图所示: 最终效果如下所示: 1.Rotation ...

  5. 界面编程模仿篇(QQ登录界面逼真篇)

    写了好多天的爬虫,偷空前前后后用了两天的时间(排除吃饭睡觉)写完了这个QQ登录界面,看起来还凑和着吧,如果是的大神的,莫见笑,纯属业余作品,废话先不多说,截图如下,其中第二幅图片中的红色方框部份有待完 ...

  6. 高仿qq聊天界面

    高仿qq聊天界面,给有需要的人,界面效果如下: 真心觉得做界面非常痛苦,给有需要的朋友. chat.xml <?xml version="1.0" encoding=&quo ...

  7. Android菜鸟的成长笔记（3）——给QQ登录界面说So Easy

    原文:Android菜鸟的成长笔记(3)--给QQ登录界面说So Easy 上一篇:Android菜鸟的成长笔记(2)--第一个Android应用 我们前面已经做了第一个Android应用程序,虽然有 ...

  8. QQ登录界面布局

    简单的qq登录界面布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmln ...

  9. [转]Android：布局实例之模仿QQ登录界面

    Android:布局实例之模仿QQ登录界面 预览图: 准备: 1.找到模仿对象 QQ登陆界面UI下载>>>>> 2.导入工程 3.查看布局结构和使用控件 其对应效果图分布 ...

随机推荐

  1. 对DOM操作的一些总结

    一.DOM节点 分为三大类: 1.元素节点 :<html>.<body>.<p>等标签 2.文本节点 :标签内的文本.例如<p>这就是文本节点</ ...

  2. C++ Knowledge series 3

    Programming language evolves always along with Compiler's evolvement The Semantics of Data The size ...

  3. java之Socket传递图片

    客户端: package client; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import ...

  4. LDAP 在ubuntu14.04下的安装配置install and configure

    https://help.ubuntu.com/lts/serverguide/openldap-server.html if error occurs in reinstall, try this: ...

  5. 06、部署Spark程序到集群上运行

    06.部署Spark程序到集群上运行 6.1 修改程序代码 修改文件加载路径 在spark集群上执行程序时,如果加载文件需要确保路径是所有节点能否访问到的路径,因此通常是hdfs路径地址.所以需要修改 ...

  6. 使用C语言来实现模块化

    除了C语言以及C++编程语言之外,在其它现在非常流行的开发语言中,比如说:java,php,jsp等等.我们很难想象到缺少标准化的模块管理机制是一件多么可怕的事情.但是这往往也是由C语言本身的设计哲学 ...

  7. Arduino-串口函数Serial

    串口是Arduino与其它设备进行通信的接口,我们需要很好的掌握它的使用.Arduino串口使用相关的函数共有10个(随着版本的升级,新版本加入了更多,具体请参见官网:http://www.ardui ...

  8. ie6下按钮下边框消失不显示的问题

    最近网站做改版,又发现一个ie6奇葩的问题,就一个很普通带边框的按钮,但在ie6中下边框不显示,ie7没有测试不知道是不是也不显示,其他浏览器正常 代码和预览效果如下: <style> b ...

  9. 0x40二分法

    二分模板一共有两个,分别适用于不同情况.算法思路:假设目标值在闭区间[l, r]中, 每次将区间长度缩小一半,当l = r时,我们就找到了目标值. 版本1 在单调递增序列a中查找>=x的数中最小 ...

  10. OC#import和#include的异同

    1.#import和#include相同1.1都可以用在OC程序中起到导入文件的作用1.2同样的 包含系统文件都是<>,是包本地文件都用""例如:系统文件#import ...