热门IT资讯网

请输入关键字词

热门搜索排行

最新搜索排行

导航： 首页 > 网络技术 >

运用HTML5+CSS3和CSS滤镜做的精美的登录界面，无用到图片的喔！

发表于：2024-11-26 作者：热门IT资讯网编辑
编辑最后更新 2024年11月26日，不少人为项目没有一个简洁和精美的登录页而烦恼，今天上班没多少事情做，在51cto里看了篇关于"使用HTML 5和CSS3制作登录页面完整步骤"的文章，我就动手做了一下，现在将代码贴出来，因为个人认为i

不少人为项目没有一个简洁和精美的登录页而烦恼，今天上班没多少事情做，在51cto里看了篇关于"使用HTML 5和CSS3制作登录页面完整步骤"的文章，我就动手做了一下，现在将代码贴出来，因为个人认为ie6在不久的将来必定被舍弃，所以这个登录页面的代码没有理会ie6里的情况。

代码如下：

  1. >
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  5. <meta http-equiv="description" content="运用CSS3和CSS滤镜做的精美的登录界面，无用到图片的喔！">
  6. <meta http-equiv="author" content="chenjinfei">
  7. <meta http-equiv="date" content="2012-2-6">
  8. <title>登录title>
  9. <link rel="stylesheet" href="style/common/common.css">
  10. <style type="text/css">
  11. body {
  12. margin:0;
  13. padding:0;
  14. background-color:#E4E8EC;
  15. }
  16. .wrap {
  17. margin:150px auto;
  18. width:380px;
  19. overflow:hidden;
  20. }
  21. .loginForm {
  22. box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.2), 0 3px 0 #fff, 0 4px 0 rgba(0, 0, 0, 0.2), 0 6px 0 #fff, 0 7px 0 rgba(0, 0, 0, 0.2);
  23. position:absolute;
  24. z-index:0;
  25. background-color:#FFF;
  26. border-radius:4px;
  27. height:250px;
  28. width:380px;
  29. background: -webkit-gradient(linear, left top, left 24, from(#EEE), color-stop(4%, #FFF), to(#EEE));
  30. background: -moz-linear-gradient(top, #EEE, #FFF 1px, #EEE 24px);
  31. background: -o-linear-gradient(top, #EEEEEE, #FFFFFF 1px, #EEEEEE 24px);
  32. }
  33. .loginForm:before {
  34. content:'';
  35. position:absolute;
  36. z-index:-1;
  37. border:1px dashed #CCC;
  38. top:5px;
  39. bottom:5px;
  40. left:5px;
  41. right:5px;
  42. box-shadow: 0 0 0 1px #FFF;
  43. }
  44. .loginForm h2 {
  45. text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5);
  46. text-transform:uppercase;
  47. text-align:center;
  48. color:#666;
  49. line-height:3em;
  50. margin:16px 0 20px 0;
  51. letter-spacing: 4px;
  52. font:normal 26px/1 Microsoft YaHei, sans-serif;
  53. }
  54. fieldset {
  55. border:none;
  56. padding:10px 10px 0;
  57. }
  58. fieldset input[type=text] {
  59. background:url(style/default/p_w_picpaths/user.png) 4px 5px no-repeat;
  60. }
  61. fieldset input[type=password] {
  62. background:url(style/default/p_w_picpaths/password.png) 4px 5px no-repeat;
  63. }
  64. fieldset input[type=text], fieldset input[type=password] {
  65. width:100%;
  66. line-height:2em;
  67. font-size:12px;
  68. height:24px;
  69. border:none;
  70. padding:3px 4px 3px 2.2em;
  71. width:300px;
  72. }
  73. fieldset input[type=submit] {
  74. text-align:center;
  75. padding:2px 20px;
  76. line-height:2em;
  77. border:1px solid #FF1500;
  78. border-radius:3px;
  79. background: -webkit-gradient(linear, left top, left 24, from(#FF6900), color-stop(0%, #FF9800), to(#FF6900));
  80. background: -moz-linear-gradient(top, #FF6900, #FF9800 0, #FF6900 24px);
  81. background:-o-linear-gradient(top, #FF6900, #FF9800 0, #FF6900 24px);
  82. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9800', endColorstr='#FF6900');
  83. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9800', endColorstr='#FF6900')";
  84. height:30px;
  85. cursor:pointer;
  86. letter-spacing: 4px;
  87. margin-left:10px;
  88. color:#FFF;
  89. font-weight:bold;
  90. }
  91. fieldset input[type=submit]:hover {
  92. background: -webkit-gradient(linear, left top, left 24, from(#FF9800), color-stop(0%, #FF6900), to(#FF9800));
  93. background: -moz-linear-gradient(top, #FF9800, #FF6900 0, #FF9800 24px);
  94. background:-o-linear-gradient(top, #FF6900, #FF6900 0, #FF9800 24px);
  95. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF6900', endColorstr='#FF9800');
  96. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF6900', endColorstr='#FF9800')";
  97. }
  98. .inputWrap {
  99. background: -webkit-gradient(linear, left top, left 24, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
  100. background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 24px);
  101. background: -o-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 24px);
  102. border-radius:3px;
  103. border:1px solid #CCC;
  104. margin:10px 10px 0;
  105. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEEE', endColorstr='#FFFFFF');
  106. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEEE', endColorstr='#FFFFFF')";
  107. }
  108. fieldset input[type=checkbox] {
  109. margin-left:10px;
  110. vertical-align:middle;
  111. }
  112. fieldset a {
  113. color:blue;
  114. font-size:12px;
  115. margin:6px 0 0 10px;
  116. text-decoration:none;
  117. }
  118. fieldset a:hover {
  119. text-decoration:underline;
  120. }
  121. fieldset span {
  122. font-size:12px;
  123. }
  124. style>
0