[ 登录注册 ]

HTML5

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

2016/08/17 14:09 [db:作者] 返回上一页

不少人为项目没有一个简洁和精美的登录页而烦恼,今天上班没多少事情做,在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.<div class="wrap">
137.  <form action="#" method="post">
138.    <section class="loginForm">
139.      <header>
140.        <h1>登录</h1>
141.      </header>
142.      <div class="loginForm_content">
143.        <fieldset>
144.          <div class="inputWrap">
145.            <input type="text" name="userName" placeholder="邮箱/会员帐号/手机号" autofocus required>
146.          </div>
147.          <div class="inputWrap">
148.            <input type="password" name="password" placeholder="请输入密码" required>
149.          </div>
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.      </div>
160.    </section>
161.  </form>
162.</div>
163.</body>
164.</html>
当然啦,有图会直观不少:


 
本文出自 “html5+css3” 博客
  
点击复制链接 与好友分享!回本站首页

文章来源:http://www.bozhiyue.com/html5/2016/0817/377691.html
评论
发表评论