Super simple DIV + CSS webpage Layout

This article demonstrates how to effectively use the div element on a page to build a website, instead of using the table element. Because div elements have many advantages, most customers require designing and developing div elements instead of table elements for their website development. The above Code aims to help beginners learn how to develop websites using div elements.

The following explains why the div element is used instead of the table element.

　　Advantages of table elements:Most design developers use table for a uniform appearance. Table is also very easy to maintain. Another benefit of a table is that it is compatible with most browsers.

　　Disadvantages of table elements:All of these are costly: too many nested tables will increase the page size and download time. Too many table elements Reduce the proportion of important content on the webpage, causing search Spider to add useless content to the search engine.

　　Advantages of DIV elements: Div and css, we can implement the same table-based page structure, and reduce the number of elements on the page, so that the page loading is faster. This also allows more webpages to match with search engines.

　　Disadvantages of DIV elements: The main drawback is that not all CSS elements are compatible with all browsers. Because of this, we must write some custom CSS to solve the problem.

I have created a simple application that shows how to easily create a webpage with only div elements.

The following figure shows the layout of the div element.

Here is the list of css style sheet classes I created for the page layout. Let's take a look at more details.

DivHeaderTable: design the header of the html page. The div of this style is equivalent to headertable.

DivHeaderRow: The div that applies this style serves as the header row of the table. Because the image in the header is fixed to 105, the value of the height element in the row is 105px.

DivHeaderColumn: The div that applies this style serves as the header column of the table. A Header element with a value of 99% is divided into three such element parts.

DivTable: This type of div applies to the table in the html document container.

DivRow: This type of div applies to the row in the html document container.

DivColumn: The div that applies this style is equivalent to the Column in the html document container. The container contains four rows with a width of 24%.

Copy to ClipboardReference: [www.bkjia.com] body
{
Background-color: LightBlue;
Font-family: Verdana;
Font-size: 13px;
}
. DivHeaderTable
{
Width: 100%;
Padding-bottom: 5px;
Display: block;
}
. DivHeaderRow
{
Width: 100%;/* add extra that you want to for header column */
Display: block;
Height: 105px;
}
. DivHeaderColumn
{
Float: left;
Width: 33%;
Display: block;
}
. DivTable
{
Width: 100%;
Display: block;
Padding-top: 10px;
Padding-bottom: 10px;
Padding-right: 10px;
Padding-left: 10px;
}
. DivRow
{
Width: 99%;
Display: block;
Padding-bottom: 5px;
}
. DivColumn
{
Float: left;
Width: 24%;
Display: block;
}

• 2 pages in total:
• Previous Page
• 1
• 2
• Next Page