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


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 相关文章推荐
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 Javascript
Js点击弹出下拉菜单效果实例
Aug 12 Javascript
jquery prop的使用介绍及与attr的区别
Dec 19 Javascript
使用jQuery.wechat构建微信WEB应用
Oct 09 Javascript
理解jquery事件冒泡
Jan 03 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
window.open不被拦截的简单实现代码(推荐)
Aug 04 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
Sep 11 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
jQuery实现消息弹出框效果
Dec 10 jQuery
浅谈JavaScript中this的指向问题
Jul 28 Javascript
如何在vue中使用HTML 5 拖放API
Jan 14 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中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
PHP小教程之实现双向链表
2014/06/12 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
PHP信号量基本用法实例详解
2016/02/12 PHP
PHP自动生成缩略图函数的源码示例
2019/03/18 PHP
Git命令之分支详解
2021/03/02 PHP
Js动态创建div
2008/09/25 Javascript
使用js获取QueryString的方法小结
2010/02/28 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
初识Javascript小结
2015/07/16 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
2016/02/16 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
2018/05/09 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
Python读写Excel文件的实例
2013/11/01 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
django celery redis使用具体实践
2019/04/08 Python
Python模拟登入的N种方式(建议收藏)
2020/05/31 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
大学生2014全国两会学习心得体会
2014/03/10 职场文书
房屋出租协议书
2014/04/10 职场文书
志愿者活动总结
2014/04/28 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
二年级上册数学教学计划
2015/01/20 职场文书
投资公司董事长岗位职责
2015/04/16 职场文书
2019财务转正述职报告
2019/06/27 职场文书
Go 实现英尺和米的简单单位换算方式
2021/04/29 Golang
Oracle11g R2 安装教程完整版
2021/06/04 Oracle