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


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 相关文章推荐
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
2014 HTML5/CSS3热门动画特效TOP10
Dec 07 Javascript
jQuery层动画定位滑动效果的方法
Apr 30 Javascript
详解AngularJS中自定义过滤器
Dec 28 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
Angularjs实现上传图片预览功能
Sep 01 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
vue使用keep-alive保持滚动条位置的实现方法
Apr 09 Javascript
vue接入腾讯防水墙代码
May 07 Javascript
Node.js 多进程处理CPU密集任务的实现
May 26 Javascript
JavaScript浅层克隆与深度克隆示例详解
Sep 01 Javascript
jquery实现图片放大镜效果
Dec 23 jQuery
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循环语句 for()与foreach()用法区别介绍
2012/09/05 PHP
PHP 伪静态技术原理以及突破原理实现介绍
2013/07/12 PHP
PHP弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
PHP文件操作详解
2016/12/30 PHP
jquery 简单的进度条实现代码
2010/03/11 Javascript
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
jQuery function的正确书写方法
2013/08/02 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
js子页面获取父页面数据示例
2014/05/15 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
Python内置的字符串处理函数整理
2013/01/29 Python
Python中str is not callable问题详解及解决办法
2017/02/10 Python
django实现用户登陆功能详解
2017/12/11 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
python读取Excel实例详解
2018/08/17 Python
Python单元和文档测试实例详解
2019/04/11 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
市场营销管理制度
2014/01/29 职场文书
学员自我鉴定
2014/03/19 职场文书
妇联领导班子剖析材料
2014/08/21 职场文书
银行授权委托书样本
2014/10/13 职场文书
优秀团队申报材料
2014/12/26 职场文书
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python
浅谈MySQL中的六种日志
2022/03/23 MySQL
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android