The old web design layout

Nine Sudoku is an ancient design, its most basic performance is actually like a three rows of three columns of the table. In fact, it was originally in the Windows C/s structure used more, such as we often see a form in the software, in fact, is a typical application of nine Sudoku, because the form needs to stretch in eight directions, so in the C/S software in a large number of the use of this technology to layout design. In the B/s system in the current society, this layout is gradually used by some web designers in the Web page, the most used is in the Corner box layout application.

The following illustration shows the basic layout of the Nine Sudoku:

As you can see from the diagram above, each row consists of three columns, where the blue squares are the top corners, the four blocks are wide and high fixed, and the yellow four areas are four edges, which are tiled horizontally or vertically, and the middle Orange area is the main area where the content is loaded.

Such a structure is most conducive to the content area with a different screen resolution and the automatic extension of the height, this structure is also the Web designer is the most wanted a layout structure, it is smart and calm.

Let's implement it here:

structure Layer :

Because it has to adapt to the eight-direction stretching, so each direction is implemented with a DIV, one less flexibility is not enough. So according to this principle, we can get the following structure:

Style layer :

According to the structure, we can write the basic style. The basic principle of implementation is to use the total container. box to set the relative positioning and set the Overflow:hidden, so that all the places beyond it are cut, and the inside of the eight-direction div set to absolute positioning, and their z-index set to 2, Then set the four corner containers to Four Corners respectively.

. box{overflow:hidden;position:relative;}
. T_l,.t_m,.t_r,.b_l,.b_m,.b_r,.m_l,.m_r {Position:absolute;z-index:2}

<div class= "box" >
<div class= "t_l" ></div>
<div class= "T_m" ></div>
<div class= "T_r" ></div>

<div class= "m_l" ></div>
<div class= "m_m" > Content area </div>
<div class= "M_r" ></div>

<div class= "b_l" ></div>
<div class= "B_m" ></div>
<div class= "B_r" ></div>
</div>