HTML layout LOGIN
简体中文（ZH-CN） English（EN） 繁体中文（ZH-TW） 日本語（JA） 한국어（KO） Melayu（MS） Français（FR） Deutsch（DE）

HTML layout

Most web page layouts are completed with CSS; CSS is used to position elements or create backgrounds and colorful appearances for the page. Since we are dealing with the basics of HTML here, we will use our existing knowledge to lay out.

Webpage layout can be achieved through the < table> element or the < div> element. Let’s start with a simple < table> layout of a web page. We learned about tables in the previous chapter, so let’s lay out a section of a web page with a table without borders (adding background color and arranging text content)

  
 
  
php中文网
 		 
 
  
 
list of book
 
 
     
  1. hadoop
    2.  
  2. linux
    3.  
  3. c
    4.  
 
 
 		  
the summary of the book
 i will lead you to travel in the season of linux 		 
 
  good good study day day up

QQ截图20161011093509.png

## Next we will use the
element for layout (try to achieve the page effect above): The general div element structure is as follows (the idea is also based on the table idea) :

QQ截图20161011093554.png

Here is the specific implementation content: 

   

  
   
 
the summary of the book
 
i will lead you to travel in the season of linux

It is easy to understand as long as the div definition in the style above corresponds to the div block below. Here The logic is expressed very clearly, so I won’t go into details again. Let’s take a look at the screenshots of the effect

QQ截图20161011093718.pngNext Section

the summary of the book

i will lead you to travel in the season of linux

submit Reset Code
Chapter Courseware