仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员


Posted in Javascript onNovember 24, 2008

改facebook的,绝对是你想要的,不需要图片,因为我的以前几个东西被转载到好多地方但是没有人给我说,还没有人说是哪里来的,就把我blog地址写这里的,要用的话就把那东西去掉吧

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>Beautiful Forms</title> 
<style type="text/css"> 
body{ font-family:宋体, Arial, Helvetica, sans-serif; 
font-size:12px; 
color:#000000; 
} 
a{color:#0033CC;} 
h1, h2, p, form{ 
border:0px; 
margin:0px; 
padding:0px; 
} 
input{ font-family:宋体, Arial, Helvetica, sans-serif; 
font-size:12px; 
} 
h2{ color:#666666; 
margin-bottom:20px; 
font-size:16px; 
} 
div.main{ 
margin:30px auto; 
width:340px; 
} 
div.box{ 
border:solid 1px #c6cfe1; 
background:#dfe4ee; 
padding:10px; 
color:#333333; 
margin-bottom:20px; 
} 
div.box h1 { 
font-size:14px; 
color:#000000; 
padding-bottom:4px; 
} 
div.box p{padding-bottom:14px;} 
div.box input .input-text{ 
border:1px solid #3b6e22; 
color:#666666; 
width:180px; 
} 
div.box label{ 
display:block; 
margin-bottom:10px; 
color:#555555; 
} 
div.box label span{ 
display:block; 
float:left; 
padding-right:6px; 
width:70px; 
text-align:right; 
padding-top:5px; 
font-weight:bold; 
} 
.spacer{margin-left:80px; 
margin-bottom:10px; 
font-size:12px; 
color:#555555; 
} 
.green{ 
background:#67a54b; 
padding:0px 6px; 
border:1px solid #3b6e22; 
height:24px; 
line-height:24px; 
color:#FFFFFF; 
font-size:12px; 
margin-right:10px; 
display:inline-block; 
text-decoration:none; 
} 
</style> 
</head> 
<body> 
<div class="main"> 
<h1>Beautiful Form</h1> 
<h2>Xiaonei inspired</h2> 
For more info visit: <a href="http://blog.csdn.net/webxeyes">http://blog.csdn.net/webxeyes</a> 
<br/><br/> 
<div class="box"> 
<h1>登 陆</h1> 
<p>Do you have an account? Sign in!</p> 
<form action="" method="post"> 
<label><span>账号</span> 
<input type="text"name="email" id="email" class="input-text"/> 
</label> 
<label><span>密码</span> 
<input type="password"name="psw" id="psw" class="input-text"/> 
</label> 
</form> 
<div class="spacer"><a href="#" onClick="" class="green">Sign in</a></div> 
<div class="spacer"> 
忘记密码? <a href="#">找回密码</a><br/> 
还没有注册? <a href="#">注册</a> 
</div> 
</div> 
<div class="box"> 
<h1>Sign Up</h1> 
<p>New User? Create your account now!</p> 
<form action="" method="post"> 
<label><span>Full name</span> 
<input type="text"name="name" id="name" class="input-text"/> 
</label> 
<label><span>E-mail</span> 
<input type="text"name="email" id="email" class="input-text"/> 
</label> 
<label><span>Password</span> 
<input "psw" type="password" id="psw" class="input-text"/> 
</label> 
</form> 
<div class="spacer"><a href="#" onClick="" class="green">Create Account</a></div> 
<div class="spacer"> 
忘记密码? <a href="#">找回密码</a><br/> 
还没有注册? <a href="#">注册</a> 
</div> 
</div> 
<div class="box"> 
<h1>Sign Up</h1> 
<p>New User? Create your account now!</p> 
<form action="" method="post"> 
<label><span>Full name</span> 
<input type="text"name="name" id="name" class="input-text"/> 
</label> 
<label><span>E-mail</span> 
<input type="text"name="email" id="email" class="input-text"/> 
</label> 
<label><span>Password</span> 
<input "psw" type="password" id="psw" class="input-text"/> 
</label> 
</form> 
<div class="spacer"><input type=submit onClick="" class="green">Create Account</a></div> 
<div class="spacer"> 
忘记密码? <a href="#">找回密码</a><br/> 
还没有注册? <a href="#">注册</a> 
</div> 
</div> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
jquery 操作单选框,复选框,下拉列表实现代码
Oct 27 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
Sep 28 Javascript
js获取url中的参数且参数为中文时通过js解码
Mar 19 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
Apr 21 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
解决JavaScript数字精度丢失问题的方法
Dec 03 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
Jul 14 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
Jun 08 Javascript
JS异步错误捕获的一些事小结
Apr 26 Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
May 12 Javascript
js 数组 fill() 填充方法
Nov 02 Javascript
javascript 贪吃蛇实现代码
Nov 22 #Javascript
js利用div背景,做一个竖线的效果。
Nov 22 #Javascript
JavaScript使用技巧精萃[代码非常实用]
Nov 21 #Javascript
FireFox与IE 下js兼容触发click事件的代码
Nov 20 #Javascript
js刷新框架子页面的七种方法代码
Nov 20 #Javascript
拖拉表格的JS函数
Nov 20 #Javascript
设置下载不需要倒计时cookie(倒计时代码)
Nov 19 #Javascript
You might like
神族 Protoss 历史背景
2020/03/14 星际争霸
如何使用PHP中的字符串函数
2006/11/24 PHP
几个优化WordPress中JavaScript加载体验的插件介绍
2015/12/17 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
用JavaScript实现UrlEncode和UrlDecode的脚本代码
2008/07/23 Javascript
Jquery Ajax请求代码(2)
2011/01/07 Javascript
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
jQuery提示插件alertify使用指南
2015/04/21 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
vue组件表单数据回显验证及提交的实例代码
2018/08/30 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21
2020/11/24 DOTA
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
python能做哪些生活有趣的事情
2020/09/09 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
中专毕业生自我鉴定
2014/02/02 职场文书
社团招新策划书
2014/02/04 职场文书
行政副总岗位职责
2014/02/23 职场文书
刑事辩护词范文
2015/05/21 职场文书
论文评审意见
2015/06/05 职场文书
background-position百分比原理详解
2021/05/08 HTML / CSS
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL
浅谈MySQL函数
2021/10/05 MySQL