[转]我自己的css 九宫格

这段时间看回以前入门的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 就会自动进行伸缩.这样就实现了横向伸缩的九宫格