I. Division rules:

The first step: after getting a web page file, the design drawing is divided into three parts through PS first, and the width of the three parts is set to 100%. 1, header (header part) : contains the logo of the web page, the navigation of the website, and the corresponding advertising area or the introduction area of the web page. 3. Footer (tail) : The advertising section that contains cooperative manufacturers, website development information, and website specifications. Step 2: Write the corresponding code div tag according to the partition: The

container tag, the equivalent of a sized box used for layout in a web page, divides the first step into three parts,

The three sections are separated by the class attribute div tag, similar to a person’s name. < div style tag is the style of the web page, written inside the head tag –> 

<! DOCTYPE HTML > < HTML lang = "en" > < head > < meta charset = "utf-8" > < - coding information - > < title > home page < / title > < - title information -- -- > < style > < -- the style of the page - > /* selector {style: style value; }*/ </style> </head> <body> <div class="header"></div> <div class="main"></div> <div class="footer"></div> </body> </html>Copy the code

2. Selector (to help find the tag to add styles)

Class selector:.+class name for example:. Header {width: 100%; height:491px; background-color:red; } : width indicates the width of the div tag, shortcut key is W +100% press Tab; Height indicates the height of the div tag. The shortcut key is H +491. Px stands for pixel; 100% means spread over the entire page; Background — color indicates the background color, shortcut key is BGC press Tab;

Three, clear the spacing of the web page

*{

margin:0;

padding:0;

}

<! DOCTYPE HTML > < HTML lang = "en" > < head > < meta charset = "utf-8" > < - coding information - > < title > home page < / title > < - title information -- -- > < style > < -- the style of the page - > Margin :0; padding:0; } </style> </head> <body> <div class="header"></div> <div class="main"></div> <div class="footer"></div> </body> </html>Copy the code

Four,

Divide the image into three sections and set the width, height and background color

<! > < HTML lang="en"> <head> <meta charset=" utF-8 "> <title> </title> *{margin:0; padding:0; } .header{ width:100%; height:491px; background-color: blue; } .main{ width:100%; height:896px; background-color: orange; } .footer{ width: 100%; height: 124px; background-color: black; } </style> </head> <body> <div class="header"></div> <div class="main"></div> <div class="footer"></div> </body> </html>Copy the code

Final page display (color can be changed) :