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


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插件的基本知识
Nov 25 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
使用jquery制作弹出框效果
Apr 03 Javascript
分享12个非常实用的JavaScript小技巧
May 11 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
May 23 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
Jun 13 Javascript
js判断输入字符串是否为空、空格、null的方法总结
Jun 14 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 Javascript
js实现右键弹出自定义菜单
Sep 08 Javascript
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
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
php获得当前的脚本网址
2007/12/10 PHP
php图片上传存储源码并且可以预览
2011/08/26 PHP
mysql数据库差异比较的PHP代码
2012/02/05 PHP
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
通过Email发送PHP错误的方法
2015/07/20 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
js打印纸函数代码(递归)
2010/06/18 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
jQuery异步验证用户名是否存在示例代码
2014/05/21 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
jQuery自动完成插件completer附源码下载
2016/01/04 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
Vue常用指令详解分析
2018/08/19 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
vue视频播放暂停代码
2019/11/08 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
小程序实现录音功能
2020/09/22 Javascript
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
一文轻松掌握python语言命名规范规则
2020/06/18 Python
Html5页面二次分享的实现
2018/07/30 HTML / CSS
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
UDP协议功能
2013/01/06 面试题
客服专员岗位职责
2014/02/28 职场文书
捐资助学感谢信
2015/01/21 职场文书
MySQL 逻辑备份 into outfile
2022/05/15 MySQL