During this time, I checked back the previous CSS tutorials and found that my CSS level was not greatly improved .... depressing .... so let's create an instance, and we'll do it ourselves. I have not yet thought about how to scale the service. Here I am working on the effect of horizontal scaling. I only blame myself for being limited in ability. Let's get to the basics first. I used PS to draw a picture, such:
The following is the cut graph:
Actual layout:
CTRL + ALT + Shift + s output.
View the output page and check the code again:
<Table width = 188 border = 0 cellpadding = 0 cellspacing = 0>
<Tr>
<TD>
</TD>
<TD>
</TD>
<TD>
</TD>
</Tr>
<Tr>
<TD>
</TD>
<TD>
</TD>
<TD>
</TD>
</Tr>
<Tr>
<TD>
</TD>
<TD>
</TD>
<TD>
</TD>
</Tr>
</Table>
If you want to save trouble, you can simply use this table, or nest the table code into the Div. You can also use this Div layout .....
Unfortunately, I was born to find myself ....
The following is the method of separating the structure layer from the presentation layer of the self-seeking structure layer:
1 '99-square lattice low the width and height of the pictures in each TD:
LT: 7 24 (01.jpg) CT: 172 24 (02.jpg) RT: 9 24 (03.jpg)
LC: 7 252(04.jpg) CC: 172 252(05.jpg) RC: 9 252(06.jpg)
LB: 7 7 (07.jpg) Cb: 172 7 (08.jpg) RB: 9 7 (09.jpg)
(Of course, it can also be simplified, personal problems)
2 'compile the div-type jiugongge (you can create a new document or add it to this document for personal issues)
I will first split it into three columns, and then divide it in the column.
Mine is like this:
<Div id = "layout">
<Div id = "Left">
<Div id = "LT"> </div> <Div id = "LC"> </div>
<Div id = "LB"> </div>
</Div>
<Div id = "center">
<Div id = "CT"> </div>
<Div id = "cc"> </div>
<Div id = "CB"> </div>
</Div>
<Div id = "right">
<Div id = "RT"> </div> <Div id = "RC"> </div>
<Div id = "rb"> </div>
</Div>
</Div> 3 'css: Initialize some rules first: * {margin: 0; padding: 0; Border: none;} and then define: # layout {
Width: 188px;
Height: 283px; // The height can be undefined.
Position: relative; // This positioning is very important. The left and right sides must have this foundation.} Well, the core principle of "three-column center width adaptive" is applied, locate left center right # layout # Left {
Width: 7px;
Height: 283px;
Position: absolute;
Top: 0;
Left: 0;
}
# Layout # right {
Width: 9px;
Height: 283px;
Position: absolute;
Top: 0;
Right: 0 ;}
# Layout # center {
Width: 172px;
Height: 283px;
Margin-left: 7px;
Margin-Right: 9px;
} The next step is to transfer the table style to CSS, because the length and height definitions are the same as those embedded in the Table. Lt lb lc rt rc rb definitions # layout # left # lt {width: 7px; height: 24px; Background-image: URL (images/nine_01.gif );}
# Layout # left # LC {width: 7px; Height: 252px; Background-image: URL (images/left.gif); bakcground-repeat: Repeat-y ;}
# Layout # left # LB {width: 7px; Height: 7px; Background-image: URL (images/nine_07.gif );
Background-repeat: No-Repeat;} # layout # right # RT {width: 9px; Height: 24px; Background-image: URL (images/nine_03.gif );}
# Layout # right # RC {width: 9px; Height: 252px; Background-image: URL (images/right.gif); bakcground-repeat: Repeat-y ;}
# Layout # right # RB {width: 9px; Height: 7px; Background-image: URL (images/nine_09.gif); background-repeat: No-Repeat ;} # layout # center # CT {width: 172px; Height: 24px;
Background-image: URL (images/nine_02.gif );
Background-position: Right top;
Background-repeat: No-Repeat;
}
# Layout # center # cc {width: 172px; Height: 252px ;}
# Layout # center # CB {width: 172px; Height: 7px; Background-image: URL (images/nine_08.gif); background-repeat: Repeat-X ;} in this way, the nine cells are made, but this only transfers the embedded style of the table to CSS, which is a fixed nine cells. Compared with the table, the implementation form is only different. To achieve horizontal scaling, I made the following changes to the Code: # layout # center {
Width: 172px; // Delete this line and omit the width defined by the center.
Height: 283px;
Margin-left: 7px;
Margin-Right: 9px;
} # Layout # center # CT {width: 172px; // change the width to the percent format, width: 100%; Height: 24px;
Background-image: URL (images/nine_02.gif );
Background-position: Right top;
Background-repeat: No-Repeat;
}
# Layout # center # cc {width: 172px; // change the width to the percent format, width: 100%; Height: 252px ;}
# Layout # center # CB {width: 172px; // change the width to the percent format, width: 100%; Height: 7px; Background-image: URL (images/nine_08.gif ); background-repeat: Repeat-X;} Now, the Center automatically scales as long as the layout width is modified. in this way, the nine cells of horizontal scaling are achieved.
