Front-end Demo: A picture of a page layout

For the front-end programmer, from the designer's hands to take the design and material after the transduction is necessary for the basic skills, but the general programmer may be not so familiar with transduction, so there may be a lot of time spent on Photoshop, then there is a way to reduce a lot of work on the cut graph, That is--use a picture to fix the page layout for the entire page. Of course, more than just saving some of the cost of cutting graphs is also a very effective front-end development method, especially for those who design fancy, the use of HTML and CSS to restore the more difficult, and actually do not have so many operational elements of the design.

In fact, it's a simple sentence-use an empty HTML element to select the image element you want to manipulate.

Just to give an example. Commonly used in the app or page, often there will be login page, similar to the following page:

The entire page only one or two of the components need to operate, such as buttons, input boxes, and other elements of the picture just as a static display of the design, then specifically put this several elements out and then write into the page is obviously a little complicated, There may also be issues such as overlapping of the relative positions of elements and elements, or too large spacing. You can then use an empty div tag to frame the input and button areas in the above image, then add input or button elements to the empty Div, and of course keep the styles consistent with the design.

So in the example, the main code of the page I'm giving is this:

HTML code:

<Divclass= "Container">    <Divclass= "BTN">        <inputID= "Tel"type= "text"placeholder="">    </Div></Div>

CSS code:

 .container  { position :  absolute ;  background : url (" imgs/1.jpg ") ;  Background-size :  100% 100% ;     Background-repeat :  no-repeat ; }.btn  { position :  absolute ;  Margin-top :  40% ;  Margin-left : 20%; 
 width:55%;    
 height:20%;  Display:none ; }

Because here is an empty div to select the Input or button area of the image, so in order to maintain the original image style, you need to put the actual input or button of the area display set to none. Of course, to use JavaScript settings, when the input and button areas get focus, the input and button are displayed. The Onfocus property of the inline input can be written directly:

Onfocus= "this.style.display= ' block '"

Of course, the above two pictures are relatively simple design of the picture, if it is more complex pictures?

　　

In fact, the operation method is the same, as long as the attention to adjust the empty div position and width of the picture with the design of the match.

One might ask, why use percentages as a measure of the size of a position and a wide height? This is, of course, a responsive design. If you use pixels, then you can only apply to a screen aspect ratio and resolution, using a percentage of the more kinds of screen features will still remain with the design of high degree of reduction.

These are the onfocus attributes that use HTML elements, but you can also use jquery, which is the following code:

$ ("Input#tel"). Focus (function() {  $ ("Input#tel"). CSS ("Display", "block");});

Front-end Demo: A picture of a page layout