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


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 replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
关于js遍历表格的实例
Jul 10 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
Dec 02 Javascript
常用的Javascript设计模式小结
Dec 09 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
利用jQuery实现打字机字幕效果实例代码
Sep 02 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
vue实现的组件兄弟间通信功能示例
Dec 04 Javascript
bootstrap table实现合并单元格效果
Dec 24 Javascript
JavaScript运动原理基础知识详解
Apr 02 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
Mar 02 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与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
php下过滤HTML代码的函数
2007/12/10 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
PHP进阶学习之反射基本概念与用法分析
2019/06/18 PHP
PHP+redis实现微博的拉模型案例详解
2019/07/10 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
javascript获取鼠标点击元素对象(示例代码)
2013/12/20 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
JS hashMap实例详解
2016/05/26 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
JS运动特效之链式运动分析
2018/01/24 Javascript
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
2019/03/28 Javascript
手写Vue源码之数据劫持示例详解
2021/01/04 Vue.js
如何在VUE中使用vue-awesome-swiper
2021/01/04 Vue.js
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
使用Python机器学习降低静态日志噪声
2018/09/29 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
Django框架反向解析操作详解
2019/11/28 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
Shell编程面试题
2016/05/29 面试题
办公室前台岗位职责范本
2013/12/10 职场文书
高中的职业生涯规划书
2013/12/28 职场文书
大学军训感言800字
2014/02/27 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
组织生活会发言材料
2014/12/15 职场文书
务虚会发言材料
2014/12/25 职场文书
质检员岗位职责
2015/02/03 职场文书
鼋头渚导游词
2015/02/05 职场文书
离婚答辩状范文
2015/05/22 职场文书
2016年教代会开幕词
2016/03/04 职场文书