Very beautiful div+css layout Introductory tutorial 1th/5 Page _ Experience Exchange

Source: Internet
Author: User
In web authoring, there are many terms, such as: CSS, HTML, DHTML, XHTML, and so on. In the following article we will use some basic knowledge of HTML, and before you learn this introductory tutorial, make sure you have a certain HTML base. Let's start by using DIV+CSS to design your Web page layout in one step.

All the design of the first step is the idea, well conceived, generally also need to use Photoshop or fireworks (hereinafter referred to as PS or FW) and other image processing software will need to make the interface layout simple structure, the following is my idea of the interface layout.

Below, we need to plan the layout of the page according to the idea map, carefully analyze the diagram, we can not find that the picture is broadly divided into the following parts:

1, the top part, which also includes a logo, menu and a picture of banner;
2, the content part can be divided into the side bar, the main content;
3, the bottom, including some copyright information.
With the above analysis, we can easily layout, we design layers such as:

On the basis of this, I draw an actual page layout diagram to illustrate the nesting relationships of layers, which makes it easier to understand them.

The div structure is as follows:
│body {}/* This is an HTML element, specifically I do not explain */
└ #Container {}/* page layer Container */
├ #Header {}/* Page header */
├ #PageBody {}/* page body */
│ ├ #Sidebar {}/* Sidebar sidebar */
│└ #MainBody {}/* Main content */
└ #Footer {}/* page bottom */

Now that the page layout and planning have been completed, the next thing we need to do is start writing HTML code and CSS.

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