The third day of learning Div CSS in ten days [two-column and three-column layout]_html/css_WEB-ITnose

One or two columns of adaptive width
The following is the common left column fixed and right column adaptive as an example. Because div is a block element, it occupies one row of space by default. To To make the following div run to the right, you need to use css to float it. First create the html code as follows:

<div id="side">此处显示 id "side" 的内容</div><div id="main">此处显示 id "main" 的内容</div>

After the div is created, start creating the css style sheet, the code is as follows:

#side { background: #99FF99; height: 300px; width: 120px; float: left; }#main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }

Then create the #main style. Note that the left margin of #main is set to 120px. The preview results are as follows:

2. Fixed width of two columns
With the previous foundation, it is much easier to fix the width of two columns. You only need to change # The width of main is changed from percentage to fixed value.

3. Two columns with fixed width and center
Two columns with fixed width and center need to be improved on the basis of two columns with fixed width. When learning to center one column with fixed width, we know to let it Centering method, so here you need to add a parent div in addition to these two divs:

<div id="side">此处显示 id "side" 的内容</div><div id="main">此处显示 id "main" 的内容</div>

The css code is as follows:

#content { width:470px; margin:0 auto;}#side { background: #99FF99; height: 300px; width: 120px; float: left; }#main { background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; }

4. Block-level elements (div) and inline elements (span) of xhtml
Block-level element: It is a square, like a paragraph, which occupies one line by default;

Inline element: Also called inline element, as the name suggests, it can only be placed within a line, just like a word, without causing line breaks before and after, and plays an auxiliary role.

General block-level elements such as paragraphe388a4556c0f65e1904146cc1a846bee, title4a249f0d628e2318394fd9b75b4636b1c1a436a314ed609750bd7c7d319db4da..., list,ff6d136ddc5fdfeffaf53ff6ee95f185c34106e0b4e09414b63b2ea253ff83d625edfb22a4f469ecb59f1190150159c6, table5a28d4f0149dd50dd6b6bb5a29ff69f6, DIVdc6dce4a544fdca2df29d5ac0ea9906b and BODY6c04bd5ca3fcae76e30b72ad730ca86d and other elements. Inline elements are such as: form element d5fd7aea971a85678ba271703566ebfd, hyperlink 3499910bf9dac5ae3c52d5ede7383485, image a1f02c36ba31691bcfe87b2722de723b, 45a2772a6b6107b401db3c9b82c049c2..... The salient features of block-level elements are: each Block-level elements are displayed starting from a new line, and subsequent elements also need to be displayed on a new line.

The block-level element occupies one line by default, which is equivalent to inserting a line break before and after it; the inline element span does not have any impact on the display effect, and this is also the case; em just makes the font become Italics also do not occupy a line by themselves. These are block-level elements and inline elements. It is because of these elements that our web pages become rich and colorful.

Without the effect of css, the block elements will be sequentially arranged one line at a time. With CSS, we can change the default layout mode of this HTML and place the block elements where you want. Instead of stupidly starting a new line every time. In other words, you can use display:inline of CSS to change block-level elements into inline elements, and you can also use display:block to change inline elements into block elements.

5. Three-column adaptive width
Three-column adaptive width. The commonly used structure is that the left and right columns are fixed, and the middle column automatically adjusts according to the browser width. adapt. Let's modify it based on the two-column adaptive width

<div id="side">此处显示 id "side" 的内容</div><div id="side1">此处显示 id "side1" 的内容</div><div id="main">此处显示 id "main" 的内容</div>

#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }

Remove the width:70% of the original #main style, and then set the left and right The outer margins are 120px each, allowing for the width of the left and right columns

#main { background: #99FFFF; height: 300px; margin:0 120px; }

Six, three-column fixed width
Three-column fixed width can be adjusted automatically in three columns Just add a parent div based on adaptation and set the width of this div. As follows, add a parent container with the id of content.

Select these three divs in the source code, and then click the "Insert div tag" button on the toolbar. The insertion item in the pop-up window will default to: wrap next to the selected content and enter the id for content, and then define a width for this div

The three-column fixed width is out. It is more convenient to achieve the three-column fixed width centered, just Set #content {margin:0 auto;} to

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style>body { margin:0;}#content { width:470px; margin:0 auto;}#side { background: #99FF99; height: 300px; width: 120px; float: left; }#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }#main { background: #99FFFF; height: 300px; margin:0 120px; }</style></head></p><p><body><div id="content">  <div id="side">此处显示 id "side" 的内容</div>  <div id="side1">此处显示 id "side1" 的内容</div>  <div id="main">此处显示 id "main" 的内容</div></div></body></html>