Tips and experience sharing for front-end graph + page layout

Now in the school, there are many courses inside the training organization is the front-end cut graph this aspect, simply is to learn div+css page layout. A lot of people after this round of study found that they are very familiar with the layout of this aspect or even say their own div+css master. Actually said to understand a page layout need to pay attention to some of the problems is? Is it really a successful webpage to see the pages that you have typeset on your computer? Here are some things I'll notice about myself in the Web page layout:

I. Specification of types and names of styles used

How ID and class should be used

When we use div+css typesetting, each div we will give him a style, and there are two types of style is ID one is class. Sometimes the CSS style control of a page can be implemented regardless of which one we use as a symbol. But why are there two types of IDs and class?

In fact, in a Web page we can do a metaphor: body we can think of as a school, id we can think of as a class, class we can think of as a person. In the same school, the class cannot be duplicated and each of us may have the same name. So in a Web page, an ID can only appear once, a class can appear multiple times. The permissions of the ID are higher than the permissions of class, so we can use the ID of some div that does not need to be duplicated to represent some reusable styles using class. For example a webpage has only one head, middle, and bottom. So these three parts we can use ID. Some of the middle section of the blog is divided into about, these sections in our Web page is generally not necessary to repeat, so we use the ID to define for him, and each plate inside the content can sometimes be reused, so we use class to define him.

Sometimes people ask, if we all use one alone can also realize the function, why do we not simply use ID and class? This is because if all the use of ID, our web page JS and PHP function calls are used to the ID, if we in the CSS style occupies the programmer will be very troublesome, if all use of class may be due to insufficient permissions in the same layer of the unmarked elements such as UL, Li,a and so on will receive the outer layer of the style that affects this resulting in much more write-more code.

How should ID and class be named?

This name can be named as you like, so some people use English, pinyin or a few dozen letters. Although it is possible to say this, but will cause themselves and others in the late modification of the site is very troublesome, because to find a label is also dizzy. I personally name it as a hierarchy, and here's an example:

For example, head I used the name head, and then the head can be divided into the storage logo and the navigation bar two parts. These two parts I will use Head_1, head_2 to express, and then in the storage of the logo can be divided into the left and right side of the logo is advertising or search bar, I will be named: Head_1_left, Head_1_right to express. CSS code like this sometimes we do not need to flip to the HTML page to see, directly according to the name of the style can be seen.

Second, the rational use of labels to help the site collection and SEO optimization

We cite an example, sometimes a news content section of the HTML inside, many people will be directly in the div in the middle of writing text, and then give this a div style control:<div> news content </div>. Although this is completely possible to implement the function, but in the eyes of the search engine does not think that this is a body content but code and so on, so we write this time remember the rational use of P tags, such as the above news content should be written as:<div><p> news content </p ></div>. In our reasonable use of the label on the one hand can make people feel that you are the intention to do this page layout, more importantly, so that the site of the optimization of the latter. Here is a summary of their feelings to add the label:

H1: The theme of a Web page can only appear in one page. Weight second only to the site title, so try to simply put their own site's main keywords in the inside. If the keyword package is in a sentence like the title of this article, we can write it as follows:

<p> say Pengjian yourself to </p>

Some things to be aware of when <p> is </p>.

H2-H3: In the Web page is generally used to H3 is enough, the H4-h6 in the back is generally no longer used. These two labels we need reasonable arrangement, H2 represents a page inside the column, H3 represents in this column inside the sub-column or article.

P:p tag is a paragraph tag, we can also say that he is a content tag. The real content is in this tag.

ALT: The search engine is not looking at the picture, we have to explain to him what this picture represents, so we pay attention to each picture for him to explain.

Title: This tag is used in a tag, which is rarely used by people. But we have to take into account the search engine optimization so we have to pay attention to a simple and accurate description of the search engine, for example, said an article titled "Say Pengjian Oneself on the site to pay attention to some of the things." Then our code should be written in

<a title= "page layout Notes" href= "> Say Pengjian yourself on the site to pay attention to some things </a>.

