我自己的css 九宫格

时间：2010-11-01 来源：Sophie_Wang

实际的布局：

CTRL+ALT+SHIFT + S 输出。

浏览输出的这个网页吧，再来看看代码:

如果想省事的话，直接用这个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;
//高度可以不强加定义
position:relative;//这个定位是非常重要，后面 LEFT 跟 RIGHT 就必须有这个做基础 } 好了，应用“三列居中宽度自适应”的核心原则,对 left center right 定位 #layout #left{
width:7px;

position:absolute;
top:0;
left:0;
}
#layout #right{
width:9px;

position:absolute;
top:0;
right:0; }
#layout #center{
width:172px;

margin-left:7px;
margin-right:9px;
} 接下来其实就是将表格的样式转移到CSS上，因为长度高度等定义跟表格内嵌的一样 lt lb lc rt rc rb 定义 #layout #left #lt{width:7px;background-image:url(images/nine_01.gif);}
#layout #left #lc{width:7px;background-image:url(images/left.gif);bakcground-repeat:repeat-y;}
#layout #left #lb{width:7px;background-image:url(images/nine_07.gif);
background-repeat:no-repeat;} #layout #right #rt{width:9px;background-image:url(images/nine_03.gif);}
#layout #right #rc{width:9px;background-image:url(images/right.gif);bakcground-repeat:repeat-y;}
#layout #right #rb{width:9px;background-image:url(images/nine_09.gif);background-repeat:no-repeat;}
#layout #center #ct{width:172px;
background-image:url(images/nine_02.gif);
background-position:right top;
background-repeat:no-repeat;
}
#layout #center #cc{width:172px;}
#layout #center #cb{width:172px;background-image:url(images/nine_08.gif);background-repeat:repeat-x;} 这样就做出了九宫格了，但这仅让表格的内嵌样式转移到CSS中，是一个固定的九宫格，相对于表格来说，只是实现形式不同而已。为了达到可以横向伸缩，我对代码做了如下的修改: #layout #center{
width:172px;//删除这行，略去CENTER 对宽度的定义

margin-left:7px;
margin-right:9px;
} #layout #center #ct{ width:172px;//将宽度改为百分比形式，width:100%;
background-image:url(images/nine_02.gif);
background-position:right top;
background-repeat:no-repeat;
}
#layout #center #cc{width:172px;//将宽度改为百分比形式，width:100%; }
#layout #center #cb{width:172px;//将宽度改为百分比形式，width:100%; background-image:url(images/nine_08.gif); background-repeat:repeat-x;} 现在，只要对LAYOUT 的宽度进行修改，CENTER 就会自动进行伸缩.这样就实现了横向伸缩的九宫格