Simple html + css page creation

Source: Internet
Author: User

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



4. Create a menu Sub-menu


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


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" ""> 

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: the frontend is basically east and west. If you have any problems, you can find a solution. Recommended by individuals.

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: 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.