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. cookie乱码处理 示例

    package com.log; import java.io.IOException; import java.net.URLEncoder; import java.util.ArrayList; ...

  2. [SVN]TortoiseSVN工具培训2─SVN的基本概念和工作模式

    1.SVN是什么? TortoiseSVN,属于集中式版本控制工具,是Subversion版本控制系统的一个免费SVN开源客户端,可以对文件版本进行统一管理和控制:文件保存在中央版本库,您可以将文件恢 ...

  3. 带你了解强大的Cadence家族，你可能只用到了它1/10的工具

    [转载自 SI-list[中国]http://mp.weixin.qq.com/s/qsdfzQwIVjvwHXuCdvrPXA ] 本篇对2017年初版Cadence的全套所有EDA工具的技术特性特 ...

  4. Hive建模

    Hive建模 1.介绍 Hive作为数据仓库,同关系型数据库开发过程类似,都需要先进行建模,所谓建模,就是对表之间指定关系方式.建模在hive中大致分为星型.雪花型和星座型.要对建模深入理解,首先需要 ...

  5. 开源框架 epics，开源画面编辑软件 edm

    epics Experimental Physics and Industrial Control System 一套开源软件框架,实验物理和工业控制系统 http://www.aps.anl.gov ...

  6. 分治——sqtx

    题目描述 Given a string s, partition s such that every substring of the partition is a palindrome. Retur ...

  7. Leetcode 78. Subsets (backtracking) 90 subset

    using prev class Solution { List<List<Integer>> res = new ArrayList<List<Integer&g ...

  8. 关于使用Encoding转码的问题，以及StreamWriter的小应用

    StreamWriter write = new StreamWriter("../../test2.txt"); write.WriteLine("中国123巴西red ...

  9. caffe的输入

    决定将caffe分为几个部分进行总结,首先是第一部分,输入数据以及输入层. 首先从输入数据对BP的影响开始介绍. sgd的随机性 由于是sgd,因此样本一定要shuffle.BP中说到,样本选择遵循俩 ...

  10. 5.vue解决动态img :src绑定

    前言: 因为静态资源在vue中是需要经过编译的, 所以动态拼接的图片地址,在:src的时候不经过编译. 就会发生图片404,找不到资源. 那么本地图片资源如何动态的绑定呢? 实践: 其实,真相往往就是 ...