這段時間看回以前入門的CSS教程，發覺自已的CSS水平沒太大的提高....鬱悶....那麼就做一個執行個體吧，自己也來動手做做九宮格吧.我還沒有想到怎麼做伸縮的九宮格，在這裡我做的是可以橫向伸縮的效果。只怪自己能力有限，先打打基礎吧。我先用PS畫了一個圖，如：
跟著就是切圖:
實際的布局：
CTRL+ALT+SHIFT + S 輸出。
瀏覽輸出的這個網頁吧，再來看看代碼:
<TABLE WIDTH=188 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<IMG SRC="images/nine_01.gif" WIDTH=7 HEIGHT=24 ALT=""></TD>
<TD>
<IMG SRC="images/nine_02.gif" WIDTH=172 HEIGHT=24 ALT=""></TD>
<TD>
<IMG SRC="images/nine_03.gif" WIDTH=9 HEIGHT=24 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/nine_04.gif" WIDTH=7 HEIGHT=252 ALT=""></TD>
<TD>
<IMG SRC="images/nine_05.gif" WIDTH=172 HEIGHT=252 ALT=""></TD>
<TD>
<IMG SRC="images/nine_06.gif" WIDTH=9 HEIGHT=252 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/nine_07.gif" WIDTH=7 HEIGHT=7 ALT=""></TD>
<TD>
<IMG SRC="images/nine_08.gif" WIDTH=172 HEIGHT=7 ALT=""></TD>
<TD>
<IMG SRC="images/nine_09.gif" WIDTH=9 HEIGHT=7 ALT=""></TD>
</TR>
</TABLE>
如果想省事的話，直接用這個TABLE 就完事了，或者將這個TABLE的代碼嵌套到DIV中，利用這個DIV布局也可以.....
可惜我是個天生自己找碴的人....
那麼下面就是純屬自個找碴的結構層和表現層分離的做法：
1`九宮格式記低每個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）
（當然還可以精簡的，個人問題咯）
2`編寫 DIV 式九宮格（可以建立文檔，也可以在這個文檔中加寫，個人問題）
我先分三列，再在列內再分
我的是這樣的：
<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編寫先初始一些規則：* {margin:0;padding:0;border:none;} 然後對layout定義:#layout{
width:188px;
height:283px;//高度可以不強加定義
position:relative;//這個定位是非常重要，後面 LEFT 跟 RIGHT 就必須有這個做基礎} 好了，應用“三列 置中寬度自適應”的核心原則,對 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;
}接下來其實就是將表格的樣式轉移到CSS上，因為長度高度等定義跟表格內嵌的一樣lt lb lc rt rc rb 定義 #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;} 這樣就做出了九宮格了，但這僅讓表格的內嵌樣式轉移到CSS中，是一個固定的九宮格，相對於表格來說，只是實現形式不同而已。為了達到可以橫向伸縮，我對代碼做了如下的修改: #layout #center{
width:172px;//刪除這行，略去CENTER 對寬度的定義
height:283px;
margin-left:7px;
margin-right:9px;
}#layout #center #ct{width:172px;//將寬度改為百分比形式，width:100%;height:24px;
background-image:url(images/nine_02.gif);
background-position:right top;
background-repeat:no-repeat;
}
#layout #center #cc{width:172px;//將寬度改為百分比形式，width:100%;height:252px;}
#layout #center #cb{width:172px;//將寬度改為百分比形式，width:100%;height:7px;background-image:url(images/nine_08.gif);background-repeat:repeat-x;} 現在，只要對LAYOUT 的寬度進行修改，CENTER 就會自動進行伸縮.這樣就實現了橫向伸縮的九宮格
