You can understand it without any basic knowledge! The front-end little knowledge written to designers is three steps forward, with little knowledge being three steps forward

You can understand it without any basic knowledge! The front-end little knowledge written to designers is three steps forward, with little knowledge being three steps forward

This article is an entry-level, basic, and intended for designers who want to learn a little about the front-end knowledge. Today, this chapter uses the PS familiar to designers to explain frontend-related terms. It is easy to understand and humorous, it is definitely a good tutorial for beginners!

1. Large Collection of styles

We have previously introduced "embedded style" and "inline style". The former takes effect only for the label where it is located, and the latter takes effect for all labels that have passed the class reference of this style on the current page. Inline styles are generally written in the header, but when styles are accumulated less and other html pages need to reference the style of the current page (for example, for the body), it is more troublesome. You certainly don't want to write it again.

As a result, the "external style" appeared again. Yes, there are not enough embedding and not enough inline, so an outfield aid was pulled.

The external style is written in another file. The file format is. css, also known as "style sheet", is probably because the browser needs to query the table according to the class name like a table, and then obtain the style content. The format is exactly the same as that in <style> </style>, except that a dedicated. css file is installed, and style label packaging is not required. If you are still a little dizzy, let me use PS for a moment.

This is the "written" div (rectangle) in the html (psd) file. Its color ...... Cough ...... Is not very nice ......

The first div (rectangle) is added (or changed) with the style. In this case, other rectangles are not affected, that is, ---- embedded style.

Then I created a new class (Group) class1 with the color superposition value # e75555

Good !!! Now I want to modify it. Oh no, I want to reference it. Pay attention !! Note !!! Reference the third and fourth rectangle to the class1 class (folder ). Then we can see that both 03 and 04 have changed colors.

