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


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 和 CSS 实现脚注(Footnote)效果
Sep 09 Javascript
jquery遍历checkbox的注意事项说明
Feb 21 Javascript
Centos7 中 Node.js安装简单方法
Nov 02 Javascript
javascript 单例模式详解及简单实例
Feb 14 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
Apr 26 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 Javascript
浅谈Webpack下多环境配置的思路
Jun 27 Javascript
Typescript的三种运行方式(小结)
Sep 18 Javascript
微信小程序监听用户登录事件的实现方法
Nov 11 Javascript
vue中使用v-for时为什么不能用index作为key
Apr 04 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
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
PHP PDO操作MySQL基础教程
2017/06/05 PHP
jquery的键盘事件修改代码
2011/02/24 Javascript
javascript读取xml实现javascript分页
2013/12/13 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
jQuery实现分隔条左右拖动功能
2015/11/21 Javascript
JavaScript Array对象详解
2016/03/01 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
2016/08/17 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
layui选项卡效果实现代码
2017/05/19 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
2017/11/17 Javascript
详解如何用模块化的方式写vuejs
2017/12/16 Javascript
点击按钮弹出模态框的一系列操作代码实例
2019/03/29 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
2020/09/04 Javascript
python多线程操作实例
2014/11/21 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
Python版中国省市经纬度
2020/02/11 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
JSF如何进行表格处理及取值
2012/08/06 面试题
一套带答案的C++笔试题
2014/01/10 面试题
影视动画专业个人的自我评价
2013/12/31 职场文书
优秀毕业生自荐信范文
2014/01/01 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
教学质量月活动总结
2015/05/11 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
Python包argparse模块常用方法
2021/06/04 Python
Python中super().__init__()测试以及理解
2021/12/06 Python
js前端图片加载异常兜底方案
2022/06/21 Javascript