Write down the meaning of the title in the most precise and concise way possible.

Nane: This tag believes that few people will notice. This name tag can be said to be directly with the search engine to talk to the label. He is also used in a, he is to tell the search engine, into the hyperlink inside what is something. As the title above we can write:

<a name= "Page layout Considerations" title= "Page layout considerations" href= "" > Say Pengjian yourself on the site to pay attention to some things </a>.

Strong: This is an important label, and this looks like the B tag. Many do SEO and do not understand the code of the people they know each article to the important keywords bold, but they always think this bold is a B tag. In fact, this bold is strong label. We can help us to add the key words of the page tag, and then in the CSS set him up with ordinary words, in the normal browsing time does not have any impact, but in fact, he has been optimized.

Third, the level of code and planning to make your code look more comfortable

When I Pengjian myself to write code, it is very important to pay attention to this aspect of things, because a page to make can give the customer to see comfortable also can give oneself to see comfortable. I prefer to use the same sibling wrapping, the method of sub-line backspace. For example, the head of a webpage can be divided into the upper part and the Navigation bar section, then the upper part is divided into left. We can and easily see that the upper and lower parts of the two div are siblings, and the left and right div is subordinate, the code is as follows:

<div class= "Head_1" >

<div class= "Head_1_left" ></div>

<div class= "Head_1_right" ></div>

</div>

<div class= "Head_2" ></div>

As for planning This is the CSS code placed in the CSS file, JS code inside the JS code, and not practical embedded and bundled writing methods.

Four, the layout of the time to pay attention to the background of the call

When we're laying out a page, we use countless styles, one for each div or Li style, and the effect looks the same, but is this the code of success? We know that the page is not so put on the site to run, but the page into a template to join the background call tag to call. For example an article List (UL) inside of a very multiple article topic (LI). We know that every article title is called from behind the scenes, so these li is needed to recycle, if we each Li have a different class, believe that this loop call is to make the programmer very headache. So when we do this we try to use a uniform style. If each item of the navigation bar is separated by a vertical line, we usually put the vertical line to the left of each Li, and then give the first homepage Li plus a style to remove the vertical line, because this will allow the subsequent columns to be called in the background. and the home page is every site needs, so this makes static also does not matter.

And our page above the picture also has two kinds, one is the style picture one is the data picture. Style picture refers to not need to change such as the navigation bar background (we usually can not be saved on the browser) he is stored in the CSS, the data picture can be changed at any time, he is called from the background, such as the product thumbnail (we usually save on the browser). When we write code, we should clearly distinguish which of these images belong to, so that we can more professionally put a page layout out. And about the logo some people like to put in CSS inside some people like to put in HTML, this is based on their own needs.

Five, Web page image size

We do a Web page sometimes different people do the same size, but how do we need to solve it? For example, a page navigation bar, if it is a spring navigation bar, we have 3 ways of typesetting.

1, the design diagram on a whole piece of navigation bar cut down to do the background.

2. Cut one pixel to tile.

3, use the color directly to do the background.

These three practices have the same effect, but the most economical place is the third. So we can understand that the best way to make a Web page is to make it work and minimize it. So we have to pay attention to: can use the color of color, can not use the color of the tiled tile, and finally consider using the picture.

Sometimes a picture is not used in a single place but in more than one place, so we have to notice that the picture is applied to multiple places rather than every place. In the end we should also notice in the transduction, not a picture large cut down can, we have to cut to the edge of precision, as far as possible to reduce the size of the picture to a minimum.

PostScript language

Some of the above summary is the author himself in the layout of the page in a step-by-step summary. When we go to work as a web front-end engineer, you simply know the code is possible, but when we want to do a web-site operation of the Web front-end engineers, we must also take into account the programmer to see how you feel and the site of the search engine optimization. Hope you read this piece of article can reply one or two words to Pengjian a support oh, write so long article is not easy. Want to learn more about the experience I have gained in website operations?

Tips and experience sharing for front-end graph + page layout