<!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. HDU1028Ignatius and the Princess III(母函数)

    http://acm.hdu.edu.cn/showproblem.php?pid=1028 母函数: 例1:若有1克.2克.3克.4克的砝码各一 枚,能称出哪几种重量?各有几种可能方案? 如何解决这 ...

  2. CodeForces 589I Lottery (暴力，水题)

    题意:给定 n 和 k,然后是 n 个数,表示1-k的一个值,问你修改最少的数,使得所有的1-k的数目都等于n/k. 析:水题,只要用每个数减去n/k,然后取模,加起来除以2,就ok了. 代码如下: ...

  3. cookie.js 加载顺序问题

    今天遇到一个问题,在使用cookie.js时,只有在jquery.js文件后加载整体才有效 有效加载顺序 <head> <script type="text/javascr ...

  4. Django 使用原生SQL

    def dictfetchall(cursor): "将游标返回的结果保存到一个字典对象中" desc = cursor.description return [ dict(zip ...

  5. Java二维码登录流程实现(包含短地址生成，含部分代码)

    近年来,二维码的使用越来越风生水起,笔者最近手头也遇到了一个需要使用二维码扫码登录网站的活,所以研究了一下这一套机制,并用代码实现了整个流程,接下来就和大家聊聊二维码登录及的那些事儿. 二维码原理 二 ...

  6. 动态创建dom元素

    效果图如上所示: 思维nav:就相当于qq空间发表动态(说说),在输入框里输入内容,点击提交(发表),内容就呈现在下面的动态栏里.我这里是准备写一个招聘的app,大家可以随便想象下哪些情况会遇到动态创 ...

  7. Don't Repeat Yourself (不要重复你自己)

    DRY是指Don't Repeat Yourself特指在程序设计以及计算中避免重复代码,因为这样会降低灵活性.简洁性,并且可能导致代码之间的矛盾.<The Pragmatic Programm ...

  8. Codeforces Beta Round #51 C. Pie or die 博弈论找规律 有趣的题~

    C. Pie or die Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/55/problem/ ...

  9. URAL 1775 B - Space Bowling 计算几何

    B - Space BowlingTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/ ...

  10. 如何防止ListView控件闪烁

    如何防止ListView控件闪烁 beginupdate()和endupdate()之间写代码   ListView1.Items.BeginUpdate;ListView1.Items.Add('A ...