Div + CSS layout entry Tutorial 1
Making the Web, there are many terms, such as: CSS, HTML, DHTML, XHTML and so on. In the following article, we will use some of the basic knowledge of HTML, in your introductory tutorial learning this, make sure you already have a certain foundation of HTML. Below we begin step-by-step use of DIV + CSS web layout design it.
The first step is the design of all the idea of a good idea, in general we must also use PhotoShop or FireWorks (hereinafter referred to PS or FW), picture processing software will need to produce a simple interface layout of the structure drawn, the following is my idea of good interface layout.
Below, we need to be thinking about planning map to the layout of pages, a detailed analysis of the plan, we can easily find that picture is broadly divided into the following sections:
1, the top part of which includes the LOGO, MENU Banner and a picture;
2, which can be divided into the side of the column, the main content;
3, at the bottom, including some copyright information.
With the above analysis, we will be very easy layout, we design of the following plans:
Based on the map, I drew a real page layout, elaborate layers of nested relations, this understanding will be up more simple.
DIV structured as follows:
│ body () / * This is an HTML element, I do not specifically described * /
â”” Container # () / * pages of containers * /
├ # Header () / * head pages * /
├ # PageBody () / * * main pages /
│ ├ Sidebar # () / * * the side column /
│ └ # MainBody () / * main contents * /
â”” # Footer () / * the bottom of the page * /
Thus, the page layout and planning has been completed, then we have to do is to start writing HTML code and CSS.
Tags: CSS DIV, div class, div css, div css Guide, div css layout, div location
Leave a Reply