内容介绍热点排行相关文章下载地址↓

效果非常不错的登录窗口，输入框获取焦点后会自动隐藏默认文本，如果为空会提示必填字段 ，经测试，效果相当不错，感兴趣的朋友可以参考下哈

在网页head区添加以下代码

[code]

html, body

{

height: 100%;

}

body

{

font: 12px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica;

margin: 0;

background-color: #d9dee2;

background-image: -webkit-gradient(linear, left top, left bottom, from(#ebeef2), to(#d9dee2));

background-image: -webkit-linear-gradient(top, #ebeef2, #d9dee2);

background-image: -moz-linear-gradient(top, #ebeef2, #d9dee2);

background-image: -ms-linear-gradient(top, #ebeef2, #d9dee2);

background-image: -o-linear-gradient(top, #ebeef2, #d9dee2);

background-image: linear-gradient(top, #ebeef2, #d9dee2);

}

/*--------------------*/

#login

{

background-color: #fff;

background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));

background-image: -webkit-linear-gradient(top, #fff, #eee);

background-image: -moz-linear-gradient(top, #fff, #eee);

background-image: -ms-linear-gradient(top, #fff, #eee);

background-image: -o-linear-gradient(top, #fff, #eee);

background-image: linear-gradient(top, #fff, #eee);

height: 240px;

width: 400px;

margin: -150px 0 0 -230px;

padding: 30px;

position: absolute;

top: 50%;

left: 50%;

z-index: 0;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

-webkit-box-shadow:

0 0 2px rgba(0, 0, 0, 0.2),

0 1px 1px rgba(0, 0, 0, .2),

0 3px 0 #fff,

0 4px 0 rgba(0, 0, 0, .2),

0 6px 0 #fff,

0 7px 0 rgba(0, 0, 0, .2);

-moz-box-shadow:

0 0 2px rgba(0, 0, 0, 0.2),

1px 1px 0 rgba(0, 0, 0, .1),

3px 3px 0 rgba(255, 255, 255, 1),

4px 4px 0 rgba(0, 0, 0, .1),

6px 6px 0 rgba(255, 255, 255, 1),

7px 7px 0 rgba(0, 0, 0, .1);

box-shadow:

0 0 2px rgba(0, 0, 0, 0.2),

0 1px 1px rgba(0, 0, 0, .2),

0 3px 0 #fff,

0 4px 0 rgba(0, 0, 0, .2),

0 6px 0 #fff,

0 7px 0 rgba(0, 0, 0, .2);

}

#login:before

{

content: '';

position: absolute;

z-index: -1;

border: 1px dashed #ccc;

top: 5px;

bottom: 5px;

left: 5px;

right: 5px;

-moz-box-shadow: 0 0 0 1px #fff;

-webkit-box-shadow: 0 0 0 1px #fff;

box-shadow: 0 0 0 1px #fff;

}

/*--------------------*/

h1

{

text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5);

text-transform: uppercase;

text-align: center;

color: #666;

margin: 0 0 30px 0;

letter-spacing: 4px;

font: normal 26px/1 Verdana, Helvetica;

position: relative;

}

h1:after, h1:before

{

background-color: #777;

content: "";

height: 1px;

position: absolute;

top: 15px;

width: 120px;

}

h1:after

{

background-image: -webkit-gradient(linear, left top, right top, from(#777), to(#fff));

background-image: -webkit-linear-gradient(left, #777, #fff);

background-image: -moz-linear-gradient(left, #777, #fff);

background-image: -ms-linear-gradient(left, #777, #fff);

background-image: -o-linear-gradient(left, #777, #fff);

background-image: linear-gradient(left, #777, #fff);

right: 0;

}

h1:before

{

background-image: -webkit-gradient(linear, right top, left top, from(#777), to(#fff));

background-image: -webkit-linear-gradient(right, #777, #fff);

background-image: -moz-linear-gradient(right, #777, #fff);

background-image: -ms-linear-gradient(right, #777, #fff);

background-image: -o-linear-gradient(right, #777, #fff);

background-image: linear-gradient(right, #777, #fff);

left: 0;

}

/*--------------------*/

fieldset

{

border: 0;

padding: 0;

margin: 0;

}

/*--------------------*/

#inputs input

{

background: #f1f1f1 url(//www.sharejs.com/code/html5/login_form/login-sprite.png) no-repeat;

padding: 15px 15px 15px 30px;

margin: 0 0 10px 0;

width: 353px; /* 353 + 2 + 45 = 400 */

border: 1px solid #ccc;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;

-webkit-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;

box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;

}

#username

{

background-position: 5px -2px !important;

}

#password

{

background-position: 5px -52px !important;

}

#inputs input:focus

{

background-color: #fff;

border-color: #e8c291;

outline: none;

-moz-box-shadow: 0 0 0 1px #e8c291 inset;

-webkit-box-shadow: 0 0 0 1px #e8c291 inset;

box-shadow: 0 0 0 1px #e8c291 inset;

}

/*--------------------*/

#actions

{

margin: 25px 0 0 0;

}

#submit

{

background-color: #ffb94b;

background-image: -webkit-gradient(linear, left top, left bottom, from(#fddb6f), to(#ffb94b));

background-image: -webkit-linear-gradient(top, #fddb6f, #ffb94b);

background-image: -moz-linear-gradient(top, #fddb6f, #ffb94b);

background-image: -ms-linear-gradient(top, #fddb6f, #ffb94b);

background-image: -o-linear-gradient(top, #fddb6f, #ffb94b);

background-image: linear-gradient(top, #fddb6f, #ffb94b);

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

text-shadow: 0 1px 0 rgba(255,255,255,0.5);

-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;

-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;

box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;

border-width: 1px;

border-style: solid;

border-color: #d69e31 #e3a037 #d5982d #e3a037;

float: left;

height: 35px;

padding: 0;

width: 120px;

cursor: pointer;

font: bold 15px Arial, Helvetica;

color: #8f5a0a;

}

#submit:hover,#submit:focus

{

background-color: #fddb6f;

background-image: -webkit-gradient(linear, left top, left bottom, from(#ffb94b), to(#fddb6f));

background-image: -webkit-linear-gradient(top, #ffb94b, #fddb6f);

background-image: -moz-linear-gradient(top, #ffb94b, #fddb6f);

background-image: -ms-linear-gradient(top, #ffb94b, #fddb6f);

background-image: -o-linear-gradient(top, #ffb94b, #fddb6f);

background-image: linear-gradient(top, #ffb94b, #fddb6f);

}

#submit:active

{

outline: none;

-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;

-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;

box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;

}

#submit::-moz-focus-inner

{

border: none;

}

#actions a

{

color: #3151A2;

float: right;

line-height: 35px;

margin-left: 10px;

}

/*--------------------*/

#back

{

display: block;

text-align: center;

position: relative;

top: 60px;

color: #999;

}

[/code]

在网页body区添加以下代码

[code]

Log In

Forgot your password?Register

Back to article...

(function(){

var bsa = document.createElement('script');

bsa.async = true;

bsa.src = '//www.sharejs.com/code/html5/login_form/adpacks-demo.js';

(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);

})();

[/code]

下载地址

HTML5+CSS3实现超酷登录窗口(自动隐藏默认文本及判断必填字段)

网友评论

下载声明

☉ 解压密码：www.jb51.net 就是本站主域名，希望大家看清楚，[ 分享码的获取方法 ]可以参考这篇文章

☉ 推荐使用 [ 迅雷 ] 下载，使用 [ WinRAR v5 ] 以上版本解压本站软件。

☉ 如果这个软件总是不能下载的请在评论中留言,我们会尽快修复，谢谢!

☉ 下载本站资源，如果服务器暂不能下载请过一段时间重试!或者多试试几个下载地址

☉ 如果遇到什么问题，请评论留言，我们定会解决问题，谢谢大家支持!

☉ 本站提供的一些商业软件是供学习研究之用，如用于商业用途，请购买正版。

☉ 本站提供的HTML5+CSS3实现超酷登录窗口(自动隐藏默认文本及判断必填字段)资源来源互联网，版权归该下载资源的合法拥有者所有。

html字段隐藏,HTML5+CSS3实现超酷登录窗口(自动隐藏默认文本及判断必填字段)相关推荐

  1. html5 好看的折叠效果,9款HTML5实现的超酷特效

    canvas画的时钟 一款时钟效果,效果非常棒! HTML5画板实现的画图板效果 如果你需要整合一个现成的HTML5画板的话, 这个drawingboard.js绝对是个不错的选择,支持颜色选择,un ...

  2. 9款HTML5实现的超酷特效

    之前我们推荐了8款HTML5实现的特效和应用,今天我们带来的这9款热门的HTML5特效同样会带给你全新的视角和体验. HTML5是HTML的升级版,HTML5有两大特点:首先,强化了 Web 网页的表 ...

  3. 基于HTML5实现的超酷摄像头（HTML5 webcam）拍照功能 - photobooth.js

    在线演示  下载 WebRTC可能是明年最受关注的HTML5标准了,Mozilla为此开发了一套帮助你控制硬件的API,例如,摄像头,麦克风,或者是加速表.你可以不依赖其它的插件来调用你需要的本机硬件 ...

  4. html5摄像头 在线演示,基于HTML5实现的超酷摄像头（HTML5 webcam）摄

    }); WebRTC可能是来岁最受关心的HTML5标准了,Mozilla为此开辟了一套协帮你节造软件的API,例如,摄像头,麦克风,或者是加快表.你可以或许不依赖其它的插件来调用你需要的本机软件设备. ...

  5. java 字段验证_Selenium-Gherkin-Java:验证必填字段上的文本

    简短版:我有一个必填字段,显示"此字段是必需的"的元素可以包含多个消息.我正在努力设置我的BDD功能步骤.页面和步骤文件,以验证是否显示了正确的消息. 长版: 对Java/Sele ...

  6. jsf 自定义属性_必填字段的自定义JSF验证器

    jsf 自定义属性 实现EditableValueHolder接口的JSF组件具有两个属性" required"和" requiredMessage" –一个标 ...

  7. 必填字段的自定义JSF验证器

    实现EditableValueHolder接口的JSF组件具有两个属性" required"和" requiredMessage" –一个标志,指示用户需要输入 ...

  8. java非必填字段跳过校验,avalon2表单验证,非必填字段在不填写的时候不能通过验证...

    avalon2表单验证,非必填字段在不填写的时候不能通过验证 代码 var vm = avalon.define({ $id: "validate1", aaa : "& ...

  9. 【Iterm2】如何解决iterm2窗口自动隐藏的问题

    [Iterm2]如何解决iterm2窗口自动隐藏的问题 参考文章: (1)[Iterm2]如何解决iterm2窗口自动隐藏的问题 (2)https://www.cnblogs.com/75662360 ...

最新文章

  1. 移动端点击事件延迟300毫秒
  2. C#提取HTML代码中的文字（转）
  3. mysql 保留两位小数
  4. mysql数据表设计要点以及快门
  5. 前端学习（2965）：路由的参数传递
  6. Java程序员必备！Dagger2源码分析（二(1)
  7. 開源搜索引擎爬蟲_六大開源搜索引擎工具 | 學步園
  8. 求素数--筛选法和打表
  9. 网络安全知识竞赛选择题(161-200题)
  10. android经纬度查询,Android - 经纬度获取
  11. Audacity使用技巧详解
  12. mac启动terminal终端快捷键
  13. 伽马校正(gamma correction)学习笔记
  14. 学校部门申请成立计算机中心,学生计算机社团成立申请书
  15. 转：教大家如何用HBuilder将web项目打包成apk
  16. Java在Word中插入上标和下标
  17. Python Seaborn (5) 分类数据的绘制
  18. Java构造方法详解：
  19. 【高通SIM卡】 单双卡NV配置
  20. vue.js项目实战运用篇之抖音视频APP-第十一节： 注册登录及验证码功能

热门文章

  1. 创建ISAPI过滤器（转）
  2. 基于FPGA数字示波器
  3. php项目前端src文件结构,前端项目中目录结构优化的方法总结
  4. c语言五子棋mouseclick,MouseClick - AutoHotkey 中文手册
  5. Linux v4l2 二 驱动和 usb 摄像头
  6. 组织行为学对项目管理的意义（2）：人格的大五模型
  7. python发送qq邮件失败_Python实现给qq邮箱发送邮件的方法
  8. 试用期“六个注意点”
  9. c语言中int x=0101,二进制安全_C语言中数据类型
  10. 图片无损放大软件哪个好？快把这些软件收好