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 paragraph

, title

..., list,

1. , table, DIV
   and BODY and other elements. Inline elements are such as: form element , hyperlink , image , ..... 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>

Statement of this Website

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