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

最新推荐文章于 2021-06-24 00:40:36 发布
最新推荐文章于 2021-06-24 00:40:36 发布
阅读量200 收藏
点赞数
文章标签： html字段隐藏

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

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

在网页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]

27918e620aaaa927cd2ad67de58c8fef.gif

下载地址

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

网友评论

下载声明

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

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

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

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

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

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

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

weixin_39574868
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css3酷炫登录界面
05-19
CSS3酷炫登录
html 隐藏字段,wtforms隐藏字段值
weixin_39590868的博客
05-31 167
我使用的是WTForms，我有一个隐藏字段不返回值的问题，而文档说它们应该返回值。下面是一个简单的例子：表单.py:from wtforms import (Form, TextField, HiddenField)class TestForm(Form):fld1 = HiddenField("Field 1")fld2 = TextField("Field 2")实验.html:{% from...
html字段隐藏,以html格式隐藏多个字段
weixin_39955149的博客
05-30 481
我在HTML表单中有多个具有相同id的字段，如果特定字段的值为1但我只隐藏它们，但它只隐藏该ID的第一个字段，所有其他字段都不隐藏以html格式隐藏多个字段Days of weekMondayTuesdayWednesdayThursdayFridaySaturday SundayTimefor($i=1;$i<=12;$i++){echo"$i AM";}for($i=1;$i<=1...
html 隐藏字段 默认值,HTML Input Hidden defaultValue用法及代码示例
weixin_42504279的博客
06-01 886
HTML DOM中的Input Hidden defaultValue属性用于设置或返回隐藏字段的默认值。此属性用于反映HTML值属性。默认值和值之间的主要区别在于，默认值表示默认值，并且在进行一些更改后该值包含当前值。此属性对于确定“日期”字段是否已更改很有用。用法:它返回defaultValue属性。hiddenObject.defaultValue它用于设置defaultValue属性。hi...
html提交隐藏,以html格式提交隐藏字段
weixin_39661345的博客
06-03 371
对于基本的HTML表单，我想将表单分成三个选项卡，每个选项卡将包含特定的字段，并且在提交表单时，我希望三种表单中的所有数据都能够提交。以html格式提交隐藏字段所以我具有由和Tab1Tab2Tab3和该菜单下创建的菜单，我有三个的div表示每个选项卡的：输入控制元件将被放入每个tab div。并且菜单导航栏中的JavaScript将通过调用每个div的show() & hide()方法来控...
HTML5+CSS3实现超酷登录窗口(自动隐藏默认文本及判断必填字段).zip
11-03
HTML5+CSS3实现超酷登录窗口(自动隐藏默认文本及判断必填字段).zip
html5和css3表单必填字段美化效果
12-13
这是一款使用html5和css3制作的表单必填字段美化效果插件。该表单美化插件共有3种效果：必填字段背景高亮效果、必填字段隐藏效果和必填字段3d效果。
Ajax 结合HTML5实现表单判断及提示效果.rar
07-10
Ajax 结合HTML5实现表单判断及提示效果，想实现Ajax无刷新效果的表单么？相信这个基于HTML5/CSS3技术的表单，会让你学习到一些难得的HTML5知识技巧，这款表单来自国外CSS3达人所写，很有参考价值。
基于SpringBoot+MyBatis实现数据库存取字段的自动加解密源码(课程设计).zip
07-05
该资源主要针对计算机、通信、自动化等相关专业的学生、老师或从业者下载使用，亦可作为期末课程设计、课程大作业、毕业设计等。 项目整体具有较高的学习借鉴价值！基础能力强的可以在此基础上修改调整，以实现不同...
使用HTML5和CSS3表单验证功能
12-12
下面我们将来一步一步创造一个HTML5和CSS3的表单验证，只使用HTML和CSS。 完成后的如下： 第一步：整理验证字段和类型 首先我们需要如下几个字段： 姓名(full name) 电话号码(phone number) 邮箱地址(email ...
超炫的登陆页面
03-15
超炫的登陆注册页面！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
html5+css3精美登录界面
12-19
很精美的登陆界面，html5+css3开发的，所以可能不适合低版本IE浏览器。大家可以下来看看，做的超级漂亮的，非常赞，统一修改了博主所有下载文件的积分，方便大家学习，一起提升
PC端超炫登录页面HTML5+CSS3
11-22
这是一个超炫的登录界面，使用HTML5+CSS3 实现的登录界面，效果是使用canvs画出来的，可惜这里不能上传展示图片，能上传我就上传一个了，个人感觉很好看，背景图可以自己进行更换，背景图是通过CSS文件引入放的，在demo.css文件中可以找到进行更换 background-image: url(../img/Starry.jpg)
HTML5+CSS3炫酷的手机登陆界面
08-10
HTML5+CSS3实现的登陆界面
html只部分用户访问,如果用户已登录，则隐藏HTML内容
weixin_42347943的博客
06-24 87
小编典典您只需为模板提供结构并管理其中的渲染。这是一个工作示例进行测试：package mainimport ("html/template""net/http")func main() {http.HandleFunc("/", helloHandler)http.ListenAndServe(":8000", nil)}type User struct {Name string}func he...
采用CSS3设计的登录界面，动态效果（动画）
xuyongsky1234的博客
11-21 3000
与上一篇的“采用CSS3设计的登陆界面”的相同，只是样式style添加了CSS3的动画元素。 style内容如下： &lt;style&gt; html,body,div{ margin:0; padding:0; font-size:100%; } html{ //background:url('./6.jpg') no-repeat; ...
html显示隐藏密码,Web前端，登录密码显示隐藏眼睛
weixin_36004880的博客
06-03 980
htmlLogin//这里使用最原始的js语法实现，可对应换成jquery语法进行逻辑控制vardemoImg=document.getElementById("demo_img");vardemoInput=document.getElementById("demo_input");//隐藏textblock，显示passwordblockfunction...
超酷HTML5和CSS3实现的登录及其注册功能表单
cl09006511的博客
04-10 400
日期：2012-4-6来源：GBin1.com 在线演示 本地下载 过去我们开发登录和注册功能大都使用javascript来实现，今天我们介绍的这个登录及其注册表单不走常人路，使用纯CSS3和...
html输入密码自动隐藏,JS实现登录页密码的显示和隐藏功能
weixin_32842805的博客
06-02 687
在登录页经常会用到通过点击文本框的类似小眼睛图片来实现隐藏显示密码的功能，其实实现原理很简单，通过点击事件来改变input的type类型，具体过程看代码：在没给大家分享实现代码之前，先给大家展示下效果图： //获取input框内的切换图片id和input文本框的idvar demoImg = document.getElementById("showText");var demoInput =...
使用HTML+CSS+JS+MySQL+JDBC+Servlet等技术实现在html页面登录
最新发布
07-09
可以使用HTML、CSS、JavaScript、MySQL、JDBC和Servlet技术来实现在HTML页面上的登录功能。以下是一个简单的步骤指南： 1. 在HTML页面中创建一个登录表单，包含用户名和密码输入字段，并设置提交按钮。 ```html ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值