采用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代码来临时应付作业的心情... ...
随机推荐
- 更新Android SDK之后Eclipse提示ADT版本过低的一个简易解决办法
首先说明一下发表这一篇博文的“历史原因”吧,因为在更新SDK之后,进入Eclipse设置Android SDK目录的时候,会突然说我的版本低什么的,尝试自己解决但失败之后,我在搜索引擎上找了很多中文的 ...
- 蒟蒻修养之tc蓝名计划
开一个新坑......(听说tc是智商高的人才能玩的QAQ显然我是被屠的... 1 [645DIV2]这个能说是裸模拟吗... 弃坑= =做了一些题感觉没必要放上来了= =等div1先吧....... ...
- HttpClient_HttpClient 4.3.6 HTTP状态管理
HTTP状态管理 最初的HTTP被设计成以状态.请求/应答为导向的协议,它被制作成是没有特殊条款的,以便在状态会话中能交换逻辑关系请求/应答.HTTP协议越来越受欢迎和被采用,越来越多的系统会在应用程 ...
- Web前端开发规范文档你需要知道的事--HTML、css、js、文档等需要规范内容
规范目的 为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,特制订此文档.本规范文档一经确认,前端开发人员必须按本文档规范进行前台页面开发.本文档如有不对或者不 ...
- SQL Server 中的触发器（trigger）
SQL Server 触发器 触发器是一种特殊类型的存储过程,它不同于之前的我们介绍的存储过程.触发器主要是通过事件进行触发被自动调用执行的.而存储过程可以通过存储过程的名称被调用. Ø 什么是触发器 ...
- 从eclipse到Android studio/迁移eclipse的Android项目到Android studio平台的注意事项
整体要注意的地方 先说明一下整体需要注意的地方 1在Android studio建立项目的时候,要注意包名和原来的完全一致,不然会有很多需要改动. 2依赖的jar一定一定要找齐,不然新建项目引用不到, ...
- java中.equals和==的区别？
Java中的equals是十分重要的,和= =要区别开来,孙卫琴的JAVA面向对象编程一书对这个做了阐述,现在小结其主要内容,而且要将 = =和 equals列为重要的对比概念来学习 1.声明格式 ...
- Yii2 验证码不显示
siteController 中,要将captcha 列为任意用户可以访问
- setInterval 启用和停止，见代码
<title></title> <script src="Scripts/jquery-1.4.1-vsdoc.js" type="t ...
- Archlinux 简明安装指南
archlinux是在distrowatch里位于top 10的发行版中,唯一采用roll release的distribution. pacman和yaourt双剑合壁,使得在archlinux安装 ...