DIV + CSS Practice 1: layout of the overall module of the webpage

DIV + CSS Practice 1: layout of the overall module of the webpage

First, open the webpage of the Administration Department to see how the webpage works. Through the knowledge of Web Front-end development, we can imitate it step by step

Standard webpage. We know that DIV + CSS can achieve the overall layout of the webpage module, which basically replaces the table layout in HTML, DIV + CSS layout

More flexible and convenient code rewriting.

Original webpage:

I will first start to sketch the overall module layout of the webpage:

Write the following code:

First HTML code:

 

Dreamweaver8       CSS Sample Table style.css code:

 

 

/* Code added for the first time */* {margin: 0px; padding: 0px;} body {padding: 0px; margin: 0px; font-size: 12px ;} # top {background-image: url (images/head.jpg); background-repeat: no-repeat; height: 120px; width: 998px; margin-right: auto; margin-left: auto ;}# nav {background-image: url (images/n_nav_bg.gif); background-repeat: repeat-x; height: 37px; width: 998px; margin-right: auto; margin-left: auto;} # adpic {background-image: url (images/h4.jpg); background-repeat: no-repeat; height: 218px; width: 998px; margin-right: auto; margin-left: auto;} # news {height: 720px; width: 998px; margin-right: auto; margin-left: auto ;} # link {background-image: url (images/n_title_bg.gif); background-repeat: repeat-x; height: 40px; width: 998px; margin-right: auto; margin-left: auto ;}# copyright {background-color: # e2e2e2e2; height: 80px; width: 998px; margin-top: 0px; margin-right: auto; margin-left: auto; border-top-width: 5px;/* set the top border of 5 pixels */border-top-style: solid; border-top-color: #006042; margin-bottom: 0px ;}# news # news_left {float: left; height: 720px; width: 233px; margin-right: 5px ;}# news # news_mid {float: left; height: 720px; width: 455px; margin-right: 5px;} # news # news_right {height: 720px; width: 300px; float: left;} # news # news_left # news_left_top {height: 248px; width: 233px; background-color: # FF0000 ;}# news # news_left # news_left_mid {height: 240px; width: 233px; background-color: #00FF00 ;} # news # news_left # news_left_bottom {height: 232px; width: 233px; background-color: # 0000FF ;}# news # news_mid # news_mid_top {height: 488px; width: 455px; background-color: #000000 ;}# news # news_mid # news_mid_bottom {height: 232px; width: 455px; background-color: #999999 ;}# news # news_right # news_right_top {height: 248px; width: 300px; background-color: # FFFF00; }# news # news_right # news_right_mid {height: 240px; width: 300px; background-color: #00 FFFF ;} # news # news_right # news_right_bottom {height: 232px; width: 300px; background-color: # FF00FF ;}

The result of running the browser is: