[WebFrontEnd] Multiple HTML structures and CSS la s of a page, webfrontendcss

[WebFrontEnd] Multiple HTML structures and CSS la s of a page, webfrontendcss

The first time I wrote an article, I was so nervous !!!

This is a simple layout, but it is a question worth pondering. For this layout, there can be a variety of HTML and CSS writing methods. How many writing methods can there be?

My idea is to write different CSS based on different HTML la S. For the effect, a fixed height is added to the element.

1. The first page Structure

1-1. First CSS layout:

In this way, a parent element with floating clearance contains two child elements floating to the left, and the width of each child element is set.

Here, you must give the aside a right margin, otherwise the two elements will be pasted together.

The disadvantage of this writing method is that it is not flexible enough. The parent and child elements and the right outer margin are fixed,

If the container width of the parent element changes, the aside width remains unchanged, and the margin remains unchanged, the main width needs to be adjusted accordingly.

1-2. Second CSS layout:

In this way, a parent element that clears the float contains a child element that floats to the left, and the other element floats to the right. The width of each child element is set.

This writing method is not flexible enough, just like the first layout, but the aside elements do not need to write spacing.

1-3. Third CSS layout:

The child element that floats to the left and the width and the right margin are set. The main element does not need to float or manage the width, but overflow: hidden; _ zoo: 1; is set ;.

This method is more flexible than the first and second methods. You do not need to set the width of the main element. When the width of the parent element changes, the width of the main element is adaptive.

1-4 and 4 CSS la s:

In this way, a parent element with floating clearance contains a child element floating to the left and sets the width. The main element does not need to float or float the width, but only sets the left margin.

This method is also flexible! Main element adaptive width, don't worry.

1-5. The fifth CSS layout:

This statement sets relative positioning for the parent element, and one of the Child elements determines the positioning. The main element does not need to be set to float or width. This method is often used in this scenario. I checked the 360 navigation webpage, for example:

 

2. Second Page Structure

Sometimes we also put the content on the right side on the top and the content on the sidebar below, which is conducive to reading important content first.

2-1. For this layout, I only want to write a CSS statement:

This is also the two elements of the left and right floating.

3. Third page Structure

This layout is more complex than the first two la S.

3-1. First CSS layout:

This method is written with a layout like two columns. However, this method has a bug in IE6 and is not displayed in aside.

These different methods involve a lot of layout knowledge points:

Floating, clear floating, including block, BFC, positioning mechanism, etc.

I don't think there is the best layout, but only the suitable layout. Select different methods in different situations.

[Button]

 

Help me compile a webpage with css and html layout in two columns. The right side width is PX and the left side is automatically expanded.

<! -- Assume that the webpage is 1000 pixels -->
<Div style = "width: 1000px; border: # 0000FF solid 1px; margin: 0 auto">
<Div style = "float: left; width: auto; border: # FF0000 solid 2px;"> the width is automatically 0000000000000000000000000 </div>
<Div style = "float: right; width: 200px; border: #000 solid 2px;"> width: 200 pixels </div>
</Div>
</Div>




Webpage layout code of html + css

<Div class = "biankuang" style = "width: 1024px; height: 768px">
<Div class = "dingbu" style = "width: 100%; height: 30px;"> top </div>
<Div class = "zuobu" style = "width: 200px; height: 100%; float: left;"> left </div>
<Div class = "youbu" style = "width: 100%; height: 100%; float: left;"> right </div>
</Div>