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. Oracle笔记4-pl/sql-分支/循环/游标/异常/存储/调用/触发器

    一.pl/sql(Procedure Language/SQL)编程语言 1.概念 PL/SQL是Oracle数据库对SQL语句的扩展.在普通SQL语句的使用上增加了编程语言的特点,所以PL/SQL把 ...

  2. AJAX跨域POST发送json时，会先发送一个OPTIONS预请求

    我们会发现,在很多post,put,delete等请求之前,会有一次options请求. 根本原因就是,W3C规范这样要求了!在跨域请求中,分为简单请求(get和部分post,post时content ...

  3. 必须夸夸Sublime，大文件打开

    今天有个问题的事情日志文件67.8M大文件打开问题开始: 1.vscode必须挨批:直接就给个错误the file cannt be displayed in the editor because i ...

  4. *389. Find the Difference (string + map(26)) read problems carefully

    Given two strings s and t which consist of only lowercase letters. String t is generated by random s ...

  5. create-react-app项目使用假数据

    做新项目的时候,前端每次要等后端接口准备好再开始,就会延期,等后端接口准备好了,前端这边的项目又会相互紧张,如果前端跟后端同时进行,前期将框架,基础做好,定好接口文档,前端在后端没准备好接口的时候使用 ...

  6. IOC、注入

    转:https://blog.csdn.net/lutianfeiml/article/details/51731219 实际开发中使用XML还是注解 XML: bean管理 注解: 注入属性的时候比 ...

  7. python 下实现window 截图

    首先安装PIL库,因为PIL官网没有支持python3.6的PIL库我想在3.X中实现,因此使用pip安装pillow pip install pillow 安装 安装完成后,from PIL imp ...

  8. 2017.11.1 微型计算机原理与接口技术-----第七章 中断系统与8237A DMA控制器

    第七章 微型计算机原理与接口技术-----中断系统与8237A DMA控制器 (1)数据传送的两种方式:中断方式和直接存储器存取方式(DMA):中断是微处理器与外部设备交换信息的一种方式:DMA是存储 ...

  9. 线程 task 使用三种方法

    1:用TaskFactory的实例: 运行结果为: 2. 使用task类的Factory属性 3.使用task类的实例,用start来启动任务.  当我们用Task类时,除了用start方法,也可以用 ...

  10. Java解析Excel工具类(兼容xls和xlsx)

    依赖jar <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxml&l ...