As a designer, we all know that if we put all four rectangles into class1, no matter whether there are overlapping colors before 01, the four rectangles will become one color, that is, in PS, the Inline style (class1-red) has a higher priority than the embedded style (01 overlay purple. BUT !!! In html, It is reversed ...... Remember, the reason for this introduction is to tell you that the style is referenced, which is equivalent to the style overlay in PS.

The external style refers to moving the inline style to another exclusive place for convenient management and calling;

The method of introduction is to add a sentence after the title in the header (

<Link type = "text/css" href = "sample file name .css" rel = "stylesheet"/>

That is to say, as long as an html file introduces a CSS file with a style written, it works. Therefore, compared with just one label embedded style and one html inline style, the external css file scope is relatively large.

If you have to ask why, do you still remember the previous "coming later? Whether it is external or Inline, it is usually placed in the header, but the embedded style is followed by the label. From the perspective of the browser's top-down and left-right parsing method, the same style has different values, the last read style must be used first.

Well, this is the three reference methods of styles in html. Of course, there will also be JS-based addition and reference, which is basically based on these three types. I cannot use it for the moment. In the following example, because there are not so many styles, I will use Inline for ease of viewing.

The layout goes on, and then goes on. (Web Front-end learning and communication group: 328058344 chat prohibited, not welcome !)

Ii. Layout

The website of this website has been introduced in the previous period. I will go over it myself. Haha ...... Is to make you lazy.

As shown above, we have already completed the previous period. It is currently static and has no mouse effect.

For example, it is divided into the upper and lower parts. The above part is divided into the left and right parts. Let's sort out the virgin pictures part today. Other children's shoes that are interested in learning can be typeset by yourself.

In general, the static layout can be divided into several steps: set the size, position, and content (of course, there is no such thing as absolute, but it is just a personal habit, but it is recommended for beginners not to take a different path for the time being ), let's take the content to be arranged as an example.

1. fixed size

Without the source file, we can also obtain the size, for example, to measure in PS.

The layout is similar to using the label language to complete your statement on the design draft, like telling a story, saying to yourself: This is a 380 * 568px box with a background and a translucent black box at the bottom, some white text is installed, there are four types of text, there is also an irregular shape, two white box names ......

Now we start to use tags to describe:

Fixed size: You need to create a 380*568 div and give it a class with a nice name. Then complete the style in the style box.

In order to see your div, I first added a background. As for why I cannot see it without adding it, please refer to the previous tutorial ...... /**/You can write comments internally without affecting the webpage. The url is the image address. You can select an image as you browse a file. Some children's shoes may often encounter text prompts. You can delete them to the front of ":", start typing from ":", or enter a space after, in short, try more ......

Save and open the browser:

I'm going to take a look at the source image:

At the very least, let me cut the middle, so you have to add a sentence to adjust the background position: background-position: center; (center is to place the background in the middle) this is almost the case. Of course, you can take the next picture as the background, and Jones ouba is also good ~

2. Fixed Position

As a matter of fact, it is obvious that I was blocked by the consulting team. Because I am not on the first layer, I will read the second article on the principle. (Let you forget it when you finish learning it !)

So let it float and use margin to isolate it from the surrounding area.

So how to calculate the location? If you are a UI, you should be clear about what you usually use to mark development? You can create a volume as needed:

That is, the position of the div can be determined by adding float 12 Px to the right and top.

The pic_content style is basically like this:

.pic_content{ width:380px; height:568px; background:url(imges/01.jpg);background-position:center; float:left; margin-top:12px;}

3. Fill in the content

We can find that the only content of this div is the background image. However, this step has already been completed, hahaha ......

If you say that the black box at the bottom is not the content? Yes, but it already belongs to the content in another box included in pic_content. It is included in pic_content, but it is a special individual, because it is different from the pic_content style. What should I do? It is equivalent to a son born by Lao Tzu. In addition to the kinship (location relationship), there are almost two different individuals. So next we need to create a new black box, set the size, location, and content ...... This is actually a loop process until the last step at the bottom layer is completed ...... (Web Front-end learning and communication group: 328058344 chat prohibited, not welcome !)

Now, write a black box. Or according to the fixed size (the same as the outer width, high self-removal), set the position (the bottom side and the outer layer overlap, that is, the value of margin-top is the outer layer height minus the height of the black box) and fill in the content, pay attention to the hierarchical relationship, line feed shrink.

The result is as follows:

Is it a bit like it?

The text in it, uh ...... Some two or three characters do not need to be set in size. Because of the text, as the designer knows, the number of characters in size is the pixel size, such as the 14px font, the pixel count is 14 * 14px. Of course, special ones cannot be guaranteed. However, some text is displayed within a limited width. If there is a line break, it indicates that the box containing the text is wide and high. Secondly, when you set the position in step 2, consider not only the upper and lower margin, but also the distance between the left and right. (-_-| Complicated things)

Write the first line first. It is different from the black box style ...... That means we have to add another box. In fact, the first step is to set the size only to prevent others, avoid being blocked by others, and avoid misplacement ...... However, the font is just a line and far smaller than the width of the black box, so you don't have to worry about the first step.

A new label is used here: <p> </p>. This is a box mainly used to hold text. For details about its attributes, refer to W3C.

The style is:

. Black p {color: white; font-size: 20px; font-weight: 500; float: left; margin-left: 24px; margin-top: 16px; font-family: ""}

I don't need to introduce each attribute one by one, but it is worth mentioning that ". "The tag name indicates that all the tags in the current html file reference this style. This is actually a very dangerous method, but there is another". "black" indicates all p tags contained in black, that is, it has no effect on p tags other than black. (Web Front-end learning and communication group: 328058344 chat prohibited, not welcome !)

The final effect is as follows:

There are two types of text below, which are your homework. The answer will be published in the next issue. In fact, if you just look at it, it is really sorry for the time it takes for you to read the article. Let's talk about it in the next DW.

In this issue, we mainly talk about writing styles and the basic typographical steps of static pages. These are based on experience and are not the standard of Shenma ......

Let's talk about the problem!

In all the labels, the usage of <div> </div> is quite high. Finally, when I learned javas complete, I almost used only div. Why? Whether it is a button label or a select label for the drop-down ...... Some of their built-in default styles are gray and ugly. You need to take some troublesome steps to remove or replace them with the pretty effect in the design draft. Div can simulate most of the page controls, such as rectangles, rounded rectangles, circles, even triangles, and trapezoid. It is not supported by styles ...... What do you mean?