注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天边云E家 shaoruisky

IT博文共享,知识的海洋

 
 
 

日志

 
 

使用HTML 5和CSS3制作登录页面完整步骤  

2014-08-15 10:11:51|  分类: php |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

本文详细介绍使用HTML 5 和CSS3 制作一个登录页面的完整过程。

View demo

login.html

  1. <form id="login"> 
  2.     <h1>Log In</h1> 
  3.     <fieldset id="inputs"> 
  4.         <input id="username" type="text" placeholder="Username" autofocus required> 
  5.         <input id="password" type="password" placeholder="Password" required> 
  6.     </fieldset> 
  7.     <fieldset id="actions"> 
  8.         <input type="submit" id="submit" value="Log in"> 
  9.         <a href="">Forgot your password?</a><a href="">Register</a> 
  10.     </fieldset> 
  11. </form> 

所用到的HTML 5的特性:

◆ placeholder – 输入框的简短提示,当该输入框获得输入焦点时,该提示信息自动消失

◆ required – 指定该输入元素是否必须提供

◆ autofocus – 指定输入框是否在页面加载完毕自动获取输入焦点

◆ type=”password” – 指定密码输入(非HTML5专有)

CSS

在这里我们用到了 CSS3 的一些专有属性,包括:

Box-shadow 可以帮我们制作效果很好的边框阴影

  1. #login  
  2. {  
  3.     box-shadow:  
  4.           0 0 2px rgba(0, 0, 0, 0.2),  
  5.           0 1px 1px rgba(0, 0, 0, .2),  
  6.           0 3px 0 #fff,  
  7.           0 4px 0 rgba(0, 0, 0, .2),  
  8.           0 6px 0 #fff,  
  9.           0 7px 0 rgba(0, 0, 0, .2);  

Stitch effect (缝效果)

  1. #login  
  2. {  
  3.     position: absolute;  
  4.     z-index: 0;  
  5. }  
  6.  
  7. #login:before  
  8. {  
  9.     content: '';  
  10.     position: absolute;  
  11.     z-index: -1;  
  12.     border: 1px dashed #ccc;  
  13.     top: 5px;  
  14.     bottom: 5px;  
  15.     left: 5px;  
  16.     right: 5px;  
  17.     -moz-box-shadow: 0 0 0 1px #fff;  
  18.     -webkit-box-shadow: 0 0 0 1px #fff;  
  19.     box-shadow: 0 0 0 1px #fff;  

Subtle gradient lines (微妙的渐变线)

  1. h1  
  2. {  
  3.     text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5);  
  4.     text-transform: uppercase;  
  5.     text-align: center;  
  6.     color: #666;  
  7.     margin: 0 0 30px 0;  
  8.     letter-spacing: 4px;  
  9.     font: normal 26px/1 Verdana, Helvetica;  
  10.     position: relative;  
  11. }  
  12.  
  13. h1:after, h1:before  
  14. {  
  15.     background-color: #777;  
  16.     content: "";  
  17.     height: 1px;  
  18.     position: absolute;  
  19.     top: 15px;  
  20.     width: 120px;  
  21. }  
  22.  
  23. h1:after  
  24. {  
  25.     background-image: -webkit-gradient(linear, left top, right top, from(#777), to(#fff));  
  26.     background-image: -webkit-linear-gradient(left, #777, #fff);  
  27.     background-image: -moz-linear-gradient(left, #777, #fff);  
  28.     background-image: -ms-linear-gradient(left, #777, #fff);  
  29.     background-image: -o-linear-gradient(left, #777, #fff);  
  30.     background-image: linear-gradient(left, #777, #fff);  
  31.     right: 0;  
  32. }  
  33.  
  34. h1:before  
  35. {  
  36.     background-image: -webkit-gradient(linear, right top, left top, from(#777), to(#fff));  
  37.     background-image: -webkit-linear-gradient(right, #777, #fff);  
  38.     background-image: -moz-linear-gradient(right, #777, #fff);  
  39.     background-image: -ms-linear-gradient(right, #777, #fff);  
  40.     background-image: -o-linear-gradient(right, #777, #fff);  
  41.     background-image: linear-gradient(right, #777, #fff);  
  42.     left: 0;  

最终结果

View demo

结论

在一些老的浏览器上也表现不错,下图是在IE8下的效果:

  评论这张
 
阅读(187)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016