登录界面模板代码(转) 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7     <title></title>
  8     <style type="text/css" media="screen">
  9 
 10 @media screen and (max-width: 768px) {
 11     html {
 12         font-size: 30px!important;
 13     }
 14 }
 15 
 16 @media screen and (max-width: 420px) {
 17     html {
 18         font-size: 19px!important;
 19     }
 20 }
 21 
 22 @media screen and (max-width: 400px) {
 23     html {
 24         font-size: 18px!important;
 25     }
 26 }
 27 
 28 @media screen and (max-width: 320px) {
 29     html {
 30         font-size: 15px!important;
 31     }
 32 }
 33 
 34 body {
 35     padding: 0px;
 36     margin: 0px;
 37 }
 38 
 39 ul,
 40 li,
 41 a {
 42     padding: 0px;
 43     margin: 0px;
 44     list-style: none;
 45 }
 46 
 47 body {
 48     background-color: #fdfdfd !important;
 49     font-family: -apple-system, ".SFNSText-Regular", "Helvetica Neue", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft Yahei", sans-serif;
 50 }
 51 
 52 .sign {
 53     max-width: 20rem;
 54     min-width: 15rem;
 55     margin: 2.4rem auto;
 56     color: #333;
 57 }
 58 
 59 .sign .section {
 60     background-color: #fff;
 61     border: 1px solid #ececec;
 62     border-radius: 2px;
 63     padding: 2rem 2.5rem;
 64 }
 65 
 66 .sign .section.form {
 67     width: 100%;
 68     height: 15rem;
 69 }
 70 
 71 .form-item {
 72     position: relative;
 73     width: 100%;
 74     height: auto;
 75     margin-bottom: 1.5rem;
 76     border-bottom: 1px solid #ececec;
 77 }
 78 
 79 .form-item:first-child {
 80     margin-bottom: 1rem;
 81 }
 82 
 83 .form-item:last-child {
 84     border: none;
 85 }
 86 
 87 .form-item input {
 88     margin: 0.5rem 0.4rem;
 89     font-size: 0.73rem;
 90     border: none;
 91     outline: none;
 92     box-shadow: none;
 93     -webkit-box-shadow: none;
 94     width: calc(100% - 70px);
 95 }
 96 
 97 .form-item .bot-bar {
 98     position: relative;
 99     height: 1px;
100     width: 100%;
101 }
102 
103 .bot-bar:before {
104     position: absolute;
105     bottom: -1px;
106     left: 50%;
107     content: "";
108     height: 1px;
109     width: 0px;
110     background-color: #1B76C5;
111     box-shadow: 1px 1px 3px rgba(255, 255, 255, 0.3);
112     transition: width ease-in-out .35s;
113     -moz-transition: width ease-in-out .35s;
114     -o-transition: width ease-in-out .35s;
115     -webkit-transition: width ease-in-out .35s;
116 }
117 
118 .bot-bar:after {
119     position: absolute;
120     bottom: -1px;
121     right: 50%;
122     content: "";
123     height: 1px;
124     width: 0px;
125     background-color: #1B76C5;
126     transition: width ease-in-out .35s;
127     -moz-transition: width ease-in-out .35s;
128     -o-transition: width ease-in-out .35s;
129     -webkit-transition: width ease-in-out .35s;
130 }
131 
132 .form-item h2 {
133     text-align: center;
134     color: #5474db;
135 }
136 
137 .form-item input:focus~.bot-bar:before {
138     width: 50%;
139 }
140 
141 .form-item input:focus~.bot-bar:after {
142     width: 50%;
143 }
144 
145 .form-item .icon {
146     margin: 0.5rem 0.5rem;
147     color: #5474db;
148 }
149 
150 .form-item .info {
151     color: red;
152     position: absolute;
153     right: 0px;
154     font-size: 0.71rem;
155 }
156 
157 .form-submit {
158     position: relative;
159     text-align: center;
160     background-color: #617fde;
161     border-radius: 5px;
162     overflow: hidden;
163     padding: 0.3rem;
164     color: aliceblue;
165     letter-spacing: 0.1rem;
166     cursor: pointer;
167     line-height: 1.6rem;
168     font-size: 0.7rem;
169     height: 1.6rem;
170     transition: all ease-in-out .35s;
171     -moz-transition: all ease-in-out .35s;
172     -o-transition: all ease-in-out .35s;
173     -webkit-transition: all ease-in-out .35s;
174 }
175 
176 .form-submit:hover {
177     font-size: 0.9rem;
178     background-color: #5474db;
179 }
180 
181 .icon-mobile-phone:before {
182     font-size: 2rem;
183 }
184 
185 .icon-user-md:before {
186     font-size: 1.2rem;
187 }
188 
189 .form-submit:before {
190     font-size: 0.9rem;
191     position: absolute;
192     top: 0px;
193     left: 0px;
194     content: attr(data-txt);
195     background-color: #617fde;
196     width: 100%;
197     line-height: 2.2rem;
198     letter-spacing: 0.1rem;
199     overflow: hidden;
200     text-align: center;
201     height: 1.1rem;
202     transition: top ease-in-out .35s;
203     -moz-transition: top ease-in-out .35s;
204     -o-transition: top ease-in-out .35s;
205     -webkit-transition: top ease-in-out .35s;
206 }
207 
208 .form-submit:hover:before {
209     top: -1.1rem;
210 }
211 
212 .form-submit:after {
213     font-size: 0.9rem;
214     position: absolute;
215     bottom: 0px;
216     left: 0px;
217     content: attr(data-txt);
218     background-color: #617fde;
219     width: 100%;
220     line-height: 1px;
221     letter-spacing: 0.1rem;
222     overflow: hidden;
223     text-align: center;
224     height: 1.1rem;
225     transition: bottom ease-in-out .35s;
226     -moz-transition: bottom ease-in-out .35s;
227     -o-transition: bottom ease-in-out .35s;
228     -webkit-transition: bottom ease-in-out .35s;
229 }
230 
231 .form-submit:hover:after {
232     bottom: -1.1rem;
233 }
234 </style>
235 </head>
236 
237 <body>
238     <div class="sign">
239         <div class="section">
240             <form id="form">
241                 <div class="form-item">
242                     <h2>登录主题</h2>
243                 </div>
244                 <div class="form-item"><i class="icon-user-md icon"></i>
245                     <input v-model="user.name" v-on:click="input_focus()" type="text" class="form-input" name="name" placeholder="用户姓名">
246                     <div class="bot-bar"></div>
247                    
248                 </div>
249                 <div class="form-item"><i class="icon-mobile-phone icon"></i>
250                     <input v-model="user.phone" v-on:click="input_focus()" type="text" class="form-input" name="phone" placeholder="电话号码">
251                     <div class="bot-bar"></div>
252     
253                 </div>
254                 <div class="form-item"><i class="icon-envelope icon"></i>
255                     <input v-model="user.email" v-on:click="input_focus()" type="text" class="form-input" name="email" placeholder="电子邮箱">
256                     <div class="bot-bar"></div>
257     
258                 </div>
259                 <div class="form-item">
260                     <div v-on:click="m_submit(user)" class="form-submit" data-txt="Login"> Login </div>
261                 </div>
262             </form>
263         </div>
264     </div>
265 </body>
266 
267 </html>

 

posted on 2016-07-08 16:09  jasonduanmu  阅读(378)  评论(0)  编辑  收藏  举报

导航