采用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代码来临时应付作业的心情... ...
随机推荐
- unity button
#pragma strict var buttonTexture:Texture2D; private var str:String; private var frameTime:int; funct ...
- 【BZOJ】3319: 黑白树
http://www.lydsy.com/JudgeOnline/problem.php?id=3319 题意:给一棵n节点的树(n<=1e6),m个操作(m<=1e6),每次操作有两种: ...
- Chromium的GPU进程启动流程
转载请注明出处:http://www.cnblogs.com/fangkm/p/3960327.html 硬件渲染依赖计算机的GPU,GPU种类繁多,兼容这么多种类的硬件,稳定性是个大问题,虽然Chr ...
- Ruby Hash与ActiveSupport’s HashWithIndifferentAccess对于key的区别
Ruby Hash的key定义的时候是支持symbol或者string的,所以访问的时候只能是symbol或者string其中一种方式. 建议使用symbol定义Hash的key,因为symbol在R ...
- 关于isset使用产生Can't use function return value in write context错误
在使用isset检测session的一个取值是否存在时,产生了这个问题 翻译一下:不能在填写的内容中使用函数的返回值.然后我查看了php手册看isset函数的使用:isset()只能用于变量,因为传递 ...
- Repair duplicate IDs on cloned Endpoint Protection 12.1 clients
https://support.symantec.com/en_US/article.TECH163349.html
- CSS权威指南 - 基本视觉格式化 1
定位 定位的想法很简单元素框相对于正常位置出现在哪里. 定位:static,相对, 绝对, fixed, 继承 static就是默认的位置 相对就是相对于默认位置的偏移.原来的static定位位置依然 ...
- 将Asset中的数据库文件拷贝出来使用
设置保存路径 private final static String DATABASE_PATH = "/data"+ Environment.getDataDirectory() ...
- 获取checkbox复选框的值
<title>CheckBox</title> <script type = "text/javascript"> doGetVal: func ...
- MZhong's Cover Letter
Application for front-end developer position in Chicago Office Dear HR, I am writing to apply for th ...