Shulou(Shulou.com)06/03 Report--

This article introduces the "Web page layout method tutorial" related knowledge, in the actual case operation process, many people will encounter such a dilemma, and then let the editor lead you to learn how to deal with these situations! I hope you can read it carefully and be able to achieve something!

1. Element drift

Remove an element from the page stream and drift in a certain direction, and other block elements will be placed under this element, and when inline elements are injected into other block elements, inline elements will surround the element.

# amazing {

Width: 200px

Float: right

}

As shown in the figure:

If other elements want to avoid this element,

The code is as follows:

# footer {

Clear: both

}

As shown in the figure:

2. Freeze the layout

The element remains in the page flow, locked and frozen on the page, and the size of the element remains the same regardless of whether the window is zoomed in or out

The code is as follows:

# allcontent {

Width: 800px

}

As shown in the figure:

3. Gel layout

Lock the width of the content area on the page and place it in the center of the browser

The code is as follows:

# allcontent {

Width: 800px

Margin-left: auto

Margin-right: auto

}

As shown in the figure:

4. Absolute layout

Remove an element from the page stream and float and fix it somewhere on the page.

The code is as follows:

# sidebar {

Position: absolute

Top: 128px

Right: 480px

}

As shown in the figure:

5. Fixed layout

Remove an element from the page stream and float it somewhere in the window.

The code is as follows:

# coupon {

Position: fixed

Top: 300px

Left: 100px

}

As shown in the figure:

6. Relative layout

The element remains in the page flow, but the element is offset to the specified position before the page is displayed, and the original position is not occupied by other elements because it is still in the stream.

.beanheading img {

Position: relative

Right:120px

}

As shown in the figure:

This is the end of the tutorial on how to layout Web pages. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.