采用CSS3设计的登陆界面
body部分内容：
<body>
<form id="form_id" name="form_id" method="get" action="http://baidu.com" onsubmit="return checkUser()">
<div id="loginForm">
<div id="loginTitle">LOGIN</div>
<div id="loginContent">
<div id="user_info">
<label>Username:</label><img src="./user.png" /><input id="login_username" type="text" name="login_username" maxlength="32" placeholder="Username" />
<br />
<label>Password:</label><img src="./pwd.png" /><input id="login_password" type="password" name="login_password" maxlength="32" placeholder="Password" />
</div>
<div id="user_help">
<input id="login_save" type="checkbox" /><label>Remember me</label> | <a href="#" target="_blank">Forgot password?</a>
</div>
</div>
<div id="loginButton">
<div id="register"><input id="register_button" type="button" name="regButton" value="register" onclick="register()" /></div>
<div id="login"><input id="login_button" type="submit" name="login_button" value="login" /></div>
</div>
</div>
</form>
</body>
style部分内容：
<style>
html,body,div{
margin:0;
padding:0;
font-size:100%;
}
html{
background:url('./bgeight.jpg') no-repeat;
background-size:cover;
}
#loginForm{
height:200px;
width:350px;
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -175px;
box-shadow:0px 0px 25px 12px #c0c0c0;
border:6px solid;
border-color:#c0c0c0;
border-radius:12px;
}
#loginTitle{
height:50px;
width:100%;
font-family:blazed,Kunstler Script"New York",Georgia;
font-weight:bold;
font-style:oblique;
font-size:2em;
text-align:center;
line-height:50px;
//-webkit-text-stroke:10px black;
color:white;
text-shadow:1px 1px 0 rgba(107,223,248,0.8),2px 2px 0 rgba(107,223,248,0.8),3px 3px 0 rgba(107,223,248,0.8),4px 4px 0 rgba(107,223,248,0.8),5px 5px 0 rgba(107,223,248,0.8);
}
#loginContent{
height:110px;
width:100%;
position:relative;
}
#loginButton{
height:40px;
width:100%;
}
#register{
height:40px;
width:175px;
float:left;
}
#login{
height:40px;
width:175px;
float:left;
}
#register_button{
height:40px;
width:175px;
background:none;
border-radius:6px;
border:1px solid;
border-color:#808080;
box-shadow:0px 0px 10px 0px #c0c0c0 inset;
font-weight:bold;
}
#login_button{
height:40px;
width:175px;
background:none;
border-radius:6px;
border:1px solid;
border-color:#808080;
box-shadow:0px 0px 10px 0px #c0c0c0 inset;
font-weight:bold;
}
#user_info{
position:absolute;
height:80px;
width:250px;
left:75px;
top:0px;
}
#user_help{
position:absolute;
height:30px;
width:230px;
left:60px;
top:80px;
}
label{
font-weight:bold;
width:20px;
}
#user_info input{
background:none;
width:175px;
}
input[type=checkbox]{
vertical-align:middle;
margin-top:0;
}
#user_help input,#user_help label,#user_help a{
line-height:30px;
font-size:12px;
}
img{
height:20px;
width:20px;
display:block;
float:left;
}
#user_info label{
display:block;
}
</style>
简单的登陆名与密码判断：
<script>
function checkUser(){
var Username=document.getElementById('login_username').value;
var Password=document.getElementById('login_password').value; if(Username==""||Username==null){
alert("The Username can't be null");
return false;
}
if(Password==""||Password==null){
alert("The Password can't be null");
return false;
}
else
{
return true;
}
}
</script>
这个示例采用CSS3的一些特性来制作的，自己学习HTML5+CSS3的一个练习作品，请大家欣赏与指导，谢谢！
更多知识分享：微笑空间站
采用CSS3设计的登陆界面的更多相关文章
- 采用CSS3设计的登录界面，动态效果（动画）
与上一篇的“采用CSS3设计的登陆界面”的相同,只是样式style添加了CSS3的动画元素. style内容如下: <style> html,body,div{ margin:0; pad ...
- 一个简单WPF登陆界面，包含记住密码，自动登录等功能，简洁美观
简介:这是一个自己以前用WPF设计的登陆界面,属于一个实验性的界面窗体,如果用于产品还很有不足.但也是有一点学习价值.后台代码略有复杂,但基本上都有注释 分类,略有代码经验的一般都能看懂. 登陆界面外 ...
- QML设计登陆界面
QML设计登陆界面 本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 环境: 主机:WIN7 开发环境:Qt5.2 说明: 用QML设计一个应用的登陆界面 ...
- QML与C++交互:登陆界面设计
QML与C++交互:登陆界面设计 本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 环境: 主机:WIN7 开发环境:Qt5.2.1 说明: QML设计前 ...
- WDA演练一：用户登陆界面设计(二)
一,登陆界面设计: 1.将系统编号灰显,默认初值 2.密码栏勾选密码显示,这样就不会明文显示在页面上了: Init方法中添加默认值代码: METHOD wddoinit . DATA lo_nd_zh ...
- WDA演练一：用户登陆界面设计(一)
一,新建用户表: 用户和密码参考标准的.这里给用户分了几个维度,以便后面进行接下来的业务设定. 二,新建ZLY_PORTAL 程序. 除了MAIN视图外,在添加LOGON视图. 1.导入预先做好的主页 ...
- UI设计（流程/界面）设计规范
1.UI设计基本概念与流程 1.1 目的 规范公司UI设计流程,使UI设计师参与到产品设计整个环节中来,对产品的易用性进行全流程负责,使UI设计的流程规范化,保证UI设计流程的可操作性. 1.2范围 ...
- Android仿QQ微信开场导航以及登陆界面
相信大家对于微信等社交应用的UI界面已经都很熟悉了,该UI最值得借鉴的莫过于第一次使用的时候一些列产品介绍的图片,可以左右滑动浏览,最后 进入应用,这一效果适用于多种项目中,相信今后开发应用一定会用得 ...
- 用asp连接Access数据库 制作简单登陆界面
[题外话:最近做Internet作业,在这写一个适合初学入门的ASP连接ACCESS数据库做登陆界面的简单的例子,以慰藉我一口气把以前做过的系统中的PHP代码全改成ASP代码来临时应付作业的心情... ...
随机推荐
- HDU3251 Being a Hero（最小割）
题目大概一个国家n个城市由m条单向边相连,摧毁每条边都有一个费用.现在你可以选择所给的f个城市中的若干个,每个城市选择后都有一定的价值,但首都1号城市必须到达不了你选择的城市,因为你可能需要摧毁一些边 ...
- BZOJ3830 : [Poi2014]Freight
首先为了保证发车时间都不同,T[i]=max(T[i],T[i-1]+1) 然后设f[i]表示前i列车回来的最早时刻 f[i]=min(max(T[i],f[j]+i-j-1)+s*2+i-j-1) ...
- [Cocos2d-x For WP8]Menu菜单
菜单栏这是游戏里面基本的控件来的, 头文件: #include <CCMenu.h> 继承关系图: 头文件: #include < ...
- Why NHibernate updates DB on commit of read-only transaction
http://www.zvolkov.com/clog/2009/07/09/why-nhibernate-updates-db-on-commit-of-read-only-transaction/ ...
- MONGODB 计算机服务
安装完成后,在 BIN目录执行如下 E:\APMServ5.2.6\MongoDb\bin>mongod --logpath E:\APMServ5.2.6\MongoDb\logs\Mongo ...
- OpenCV学习笔记——形态学梯度操作
代码: #include<cv.h> #include<highgui.h> int main(void) { cvNamedWindow("cmp"); ...
- HDU 1016 Prime Ring Problem（经典DFS+回溯）
Prime Ring Problem Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- CSS架构
CSS架构 有趣的是,我们通常不这样评判其他语言.一个Rails开发者不会因为他写的代码规范就认为他是一个好的开发者.因为这是最基本的.当然它必须是满 足规范,除此以外还要考虑其他方面:代码是否有可读 ...
- 块级&行内（内联）元素
行内元素列表 <a>标签可定义锚 <abbr>表示一个缩写形式 <acronym>定义只取首字母缩写 <b>字体加粗 <bdo>可覆盖默认的 ...
- 实现Fragment 切换时不重新实例化
以前实现Fragment的切换都是用replace方法实现 public void startFragmentAdd(Fragment fragment) { FragmentManager frag ...