今天用css做了一个QQ登录页面

<!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登录页面的更多相关文章
- flutter 制作一个用户登录页面
flutter 制作一个用户登录页面 用户登录效果图如下: 登录页面如下: import 'package:flutter/material.dart'; import 'package:flutte ...
- Vue.js实现一个SPA登录页面的过程
技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cooki ...
- Vue.js写一个SPA登录页面的过程
技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cooki ...
- 利用css来让一个div在页面中垂直居中的方法
一.如何让一个div在页面中垂直居中(请至少列出三种) 1.距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就 ...
- 怎么测试一个web登录页面
在以前的面试和同事面试交流的过程中,有多次被问到:“给你一个登录页面,上面有2个textbox,一个提交按钮,你将怎么测试”?或问,请针对这个页面设计30个以上的test case. 此题的考察目的: ...
- HTML基础:用表单写一个简易登录页面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 基于原生的 html css js php ajax做的一个 web登录和注册系统
完整代码下载: 百度网盘地址 https://pan.baidu.com/s/1D1gqHSyjgfoOtYCZm7ofJg 提取码 :nf0b 永久有效 注意: 1 如果要正常运行此示例, 本地需要 ...
- 用html/css做的一个登入小界面(图片瀑布流)
一个登入效果简易图:(色彩搭配有点乱,嘻嘻,可以在代码处改成自己喜欢的颜色) css样式的代码: style.css: @charset "utf-8";/* CSS Docume ...
- 纯CSS做的一个Silder
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
随机推荐
- RTT操作系统
http://www.rt-thread.org/官网 RT-Thread RTOS,由国内一些专业开发人员开发.维护.它不仅仅是一款 高效.稳定的实时操作系统内核,也是一套面向嵌入式系统的软件平台, ...
- [iOS 多线程 & 网络 - 1.0] - 多线程概述
A.进程 什么是进程进程是指在系统中正在运行的一个应用程序 每个进程之间是独立的,每个进程均运行在其专用且受保护的内存空间内 比如同时打开QQ.Xcode,系统就会分别启动2个进程 通过"活 ...
- WEB安全之威胁解析
本文章转载自 http://www.xuebuyuan.com/60198.html 主要威胁: 暴力攻击(brute-force attack):这些攻击通过尝试所有可能的字符组合,以发现用户证书. ...
- Windows Server2008 R2 MVC 环境配置
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
- Lua学习笔记(二):基本语法
Lua学习指南:http://www.lua.org/manual/ 首先我们要明确的一点是:在Lua中,除了关键字外一切都是变量. Lua关键字 可以查看这个地址:http://www.lua.or ...
- Windows 下如何设置 只允许固定IP远程访问
通过设置IP安全策略限制固定IP访问 说明: (1)以XP环境为例,步骤:先禁止所有IP,再允许固定IP访问. (2)配置过程中很多步骤图是重复的,一些没价值的图就省略了: (3)光看的话可能中间重复 ...
- 初学Android 二 创建项目以及目录结构
命令行创建 android create project Usage: android [global options] create project [action options] Global ...
- Cocos2d-x——Cocos2d-x 屏幕适配新解 – 兼容与扩展【转载】
Cocos2d-x 屏幕适配新解 – 兼容与扩展 本文出自[无间落叶](转载请保留出处):http://blog.leafsoar.com/archives/2013/05-13-08.html 在读 ...
- 检查dns服务器是否可用
#%windir%\system32\WindowsPowerShell\v1.0\powershell.exe D:\PSScript\ERP_Production_Script\ERPRF_Upd ...
- PI-webservice06-调用外部webservice过程中注意问题
1,SAP与.NET系统之间通过webservice来进行数据交互的过程中,格式是有要求的,要求.NET发布出来的webservice中的数据是用list来进行传输的,不能用datatable和lis ...