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

改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>

赞 (0)

相关推荐

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

    改facebook的,绝对是你想要的,不需要图片,因为我的以前几个东西被转载到好多地方但是没有人给我说,还没有人说是哪里来的,就把我blog地址写这里的,要用的话就把那东西去掉吧 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ht

  • js实现仿Discuz文本框弹出层效果

    js实现仿Discuz文本框弹出层效果

    本文实例讲述了js实现仿Discuz文本框弹出层效果.分享给大家供大家参考.具体如下: 这是一个在经典论坛曾经热讨论的问题,记得在QQ邮箱里也有类似功能,Discuz7.0论坛里同样也有,当你的鼠标单击文本框的时候,会弹出一个包含文字.图片.表单无素的DIV层,里面的元素都可以进行操作,很方便,选中的值会自动添加到文本框内.本代码经过了多次修正,没有进行过多美化,你美工好的话可以自己美化. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//D

  • Android实现弹出登陆框的方案

    下面是我的实现经历: 1.首先,我是直接使用AlertDialog来实现,确定是,形状有点难看,而且获得Dialog里面的控件略显麻烦(因为我要做的登陆框有一定的布局),然后就给我就放弃了,可能因为我太水了,不能很好的使用它 2.然后我就使用PopupWindow来实现,界面是达到了我的要求,控件的获得通过Inflater就可以获得了相对较简单,但是有一个缺点就是,当点击输入的时候,对话框不会根据软键盘的位置而改变位置,网上搜了搜,还不能直接监听软键盘的出现和消失的事件消息,挣扎了一个下午,果断

  • 使用 Vue.js 仿百度搜索框的实例代码

    整理文档,搜刮出一个使用 Vue.js 仿百度搜索框的实例代码,稍微整理精简一下做下分享. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue demo</title> <style type="text/css"> .bg { background: #ccc; } </style> <s

  • 基于jQuery实现仿微博发布框字数提示

    基于jQuery实现仿微博发布框字数提示

    jQuery实现仿微博发布框字数提示,主要是运用字符串操作! 效果图: HTML: <textarea name="" id="" cols="30" rows="10"></textarea><br> <span>你还可以输入<strong style="color:red;">140</strong>个字</span>

  • C# winform登陆框验证码的实现方法

    本文实例为大家分享了C# winform登陆框验证码的具体代码,供大家参考,具体内容如下 1.  新建一个简单的 windows 应用项目 在默认的 Form1 中添加如下控件: 1)  Label : text = " 输入验证码 :" 2)  TextBox : name=" txtValidCode" 输入验证码的文本框 3)  Image : name=" picValidCode" 显示验证码的图片控件 4)  Button :单击事件

  • js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动

    js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动

    用JS写出遮罩层登陆框和对联广告并自动跟随滚动条滚动保持让用户一直可以看到 好了,天色已晚废话不多说,代码特别详细 有注释,请看代码. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://

  • 基于jQuery Easyui实现登陆框界面

    基于jQuery Easyui实现登陆框界面

    效果图 CSS a{ text-decoration:none; } body{ margin:0px; } #header{ width:100%; height:30px; background-color:#E0EFFF; padding-top: 5px; padding-bottom: 10px; } #header .logo{ margin-left: 50px; font-size: 24px; font-family: 微软雅黑; } #picture{ width:100%;

  • jQuery 插件仿百度搜索框智能提示(带Value值)

    因公司需要做一个仿百度搜索框,并且带Value值的, 网上找了下只有Text, 都没带Value的 所以做了个. 直接贴代码. 复制代码 代码如下: (function($) { var timeid; var lastValue; var options; var c; var d; var t; $.fn.autoComplete = function(config) { c = $(this); var defaults = { width: c.width(), //提示框的宽度 默认跟

  • Bootstrap编写导航栏和登陆框

    本文实例为大家分享了Bootstrap导航栏和登陆框的具体代码,供大家参考,有不足的地方请大家谅解,大家共同学习进步. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css" />

随机推荐