Accumulate Kuibu, gather small stream-------a knowledge point in a login

A few days ago a whim, did a login interface, found that although it is a simple login, accommodating the knowledge point is quite a lot of it.

First look at the simple effect:

Let's just say, what are the points of knowledge that have been designed?

First: center ; Here I use the absolute position of the negative distance to achieve the center, that is, position is absolute, and left and top are all 50%, Whereas Margin-left and margin-top are both width and height, the inverse of the value of half

#back_login {width:400px;height:500px;background-color: #ffffff;p osition:absolute;top:50%;left:50%;margin-top:- 250px;margin-left: -200px;border:1px solid #0088cc; border-radius:20px; -webkit-border-radius:20px;-moz-border-radius:20px;}

This is more often used in the method, but there is a problem, that is, your width and height is the best fixed length and distance, if it is unknown, it is necessary to use JS to calculate, if only for the center of the words are some do not come, and then we come back to recall what other methods?

There are two ways to do something similar <center></center> This method presumably everyone is not unfamiliar, and it to some extent and Text-align:center is somewhat similar, It centers all the elements inside it, and if there are more internal elements then it needs to be set to one by one.

In fact, in the beginning, I often use, that is, I initially began to center the time commonly used method : Margin:o auto; Unfortunately, for a long time, I was unable to use it until the end to find out why, in the auto-generated JSP always

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >

and if you modify this declaration to:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

and can be perfect to achieve the center effect, the biggest advantage is that you can, the external elements width:100%, and the internal elements set a fixed width to center Ah, that is the effect AH

Of course, in addition to horizontal centering and vertical centering, I usually use line-height and padding to achieve vertical centering of text and block-level elements, respectively.

Then, is the fillet problem ;

If said CSS3 can be compatible, that will undoubtedly be the Gospel of the program apes, but the fact is often cruel, but also let the fillet into a problem, and memory of my way to achieve the round angle is also strange, remember the original is used is a picture , after the effect of their own beautiful for a long time, Now think of some shame, and then learned to Border-radius, also began to face CSS3 compatibility problem, remember the original personal solution is

<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1" >

forcing use of the latest IE kernel, that is, the appearance is still ie, and if the corresponding plugin (Google Chrome Frame) is installed for a browser below IE8, then the kernel has been changed to Chrome, but there are some limitations, and in the previous conversation with a friend, learned that a good compatibility method ( PIE. JS), after the trial feel really good, for CSS3 part of the effect is still effective.

Again, is the placeholder and split line effect, in the previous blog has been introduced, here is not much to say. Just to introduce a few details.

#loginName {background:url (img/login_id.png) 96% 3px no-repeat;}

Picture address, left distance, top distance, repetition or not, this is one more thing:

Onmouseover=this.focus (); This.select ();

These two points are usually continuous, when the mouse across, get input focus, and select all the input content, this is the place to be aware, if it is more important, it should be:

var Primaryvalue=document.getelementbyid (param). DefaultValue;

DefaultValue Propertyis a very convenient DOM property, the application is more frequent, but also should be more memory.

Temporarily think of the words are these, first memory, recently need to write the year-end summary, found that the job this year to actually go to school really many Ah, plus the weekdays of their own study, busy is busy point, finally is not let their time in vain, in the mind more is gratified, quite happy ...

Accumulate Kuibu, gather small stream-------a knowledge point in a login