CSS DIV single-column web page layout

 CSS DIV typesetting is already a very mainstream way of web page layout. Through simple DIV typesetting, you can easily create a variety of web page layouts. This article mainly explains CSS DIV single-column web page layout design, which can be regarded as typesetting through DIV. The most entry way, after all, the basic single-column web page does not need to use floating skills.

CSS DIV single-column web page layout presentation



assumes that we want to design a single-column page, that is, there are no other fields on the left and right, but at least it should be divided into the header at the top, the main part of the body in the middle, and the most The footer and other blocks below, after dividing each block, you can easily add web content in each block. In order to be able to easily express how to discharge such web page layout, the following is divided into CSS style and The two parts of HTML Code can be completed by combining these two parts.

CSS style section

<style type="text/css">
#Header{
　width:360px;
　height:80px;
　text-align:center;
　line-height:80px;
　font-size:15px;
　color:#fffaf3;
　font-weight:bold;
　background-color:#f9c81e;
}
#body{
　width:360px;
　height:280px;
　text-align:center;
　line-height:280px;
　font-size:15px;
　color:#f9c81e;
　font-weight:bold;
　background-color:#fffaf3;
}
#Footer{
　width:360px;
　height:80px;
　text-align:center;
　line-height:80px;
　font-size:15px;
　color:#fffaf3;
　font-weight:bold;
　background-color:#f9c81e;
}
</style>

The style of the example CSS has only three main blocks, namely Header, Body and Footer, which control the three DIV blocks in the HTML Code below . The browser will use the id in the DIV to determine the style of each block. Which part of the above css code should be mapped to, briefly explain the meaning of several styles in the example.

• width-set DIV width
• height-set DIV height
• text-align -Set the text alignment in the DIV
• line-height -set the line height of the text in the DIV
• font-size -Set the size of the text in the DIV
• color -set the text color in DIV
• font-weight -Set the text weight in the DIV
• background-color -Set the background color of the DIV block
  

HTML Code section

<div id="Header">Header 欄位</div>
<div id="Body">Body 欄位</div>
<div id="Footer">Footer 欄位</div>

As mentioned in the first paragraph, the single-column DIV layout is very basic. You only need to write the first DIV from the top of the HTML Code and write it down in order. The content of each block can be its own Fill in. As long as the above CSS style and HTML Code are written in the same HTML file, the results can be displayed in the browser after archiving.