采用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代码来临时应付作业的心情... ...
随机推荐
- 【BZOJ】1048: [HAOI2007]分割矩阵
http://www.lydsy.com/JudgeOnline/problem.php?id=1048 题意:给出一个a×b(a,b<=10)的矩阵,带一个<=100的权值,现在要切割n ...
- uva729
/*题目一大堆,其实意思就是长度为n个二进制数,里面有h个1,将这个二进制数进行全排列,然后输出*/ #include"iostream" #include"algori ...
- BibTex插入Reference
1. 在tex文件中加入: \bibliographystyle{plain} %这是格式 \bibliography{reffile} % reffile.bib是reference的文件 2 ...
- Bind的DNS解析设置forward - 阿权的书房
bind有一项功能是forward,也就是只是做dns缓存. 适用以下情况: 1 做临时测试,不想向上级申请修改ns记录2 不想向上级申请修改ns记录但希望交给另外的服务器处理3 只有有限的公网IP, ...
- gitlab & gerrit & git & repo & jenkins
Omnibus GitLab documentation(中文安装说明) 在自己的服务器上部署 GitLab 社区版->较为全面 GIT & REPO & GERRIT (三) ...
- 《Java核心技术卷二》笔记（三）正则表达式
正则表达式语法 一个正则表达式描述了字符串的构成规则(模式).如果一个具体的字符串正好符合正则表达式描述的这个规则,这个字符串就是与表达式匹配的.先看一下怎么描述这种规则,也就是正则表达式语法.正则表 ...
- FastDFS安装、配置、部署
FastDFS是一个开源的,高性能的的分布式文件系统,他主要的功能包括:文件存储,同步和访问,设计基于高可用和负载均衡,FastDFS非常适用于基于文件服务的站点,例如图片分享和视频分享网站. Fas ...
- MySQL 日期和时间戳互相转换
① 时间戳转换成日期 FROM_UNIXTIME 例如: 数据表中 invest_time 存储的是时间戳,如 1429063399 使用 FROM_UNIXTIME 可以把时间戳转换为日期: sel ...
- MySQL DATE_FORMAT() 函数
定义和用法 DATE_FORMAT() 函数用于以不同的格式显示日期/时间数据. 语法 DATE_FORMAT(date,format) date 参数是合法的日期.format 规定日期/时间的输出 ...
- 使用CodeIgniter框架搭建RESTful API服务
使用CodeIgniter框架搭建RESTful API服务 发表于 2014-07-12 | 分类于 翻译笔记 | 6条评论 在2011年8月的时候,我写了一篇博客<使用Cod ...