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

Source: Internet
Author: User

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:

 

 

 

 

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.