<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>今天写一些简单的页面</title>

<link rel="stylesheet" style="text/css" href="d2.css">

</head>

<body>

<table>

<tr>

<td>

<div id="a1">

<h1>QQ</h1>

<form method="post">

<input type="text"  name="user"required="required" placeholder="QQ" name="a">

<input type="password" required="required" placeholder="pw" name="b">

<button id="a2" type="submit">登录</button>

</form>

</div>

</td>

</table>

</body>

</html>

body{

width:500px;

height:300px;

background-color:#BCEAFF;

}

#a1{

position: absolute;

top: 50%;

left:50%;

margin: -150px 0 0 -150px;

width: 200px;

height: 300px;

}

#a1 h1{

color:white;

text-shadow:0 0 10px;

text-align:center;

}

h1{

font-size:30px;

margin: 0.67em 0;

}

table{

background-color:#72C1F2;

border:1px solid #bbb;

width:511px;

height:350px;

margin:80px 380px ;

}

input{

width: 200px;

height: 18px;

margin-bottom: 10px;

padding: 10px;

font-size: 13px;

color: #fff;

text-shadow:1px 1px 1px;

border:1px solid #56536A;

border-radius: 10px 0px 10px 10px;

background-color: #D9E4FC;

}

#a2{

width: 223px;

min-height: 22px;

display: block;

background-color: #00AEFF;

border: 1px solid #3762bc;

color: #fff;

padding: 9px 14px;

font-size: 15px;

border-radius: 0px 10px 0px 10px;

}

#p1{

border:1px solid #aaa;

vertical-align:top;

width:80px;

height:80px;

}

form{

border-radius:10px;

color:white;

}

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<!-- <style>

th:hover td{

background-color: #333333;

}

</style> -->

<link rel="stylesheet" style="text/css" href="1.css">

<body>

<!--

<table border="1px" width="200" height="200" >

<caption>表格的合并</caption>

<tr>

<td colspan="2" align="center" bgcolor="555555">1</td>

<td rowspan="2" align="center">3</td>

</tr>

<tr>

<td rowspan="2" align="center">4</td>

<td align="center" bgcolor="purple">5</td>

</tr>

<tr>

<td colspan="2" align="center">8</td>

</tr>

</table> -->

<h2 id="c4">

<span id="c1">有</span>

<span id="c2">妖</span>

<span id="c3">气</span>

</h2>

</body>

</html>

#c4{

padding-bottom:4px;

border-bottom:2px solid #A1859F;

width:300px;

background:url(9.png) repeat-x bottom;

}

#c1{

font-size:70px;

font-family:Arial;

color:#B7B170;

}

#c2{

font-size:70px;

color:#56D097;

}

#c3{

font-size:70px;

color:#E6CDA6;

}

body{

background-color:#4A374A;

}

今天用css做了一个QQ登录页面的更多相关文章

  1. flutter 制作一个用户登录页面

    flutter 制作一个用户登录页面 用户登录效果图如下: 登录页面如下: import 'package:flutter/material.dart'; import 'package:flutte ...

  2. Vue.js实现一个SPA登录页面的过程

    技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cooki ...

  3. Vue.js写一个SPA登录页面的过程

    技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cooki ...

  4. 利用css来让一个div在页面中垂直居中的方法

    一.如何让一个div在页面中垂直居中(请至少列出三种) 1.距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就 ...

  5. 怎么测试一个web登录页面

    在以前的面试和同事面试交流的过程中,有多次被问到:“给你一个登录页面,上面有2个textbox,一个提交按钮,你将怎么测试”?或问,请针对这个页面设计30个以上的test case. 此题的考察目的: ...

  6. HTML基础：用表单写一个简易登录页面

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 基于原生的 html css js php ajax做的一个 web登录和注册系统

    完整代码下载: 百度网盘地址 https://pan.baidu.com/s/1D1gqHSyjgfoOtYCZm7ofJg 提取码 :nf0b 永久有效 注意: 1 如果要正常运行此示例, 本地需要 ...

  8. 用html/css做的一个登入小界面（图片瀑布流）

    一个登入效果简易图:(色彩搭配有点乱,嘻嘻,可以在代码处改成自己喜欢的颜色) css样式的代码: style.css: @charset "utf-8";/* CSS Docume ...

  9. 纯CSS做的一个Silder

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

随机推荐

  1. Spring入门（2）-通过构造器注入Bean

    Spring入门(2)-通过构造器注入Bean 前一篇文章将了最基本的spring例子,这篇文章中,介绍一下带有参数的构造函数和通过构造器注入对象引用. 0. 目录 带有参数的构造函数 通过构造器注入 ...

  2. C++中使用函数指针 【瓦特芯笔记】

         在C++类中使用函数指针. 类型定义:      typedef 返回类型(类名::*新类型)(参数表) //类定义 class CA { public: char lcFun(int a) ...

  3. Codeforces Round #352 (Div. 2) D. Robin Hood (二分答案)

    题目链接:http://codeforces.com/contest/672/problem/D 有n个人,k个操作,每个人有a[i]个物品,每次操作把最富的人那里拿一个物品给最穷的人,问你最后贫富差 ...

  4. pjsip视频通信开发(上层应用)之数字键盘的制作

    在pjsip视频通信开发(上层应用)之EditText重写中我制作了一个显示输入内容的EditText,这里将制作一个数字键盘,其实跟计算器一样,最多的就是用TableLayout来实现,内部通过权重 ...

  5. 使用自定义的BaseAdapter实现LIstView的展示

    http://stephen830.iteye.com/blog/1141394 使用自定义的BaseAdapter实现LIstView的展示 实现以下功能点: 1.通过自定义的BaseAdapter ...

  6. sed命令查找<media/msm_cam_sensor.h>替换为"len_msm_cam_sensor.h"

    sed -i 's:<media/msm_cam_sensor.h>:"len_msm_cam_sensor.h":g' $(find . -name "*. ...

  7. 安卓模拟器BlueStacks 安装使用教程（图解）

    系统要求 操作系统 Win XP SP3/Vista/Win 7/Win 8/Win 8.1 所需的运行环境 Win XP用户请先升级到SP3 并安装Windows Installer 4.5 Win ...

  8. 【剑指offer】八皇后问题

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/26614999 剑指offer上解决八皇后问题,没实用传统的递归或非递归回溯法,而是用了非常 ...

  9. cocos2d粒子效果

    第9章 粒子效果 游戏开发者通常使用粒子系统来制作视觉特效.粒子系统能够发射大量细小的粒子并对他们进行渲染,而且效率要远高于渲染同样数目的精灵.粒子系统可以模拟下雨.火焰.雪.爆炸.蒸气拖尾以及其他多 ...

  10. 【ZZ】大数据架构师基础：hadoop家族，Cloudera系列产品介绍

    http://www.36dsj.com/archives/17192 大数据我们都知道hadoop,可是还会各种各样的技术进入我们的视野:Spark,Storm,impala,让我们都反映不过来.为 ...