html5教程-运用HTML5+CSS3和CSS滤镜做的精美的登录界面，无用到图片的
脚本宝典收集整理的这篇文章主要介绍了html5教程-运用HTML5+CSS3和CSS滤镜做的精美的登录界面，无用到图片的，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
不少人为项目没有一个简洁和精美的登录页而烦恼，今天上班没多少事情做，在51cto里看了篇关于“使用HTML 5和CSS3制作登录页面完整步骤”的文章，我就动手做了一下，现在将代码贴出来，因为个人认为ie6在不久的将来必定被舍弃，所以这个登录页面的代码没有理会ie6里的情况。
代码如下：
1. <!DOCTYPE HTML>
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 h1 {
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/images/user.png) 4px 5px no-repeat;
60. }
61. fieldset input[type=password] {
62. background:url(style/default/images/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>
125.<!--为了让IE支持HTML5元素，做如下操作：-->
126.<!--[if IE]>
127.<script type="text/javascript">
128.document.createElement("section");
129.document.createElement("header");
130.document.createElement("footer");
131.</script>
132.<![endif]-->
133.</head>
134.
135.<body>
136.<p class="wrap">
137. <form action="#" method="post">
138. <section class="loginForm">
139. <header>
140. <h1>登录</h1>
141. </header>
142. <p class="loginForm_content">
143. <fieldset>
144. <p class="inputWrap">
145. <input type="text" name="userName" placeholder="邮箱/会员帐号/手机号" autofocus required>
146. </p>
147. <p class="inputWrap">
148. <input type="password" name="password" placeholder="请输入密码" required>
149. </p>
150. </fieldset>
151. <fieldset>
152. <input type="checkbox" checked="checked">
153. <span>下次自动登录</span>
154. </fieldset>
155. <fieldset>
156. <input type="submit" value="登录">
157. <a href="#">忘记密码？</a> <a href="#">注册</a>
158. </fieldset>
159. </p>
160. </section>
161. </form>
162.</p>
163.</body>
164.</html>
当然啦，有图会直观不少：
本文出自 “html5+css3” 博客
不少人为项目没有一个简洁和精美的登录页而烦恼，今天上班没多少事情做，在51cto里看了篇关于“使用HTML 5和CSS3制作登录页面完整步骤”的文章，我就动手做了一下，现在将代码贴出来，因为个人认为ie6在不久的将来必定被舍弃，所以这个登录页面的代码没有理会ie6里的情况。
代码如下：
1. <!DOCTYPE HTML>
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 h1 {
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/images/user.png) 4px 5px no-repeat;
60. }
61. fieldset input[type=password] {
62. background:url(style/default/images/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>
125.<!--为了让IE支持HTML5元素，做如下操作：-->
126.<!--[if IE]>
127.<script type="text/javascript">
128.document.createElement("section");
129.document.createElement("header");
130.document.createElement("footer");
131.</script>
132.<![endif]-->
133.</head>
134.
135.<body>
136.<p class="wrap">
137. <form action="#" method="post">
138. <section class="loginForm">
139. <header>
140. <h1>登录</h1>
141. </header>
142. <p class="loginForm_content">
143. <fieldset>
144. <p class="inputWrap">
145. <input type="text" name="userName" placeholder="邮箱/会员帐号/手机号" autofocus required>
146. </p>
147. <p class="inputWrap">
148. <input type="password" name="password" placeholder="请输入密码" required>
149. </p>
150. </fieldset>
151. <fieldset>
152. <input type="checkbox" checked="checked">
153. <span>下次自动登录</span>
154. </fieldset>
155. <fieldset>
156. <input type="submit" value="登录">
157. <a href="#">忘记密码？</a> <a href="#">注册</a>
158. </fieldset>
159. </p>
160. </section>
161. </form>
162.</p>
163.</body>
164.</html>
当然啦，有图会直观不少：
本文出自 “html5+css3” 博客
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
脚本宝典总结
以上是脚本宝典为你收集整理的html5教程-运用HTML5+CSS3和CSS滤镜做的精美的登录界面，无用到图片的全部内容，希望文章能够帮你解决html5教程-运用HTML5+CSS3和CSS滤镜做的精美的登录界面，无用到图片的所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
- 关于移动端h5开发相关内容总结 2022-05-17
- html5教程-学表单的第二天 2018-12-10
- html5教程-HTML5浏览器支持 2018-12-10
- html5教程-HTML5智能表单 2018-12-10
- html5教程-微信H5使用resLoader实现加载页效果 2018-12-10
- html5教程-day01-初级-JS0-热身运动、JS入门教程 2018-12-10
- html5教程-html5shiv.js和respond.min.js 2018-12-10
- html5教程-不同浏览器对于html5 audio标签和音频格式的兼容性 2018-12-10
- html5教程-使用Html5实现手风琴案例 2018-12-10
- html5教程-html5笔记 2018-12-10