Css Div layout learning (1)?Div layout basics_html/css_WEB-ITnose

In the previous series (Css basic learning? Index) we introduced the basic properties and usage of Css, and we will start to explain some content of Css Div layout from now on. Everyone, get ready, we are about to start the layout journey. If you are not very familiar with CSS, you can read some of my previous articles.

If we want to layout CSS, float is the most critical attribute. Floating allows your block elements to not obey the layout characteristics of element flow. If floating is not used, the elements will be arranged one after another. The float attribute has three values: left, right, and none, and we will use these values ​​later. We will use examples to illustrate the properties of layouts.

Let’s make an html file to prepare for the following explanation:

Masthead

Sidebar_a

Sidebar_b

Content

Footer< ;/div>

This kind of html must only have a few characters to open with a browser. We first add some simple Css to mark it, so that we can see the layout of the page more clearly. .

body { padding:10px; margin:10px; } div { border:1px solid #000; background-color:#CCC; height:20px; padding:10px; text-align:Center; } #Masthead { margin-bottom:10px; background-color:#CCCCCC; } #Sidebar_a { margin-bottom:10px; background-color:#3399CC; } #Sidebar_b { margin-bottom:10px; background-color:#33ff33; } # Content { margin-bottom:10px; background-color:#ff3366; } #Footer { background-color:#ffff00; }

We added a border to each Div and used it for each Div Convenient logo on background color.

Masthead

Sidebar_a

Sidebar_b

Content

Footer

The five Divs above represent the most common header, footer, two sidebars and middle content in web templates. No more CSS has been added yet, so it's just 5 Divs from top to bottom. Let's analyze it first. First of all, the Masthead and Footer parts have basically met the requirements. No more changes are needed. That is, the two middle sidebars Sidebar and Content need to be arranged from left to right. Let's first Take a look at what the finished CSS and layout looks like:

Masthead

Sidebar_a

Sidebar_b

Content

Footer

#Masthead { background-color:#CCCCCC; margin-bottom:10px; } #Sidebar_a { float:left; width:25%; margin-bottom:10px; background-color:#3399CC; } #Sidebar_b { float:right ; width:25%; margin-bottom:10px; background-color:#33ff33; } #Content { margin-bottom:10px; height:150px; background-color:#ff3366; } #Footer { clear:both; background- color:#ffff00; }

First of all, let me explain that all the html has not been modified at all, just some CSS has been added.
Comparing the previous and following Css, the content in Masthead and Content has not changed. The height in Content: 150px; is just to illustrate what will happen when there is a lot of content. The key is float:left; in Sidebar_a and float:right; in Sidebar_b. It is these two properties that make our layout successful. You can also try it yourself by changing the attributes in Sidebar_a and Sidebar_b, and the positions of the two sidebars will be swapped. This reflects the flexibility of Div CSS layout.

Masthead

Sidebar_a

Sidebar_b

Content

Footer

Don’t forget to include the Footer at the end of the table There is a clear:both; attribute. What does this attribute do? After use, floating will affect subsequent elements, so it must be cleaned up.
Note: The five Divs in the above Html cannot be changed in position, otherwise they will not be displayed normally. In particular, the Content should be behind the two sidebars.
The above just briefly explains the layout of Div. If you want to be proficient in using it, you should practice it yourself.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn