Front-end HTML page structure: HTML page Structure

Front-end HTML page structure: HTML page Structure

I have been working on the front-end for a year. During this period, I also designed some products because my goal was to program, so I declined some product-related tasks, I plan to focus on programming.

PS: entered the programming industry in January 2015.

Not much nonsense. This year, the page was revised N times, so that designers have all picked it up. If there are too many pages, experience will naturally become available.

Background (front-end Tom, forced to give up his previous sales work, Computer Major)

 

 

The most basic requirements of the front-end are the same as those of the design drawing.

This requirement is easy to implement. You need to think about it. Taking some time, the opening cut will slow down a bit and it will get faster and faster in the future ,,

 

 

The front-end is advanced 1. The page is very layout-oriented.

An accidental opportunity to discuss the front-end page with his colleagues. He opened the web page and wanted to make part of the page. I reviewed the Page code through Google's F12 browser, I found that the page structure is similar to my page structure. The page structure is very layout-oriented. That is to say, after receiving the page, I am not eager to write code, instead, design the layout structure in mind. The traditional structure is nothing more than two types: Upper and Lower structures, left and right structures, but the width and height on the left and right are different from those on the bottom.

 

 

Misunderstanding of front-end page cutting, element height, floating, and positioning.

First, let's take a look at the height. The height of all elements, especially the parent element, is the container contained in the outermost layer. These heights are supported by its child elements. What do you mean? In layman's terms, the heart is big, the stage is big, the heart is child element, the stage is the parent element, and the child element can support how wide and how high, the parent element naturally achieves the effects on the design drawing.

Next, let's talk about floating. I don't know why the beginner who wants to clear floating will, after the child element floats, the parent element will collapse and lose its height, and the height will be manually defined, therefore, it seems that floating is not much affected if it is not cleared. This is also related to the first problem. The height of page elements is supported by sub-elements.

Finally, positioning requires a reference value. When the current element is absolutely located, if the parent element does not use relative positioning, the reference element is a window or a body element, otherwise, the parent element with relative positioning is used recently. Another kind of positioning is fixed positioning, which is fixed at a location on the page,