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

代码如下：

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