CSS Page Layout

Page layout

There are many ways to layout a webpage, which are generally divided into the following parts: the header area, the menu navigation area, the content area, and the bottom area .

Head area

The header area is located at the top of the entire webpage, and is generally used to set the title or logo of the webpage:

Example

.header { background-color: #F1F1F1 
   ;
   text-align: center ;
   padding: 20 px ;
 }

Menu navigation area

The menu navigation bar contains some links to guide users to other pages:

Example

/* Navigation bar */ .topnav { overflow: hidden
 
   ;
   background-color: #333 ;
 } /* Navigation link */ .topnav a { float: left
 

  
   ;
   display: block ;
   color: #f2f2f2 ;
   text-align: center ;
   padding: 14 px 16 px  ;
   text-decoration: none ;
 } /* Link-modify color */ .topnav a :hover { background-color: #ddd
 

  
   ;
   color: black ;
 }

Content area

The content area generally has three forms:

  • 1 column : generally used for mobile
  • 2 columns : generally used for tablet devices
  • 3 columns : generally used for PC desktop devices

We will create a 3-column layout, which will become a 1-column layout (responsive) on a small screen:

Example

/* Create three equal columns */ .column { float: left
 
   ;
   width: 33.33 % ;
 } /* Clear float after column */ .row :after { content: ""
 

 
  ;
   display: table ;
   clear: both ;
 } /* Responsive layout-change to top and bottom layout when less than 600 px */ @media screen and (max-width: 600 px ) { .column { width: 100 %
 

  
   
     ;
   } }

Tip: To set two columns, you can set the width to 50%. Create 4 columns can be set to 25%.

Tip: If you want to know more @media rules, you can check CSS3 Multimedia Query .

Tip: Now a more advanced way is to use CSS Flexbox to create the column layout, but Internet Explorer 10 and earlier versions do not support this method. IE6-10 can use the floating method.

For more information about CSS Flexbox, please refer to CSS3 Flex Box .

Unequal columns

The unequal columns generally set the content area in the middle part. This is the largest and most important one. The left and right sides can be used as some navigation and other related content. The combined width of these three columns is 100%.

Example

.column { float: left 
   ;
 } /* The width of the left and right sidebars */ .column .side { width: 25 %
 

 
   ;
 } /* Middle column width */ .column .middle { width: 50 %
 

 
   ;
 } /* Responsive layout-set up and down layout when the width is less than 600px */ @media screen and (max-width: 600 px ) { .column .side , .column .middle { width: 100 %
 

  
   
     ;
   } }

Bottom area

The bottom area is at the bottom of the web page and generally contains copyright information and contact information.

Example

.footer { background-color: #F1F1F1 
   ;
   text-align: center ;
   padding: 10 px ;
 }

Responsive web layout

Through the above learning, we will create a responsive page, the layout of the page will be adjusted according to the size of the screen:

Example

* { box-sizing: border-box 
   ;
 } body { font-family: Arial
 
 
   ;
   padding: 10 px ;
   background: #f1f1f1 ;
 } /* Head Title */ .header { padding: 30 px
 

 
   ;
   text-align: center ;
   background: white ;
 } .header h1 { font-size: 50 px
 
  
   ;
 } /* Navigation bar */ .topnav { overflow: hidden
 

 
   ;
   background-color: #333 ;
 } /* Navigation bar link */ .topnav a { float: left
 

  
   ;
   display: block ;
   color: #f2f2f2 ;
   text-align: center ;
   padding: 14 px 16 px  ;
   text-decoration: none ;
 } /* Link color modification */ .topnav a :hover { background-color: #ddd
 

  
   ;
   color: black ;
 } /* Create two columns */ /* Left column */ .leftcolumn { float: left
 


    
   ;
   width: 75 % ;
 } /* Right column */ .rightcolumn { float: left
 

 
   ;
   width: 25 % ;
   background-color: #f1f1f1 ;
   padding-left: 20 px ;
 } /* Image part */ .fakeimg { background-color: #aaa
 

 
   ;
   width: 100 % ;
   padding: 20 px ;
 } /* Article card effect */ .card { background-color: white
 

 
   ;
   padding: 20 px ;
   margin-top: 20 px ;
 } /* Clear floats behind the column */ .row :after { content: ""
 

 
  ;
   display: table ;
   clear: both ;
 } /* Bottom */ .footer { padding: 20 px
 

 
   ;
   text-align: center ;
   background: #ddd ;
   margin-top: 20 px ;
 } /* Responsive layout-when the screen size is less than 800px, the two-column layout will be changed to the top and bottom layout */ @media screen and (max-width: 800 px ) { .leftcolumn , .rightcolumn { width: 100 %
 

  
      
     ;
     padding: 0 ;
   } } /* Responsive layout-when the screen size is less than 400px, the navigation and other layouts will be changed to the top and bottom layout */ @media screen and (max-width: 400 px ) { .topnav a { float: none

 

  
    
     ;
     width: 100 % ;
   } }