13.1 CSS Layout Concept

CSS layout is a very new layout concept, completely different from the traditional typesetting habits. It will first place the page on the whole <div> mark the tiles. The blocks are then positioned in CSS, and the corresponding inner-guest is added to each block. CSS layout of the page, update is very easy, even the page topology, can be modified by modifying the CSS properties to reposition. In this chapter, we will make a thorough analysis of the fixed-width page layout, and give a series of examples, so that readers can grasp these layout methods freely. In the past, when using the table layout, at the beginning of the design phase, you need to determine the layout of the page. Due to the use of tables for layout, once determined can no longer change, so there is a great flaw. The use of CSS layout is completely different, the first thing designers consider is not how to split the page, but from the logical relationship between the content of the page to distinguish the level and importance of the content. Then according to the logical relationship, the content of the Web page using div or other appropriate HTML tags to organize, and then consider how the form of the Web page to adapt to the content. Lodidance.com In fact, even a very complex web page, is a module of a module gradually built up. Let's take a look at some of the most visited sites for example and see how they are laid out. First, the homepage of MSN http://cn.msn.com/shows the homepage of Microsoft's msn.com. MSN.com is the world's Top 3 website with a wide range of content. From a page layout perspective, it's not complicated. You can easily divide the area. This site is a fixed content width, horizontal center placed page, the top is a set of banner content, it is divided into the left and right two columns, independent, non-interference. Each column is arranged in sequence with a variety of graphic content. The bottom is the footer, which is not shown in the picture, but basically all sites have a footer, the copyright information and other content. Figure 1 Abstract for the "1-2-1" layout Such a page can simply be abstracted to the page style shown in 1. For this page layout we have actually made one, that is, in the previous 11.4 section to learn to make a rounded box, the realization of this form of the page. For ease of salutation, this tutorial uses a uniform naming style, which is called the "1-2-1" layout, and the "minus sign" represents a vertical arrangement, that is, the top is a column, which is divided into two columns, and the following is the layout of the L column. Let's list the page layouts of several famous sites. The analysis of some simple sins, so that the reader first has a perceptual understanding, and then the specific layout of the implementation of the form of the method. Second, yahoo.com Yahoo.com is currently the number one website (alexa.com's ranking data), but its pages are very concise. Its abstraction of the page layout form is a typical "1-3-1" layout. http://cn.yahoo.com/ Third, times.com Times.com is also a well-known site for news classes. Because of the wide variety of information content, it adopts the layout form of "1-4-1", and the width of each column is different, adapting to different categories of content. http://www.nytimes.com/ Iv. CNN.com The cnn,com uses a slightly different form than the previous layout methods. Can be seen at the top of the page, is still the form of 1 columns, it is divided into two columns, Zoquan right narrow, and then, the left part is divided into two columns. http://www.cnn.com/ So what do we call this approach, in this tutorial, which is called "1-((1+2) +1)-1" layout form. The plus sign here indicates a horizontal split, with parentheses representing a combination. Therefore, the above name can be understood as the top 1 columns, it is divided into the left and right columns, where the left side of the column is a column, the lower side is two columns, the bottom side of the page is a single column. Readers can see that this notation is much simpler and more straightforward than the text description. Readers are asked to think about why this page is "1-((1-2) +1)-1" structure, not "1-2-3-1" structure. The answer is that if it is a "1-2-3-1" structure, there should be a split line across the page between the 2 and 3 columns, and there is no such divider in the circle, so it is not a "1-2-3-1" structure. Five, 163.com In front of a few foreign examples of the same station, the following to see the domestic 163.com home layout situation. The 163.com page is basically a two-column layout, but interspersed with a few single-column content, usually the place to publish ads. http://www.163.com/ So this structure can be written in the "1-(2-1) *" Structure, where the asterisk indicates repeated 1 or more times. In order to enable readers to quickly master the analysis method of the page structure, readers should consider their structural expressions. One of the structural expressions should be "2-1-(1+ (2-1))" and the other structure expression should be "1-((2-1-2) +1)-1". Now that you know some of the common layout structures, you can begin to learn how to make pages of various layouts in a formal way. Note: The purpose of this chapter is to master How to lay out the object in full page, the parts of the page should be ready beforehand, otherwise a lot of code will be used for the local style, so it will be very difficult to learn. Therefore, in this chapter, a case based on a chapter of the round Corner box in the previous chapter 11th is used, in particular, a case with a border of different fixed widths in a rounded box, in which the rounded boxes implemented in the case can be conveniently embedded in any page. As a part of the page. Before studying this chapter, the reader must have mastered the production principle of the fillet frame and the use of the party to dispel. Some of the cases in this chapter are made up of a number of rounded boxes, causing the page to be very long, and if you are not familiar with the code in the Fillet box section, it will be difficult to analyze the code. Therefore, it is more effective to master the round-frame approach before learning this chapter. Click to download the 8th to 17th CSS Tutorial resource to return to the tutorial list of CSS Tutorial layout

Editor: Web Learning Network

This address: http://www.lodidance.com/css/jc/940.html