Simple html + css page creation

Today, we use html + css to create a simple page. As follows:

Note: Here, Korean is replaced by Chinese.

1. Get the first analysis page layout

The figure is in a vertical structure and consists of five big DIV:

The page Width I created is PX, and a large box is added to the five divs to give a class named all. Set the width to 1024px and center.

Generally, pages are made in order. This is my habit. Since it is just a page, my css and HTML are written in one page.

2. First write the first div and give it a class named top.

The css style is as follows:

The effect is as follows:

In this way, the first div is ready.

3. Make menu and logo below

Css:

:

4. Create a menu Sub-menu

Css:

Generally, the level-2 menu can be made of js. I don't use js here. I use css directly to locate the level-1 menu and level-2 menu, and use style (css in the rectangle in the figure) controls the hidden display of level-2 menus.

5. It is best for banner to do so by directly placing images or setting backgrounds. Omitted here

6. Analyze the subject content, with 4th divs

The DIV is divided into two layers. The first layer displays the news list. For details about us and the Product Center, the second layer displays the logo + copyright description and a drop-down box.

Because the content at the first layer is displayed side by side, the three divs are set to float left.

 

Start the news section first in the order from left to right

Style:

7. In the figure, we split the left and right structures to make the image float left and right. This writing method has not encountered any problems yet.

The product center should adopt the blinds made by js. The style is used for the time being. The effect will be added later. Add the logo at the bottom and other divs between the product center and the logo at the bottom to automatically go down.

The following code is attached:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
As for the image, it will be okay if you use the image.
For the first time, please forgive me for the shortcomings. We hope we can communicate with you and make progress together.
Pages are generally divided into sums.
The layout is generally divided into menus + logos, subject content and copyright descriptions at the end.
The layout of the special effect page is uncertain. The general page layout is generally divided into upper and lower layers, and the middle part is divided into upper and lower structures or left and right structures. It is better to set up the general framework and fill it in a little bit.
Finally, I would like to provide you with a reference website: http://www.w3school.com.cn/where the frontend is basically east and west. If you have any problems, you can find a solution. Recommended by individuals.