Sprite Chart Application

Recently studied the use of Sprite chart, sprite Chart of the benefits of this piece is not much to say, only say the application part.

The use of Sprite is dependent on the Background-position property, the value of the value of the x, Y axis, respectively, the display size of the picture is determined by the container, the simple point is that the size of the image is to carry the picture is how big the display interval is how big, The starting point is the coordinate of the Background-position property value.

Material taken from MU-course Network Sprite Chart Course http://www.imooc.com/code/1992

 
  
  <title>Untitled Document</title>                            Next Automatic loginForgot your password?                    

Several minor problems encountered during the writing process:

Clear a label style

Use Text-decoration:none. Other properties overline--underline, underline--default underline, line-through--through line

Change the style of placeholder

Because of the compatibility problems of different browsers, here are the main settings webkit kernel browser, firefox browser, IE browser three, Pseudo-class is as follows:

::-moz-placeholder{color:red;}              Ff19+:-moz-placeholder{color:red}//ff18-::-webkit-input-placeholder{color:red;}     chrome,safari:-ms-input-placeholder{color:red;}          Ie10

check boxes and text are not aligned with the resolution:

This problem sets the default margin and padding cannot be removed, you can use the Vertical-align:middle property for both check boxes and text, such as the code in this article:

. content. Text input,.content. Text label,.content. Text a{vertical-align:middle;height:20px;line-height:20px;}

Remove the light blue border when the input box gets focus

Set the input property Outline:none

