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


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中的$(document).ready()与window.onload的区别
Nov 18 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
jQuery动态地获取系统时间实现代码
May 24 Javascript
javaScript面向对象继承方法经典实现
Aug 20 Javascript
利用jQuery实现可输入搜索文字的下拉框
Oct 23 Javascript
关于JavaScript对象的动态选择及遍历对象
Mar 10 Javascript
Jquery倒计时源码分享
May 16 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 Javascript
基于Javascript实现文件实时加载进度的方法
Oct 12 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
May 11 Javascript
浅谈关于iview表单验证的问题
Sep 29 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 模拟登陆MSN并获得用户信息
2009/05/16 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
PHP准确取得服务器IP地址的方法
2015/06/02 PHP
php中上传文件的的解决方案
2018/09/25 PHP
jQuery操作select的实例代码
2012/06/14 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
layer插件select选中默认值的方法
2018/08/14 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
原生JavaScript实现购物车
2021/01/10 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
python中pass语句用法实例分析
2015/04/30 Python
用python处理图片实现图像中的像素访问
2018/05/04 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
python读取图片的方式,以及将图片以三维数组的形式输出方法
2019/07/03 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
python 消费 kafka 数据教程
2019/12/21 Python
解决python运行效率不高的问题
2020/07/20 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
中药学专业求职信
2014/05/31 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
《彼得与狼》教学反思
2016/02/20 职场文书
情况说明书格式及范文
2019/06/24 职场文书
Mysql中 unique列插入重复值该怎么解决呢
2021/05/26 MySQL