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


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实现奇偶行赋值不同css值
Feb 17 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
原生js实现旋转木马轮播图效果
Feb 27 Javascript
详解vue express启动数据服务
Jul 05 Javascript
AngularJs 终极购物车(实例讲解)
Nov 08 Javascript
代码详解JS操作剪贴板
Feb 11 Javascript
深入理解Node module模块
Mar 26 Javascript
Mac下安装vue
Apr 11 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
May 04 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 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
PHP获取163、gmail、126等邮箱联系人地址【已测试2009.10.10】
2009/10/11 PHP
定义php常量的详解
2013/06/09 PHP
php获取汉字首字母的函数
2013/11/07 PHP
wamp安装后自定义配置的方法
2014/08/23 PHP
php生成唯一数字id的方法汇总
2015/11/18 PHP
微信红包随机生成算法php版
2016/07/21 PHP
yii2安装详细流程
2018/05/23 PHP
javascript object array方法使用详解
2012/12/03 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
JavaScript性能优化之小知识总结
2015/11/20 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
Vue自定义指令实现checkbox全选功能的方法
2018/02/28 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
使用vue实现一个电子签名组件的示例代码
2020/01/06 Javascript
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
对pycharm 修改程序运行所需内存详解
2018/12/03 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
Python子类继承父类构造函数详解
2019/02/19 Python
Django模板Templates使用方法详解
2019/07/19 Python
PyTorch学习:动态图和静态图的例子
2020/01/06 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
Boden澳大利亚官网:英国在线服装公司
2018/08/05 全球购物
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
高中美术教学反思
2014/01/19 职场文书
英文自荐信常用句子
2014/03/26 职场文书
服务承诺书范文
2014/05/19 职场文书
商场租赁意向书
2014/07/30 职场文书
导游词格式
2015/02/13 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书