采用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代码来临时应付作业的心情... ...
随机推荐
- 2015ACM/ICPC亚洲区长春站 J hdu 5536 Chip Factory
Chip Factory Time Limit: 18000/9000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others)T ...
- 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) ...
- ajax返回数据解析总结
ajax即异步 JavaScript 和 XML(Asynchronous JavaScript and XML). 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示 ...
- 【BZOJ】1180: [CROATIAN2009]OTOCI & 2843: 极地旅行社（lct）
http://www.lydsy.com/JudgeOnline/problem.php?id=1180 今天状态怎么这么不好..................................... ...
- POJ 2948 Martian Mining(DP)这是POJ第200道，居然没发现
题目链接 两种矿石,Y和B,Y只能从从右到左,B是从下到上,每个空格只能是上下或者左右,具体看图.求左端+上端最大值. 很容易发现如果想最优,分界线一定是不下降的,分界线上面全是往上,分界线下面都是往 ...
- python 面向对象的三大特征之 封装
封装:私有化 class Person(object): def __init__(self): self.__gender = "man" #在类的属性名称前面加__ self. ...
- Scala：使用Sublime开发Scala
Scala:使用Sublime开发Scala 第一步:[Tools][Build System][New Build System] 第二步:在打开的新文件中输入: { //"cmd&quo ...
- Linux 高级网络编程
设置套接字函数: #include<sys/socket.h> int setsockopt(int sockfd, int level, int optname, const void* ...
- TCP和UDP的135、137、138、139、445端口的作用
如果全是2000以上的系统,可以关闭137.138.139,只保留445 如果有xp系统,可能以上四个端口全部要打开 无论你的服务器中安装的是Windows 2000 Server,还是Windows ...
- 常用的PHP数据库操作方法（MYSQL版）
常用的PHP数据库操作方法(MYSQL版) 作者: 字体:[增加 减小] 类型:转载 时间:2011-06-08 最近一直在折腾自己的网站首页,写的大部分PHP脚本都要用到和MYSQL数据库相关的 ...