Web page layout for designer's front-end little knowledge

Reading notes:

Tools are not important, tools are not important, tools are not important ... OK? Some people say DW has been eliminated, I made Ah, and then? I also intend to use a little Red Book (editplus), haha ...

The hope is that they accept my gradual process. You'll know that "multiplication" and "set unknowns" come faster, but you also have to transition from simple addition and subtraction. If you have questions please leave a message or DMS, the next chapter will focus on.

All content is based on your own understanding and coding habits and is not standard.

All right, get to the point. Before typesetting, do some preparation work first.

　　First, embedded, inline style

　　1. CSS Embedding

Actually, programmers are a bunch of lazy guys. ^_^ in the code word process, if you encounter a common section of code, you will find a way to pack up, the need for a line of code or a few lines of code can be called to use without repetition, the department is not very witty. Does that remind me of the same principles that we use for PS?

Come on, row a few width high 100px div Try, if you can not write dictation now, the proposal to practice several times.

As shown above: The code is as follows

(My DW is out of date and I have a temporary change.) Well, that's not much of a difference, is it? This is a former colleague introduced Webstorm, now he does not know what to change. -_- ... We continue to use DW knock it, I will always use back to the DW, the head of those things do not want to be the same as mine and change the ha. )

A style like this directly placed in the style inside a DIV tag is called an inline style. Serves only the label that it embeds, but does not affect the style of the other tags.

However, each div to write spicy long, obviously some attributes are the same, but also to write a good annoying ah ... So the next step is to introduce a simple writing.

　　2. Inline style

　　The first step: "Polynomials"

Do you remember the following? Although I read less, but I still remember, haha ... The principle of extracting polynomials is to extract the polynomials B shared by A and C ... The result is the same.

The same method is extracted from the sentence shared in the style in the preceding code: width:100px; height:100px; Float:left; Different styles are retained.

Then the last style is only the color of the value, is not very short? And most of the time without each div is attached to the color, we today just take the color of the rectangle to simulate, so the real application of the only remaining color that will be deleted.

But where does the public style of extraction come from?

Introduction of a Term: class (This is also very important OH)

class literal translation is a class, class, type, etc., that is, the same thing is grouped together; we put the extracted public style into class, create a new style box (tag) in the header (the head tag), and load the box as follows:

Note: 1 Its writing unchanged, is still "attribute name: attribute value;", but the outer packaging from style: "" Replaced by class{}; Since the class is out of the box can not be installed, so the HTML appears in the special style of the label box.

2 Note: There is also a small point in front of class "." This point is the unique identifier of class, and the browser reads ". ClassName" before it knows it is a class name. Otherwise you are just a word, then read it is a few parentheses, words, browser on the Meng, said the point? How not to play the cards.

The first class name can be arbitrary, you write. A,. b,. Apple, xiaoming1 ... All right, lowercase on the line, but can not be Chinese and start with a number, but also try not to be the same as the label name. We'll talk about naming this piece later.

　　Step Two: Quote

The public style has come up, and the box has been installed, but they have not hooked up with each other, which requires a reference in the div to write a good class:

All the div you want to use can refer to that class, and the way it is referenced is after the start tag: class= "ClassName" (there is no need to have "." , but be careful not to write wrong OH). Save Refresh:

Does it have the same effect as the previous one? Like the style in the head style tag that can be referenced by another tag through the class name, called an inline style.

Its scope is larger, but also limited to the current HTML file, as long as the reference will be able to reference the label style can have an impact on reusable. The conventional practice sometimes adds a phrase "type=text/css" namely:, but I generally will omit, discover also what influence of wood, add should be the comparison norm.

The class attribute cannot be used in the following HTML elements: base, head, HTML, Meta, param, S cript, style, and title.

Small exercise:

Write two classes of different content, and refer to two or more div, respectively.

Write here to find the style is really a lot to say Ah, the next chapter is devoted to it, today first speak a little ...

