A knowledge point in a login

Source: Internet
Author: User

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

[CSS]View Plaincopyprint?
  1. #back_login {
  2. width: 400px;
  3. height: 500px;
  4. Background-color: #ffffff;
  5. position: absolute;
  6. Top: 50%;
  7. Left: 50%;
  8. margin-top: -250px;
  9. margin-left: -200px;
  10. border: 1px solid #0088cc;
  11. Border-radius:20px;
  12. -webkit-border-radius:20px;
  13. -moz-border-radius:20px;
  14. }

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

[HTML]View Plaincopyprint?
    1. <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en">

And if you modify this declaration to:

[HTML]View Plaincopyprint?
    1. <! 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

[HTML]View Plaincopyprint?
    1. <Meta http-equiv= "x-ua-compatible" content="ie=edge,chrome=1">

forcing the use of the latest IE kernel , that is, the appearance is still ie, and if the corresponding plug-in (Google Chrome Frame) is installed for the browser below IE8, then the kernel has been changed to Chrome, of course, there are some limitations, And in the previous conversation with a friend, learned that a good compatibility (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.

[CSS]View Plaincopyprint?
    1. #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:

[JavaScript]View Plaincopyprint?
    1. 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:

[JavaScript]View Plaincopyprint?
    1. var Primaryvalue=document.getelementbyid (param). DefaultValue;

The DefaultValue property is a very handy dom attribute, and it should be used more frequently, as well as 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 ...


A knowledge point in a login (go)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.