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. android sqlite3命令行检查自己的代码操作数据库是否正确

    真机调试的话需要root ,否则没有访问目录的权限 在 linux 的终端 或者 windows的cmd 中输入 adb shell 进入shell 环境 cd /data/data/程序包名/dat ...

  2. Java获取Date类型-针对SQL语句

    简便使用Date类型: import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedState ...

  3. 笨办法学Python（八）

    习题 8: 打印,打印 formatter = "%r %r %r %r" print formatter % (1, 2, 3, 4) print formatter % (&q ...

  4. April 16 2017 Week 16 Sunday

    Happiness is a way station between too much and too little. 幸福就是刚刚好. I don't want to talk about it a ...

  5. ABAP Netweaver和Hybris里获得内存使用统计数据

    ABAP Netweaver 事物码ST06 Hybris 每隔5秒钟,Hybris Administration console会发起一个到Java后台的AJAX查询请求: 这个5秒的时间间隔定义在 ...

  6. Meshlab

    打开ply文件的软件,Meshlab. 下载 http://yunpan.cn/cgapukD2La9Se (提取码:37f1) http://pan.baidu.com/s/1pJLnWqJ

  7. 在VSCode中使用码云

    在VSCode中使用码云 一.SSH公钥 使用SSH公钥可以让你在你的电脑和码云通讯的时候使用安全连接(Git的Remote要使用SSH地址) 链接 https://gitee.com/profile ...

  8. java基础必备单词讲解 day two

    variable 变量 count 统计 sum 总数 salary 薪水 Scanner 接收 import 导入 eclipse 日食 control 控制 shift 改变 alt 替换键 ha ...

  9. ios核心动画(基础动画)

    一.简单介绍 CAPropertyAnimation的子类 属性解析: fromValue:keyPath相应属性的初始值 toValue:keyPath相应属性的结束值 随着动画的进行,在长度为du ...

  10. HTTP:地址栏输入url到显示页面的步骤

    在浏览器地址栏输入URL 浏览器查看缓存,如果请求资源在缓存中并且新鲜,跳转到转码步骤 如果资源未缓存,发起新请求 如果已缓存,检验是否足够新鲜,足够新鲜直接提供给客户端,否则与服务器进行验证. 检验 ...