　　Second, the use of rectangular simulation of Web page layout

Please see the big screen: (Screenshot of the website of Baidu Art Encyclopedia)

This is a relatively traditional way of typesetting, although the formal, the form is quite a lot. Text, pictures, labels, video playback ... More suitable for typesetting exercises.

The biggest advantage of web-side web pages is, what kind of design, what development can do, because do not like the mobile end to consider so many adaptation problems (think of the previous writing phone black history, Laolei, face, and ...). T_T). My advice to friends around the Web front end is that it's easier to get the PC layout done before you write to the mobile device side.

　　1. "Question"

Get the design requirements immediately open PS do things, anyway, I do not do, generally will be less. Similarly, to get the Web design draft also please do not immediately start code word, we need to check.

Tell me, you see that picture up there, you saw a few pieces? Before sketching, the teacher is not told you want to squint to see the relationship between light and shade, because people are easily affected by some details, so first spread the big face, and then dig the details, a qualified sketch can be very good completion. Similarly, a Web page, no matter how much content, distribution is from the big to small slowly dug out.

Well, if you're dizzy, look at my division, which may be a bit like the way you think about putting things in design:

First of all, the Head tab and below for a piece, divided into two after the following, and then ...

In fact, the front-end engineer is almost such a train of thought, from top to bottom, from left to right to write. Some will write one of the parts to write the next one, and some will write a few chunks of a one-time, back to fill. If it weren't for a special reason, if your design was wrong, you'd be waiting for him to question you, or he would have written it to you by default.

Similar to the C3 where the artist module, engineers the most porridge, hahaha ... Write a paragraph, then ctrl C CTRL V,ctrl V,ctrl V ...

Don't say much nonsense, then come on.

We follow the effective area 1180px to write, the size of words, their own to the site to intercept the amount of http://baike.baidu.com/art.

Now to see the words are no content, from the top to the small first A1 discharged to

Well, now the structure is not a separate parallel structure. The first Div has its own child (note that the line indent, which has a more obvious hierarchy) is the five div (which can also be loaded with other tags, such as: A, p, span ...). Why it's called a child, because there are child tags and parent tags in HTML. Sometimes a child tag inherits the style of the parent tag, but most of it is the content of the label, not the label itself, that is, if you add the text-oriented style to "Title_tab," the text within the child label will also change, unless the child tag has its own style for the text, but not all of the time can be successfully inherited (eh ...... Speak more and more).

The code is as follows:

Red Section Resolution:

(The style of the title is easy to read, you can write it, just a lot of it appears to be longer.) )

1 Style provides a variety of writing methods, not only the. ClassName, you can bring the tag name p{}, div{} ... With the tag name without the front dot, but for the current HTML file all the P tags and div tags, so you know why I said class name as far as possible not to use the same as the tag name it? If you forget to write a point, the picture, I simply dare not imagine. Like the "*{}" in the text of the * is all, margin is the spacing attribute, the default inside each browser, margin is a value, so you need to make some settings. The following figure:

2 padding is the inner margin, margin is the outer margin;

When they have only one value (example: padding:10px;margin:10px;), the default is 10px up or down.

When there are two values (example: padding:10px 20px;), its representative is up and down 10px, about 20px;

When there are four values (example: padding:1px 5px 3px 6px;), respectively for: upper right and left, that is, the value of the clockwise direction, attention, not up and down about OH.

Finally, it can be set separately for one side, for example: padding-left:10px; margin-top:20px;

Color sets the font color, font-size--font size, font-weight--font weight (bold, 100, 200, 300 ...). The biggest also is eight hundred or nine hundred appearance, does not have the unit); font-family: "Microsoft Ya Black"; ......

As for the properties of float, please refer to the previous article;

There are a lot of attributes, you can go to w3cschool slowly find a try.

OK, this is the case today, you see I write the code is a little different, it is not a day to write, time is really not enough. The next section complements the style and then the layout.