css+div实现table布局
css代码
.table /**/ /*div table container*/
{
/**//*width:770px;*/
}
.row div /**/ /*div row cell*/
{
display:inline;
width:240px;
border-top:1px solid #C1BBAB;
border-left:1px solid #C1BBAB;
}
.header div /**/ /*div header cell*/
{
display:inline;
width:240px;
border-top:1px solid #C1BBAB;
border-left:1px solid #C1BBAB;
text-align:center;
background-color:#E0DDD5;
}
.lastcell /**/ /*last cell*/
{
border-right:1px solid #C1BBAB;
}
.header /**/ /*div table hearder*/
{
font:bold;
color:navy;
}
.grid_rw1clr div /**/ /*cell in grid_rw1clr*/
{
background-color: #FFFFFF;
}
.grid_rw2clr div /**/ /*cell in grid_rw1clr*/
{
background-color: #F9F8F6;
}
.row
{
font:normal 12px;
}
.lastrow div /**/ /*cell in last row*/
{
border-bottom:1px solid #C1BBAB;
}
style >
对每个cell设置border-left，border-top,这样的单元格拼成行，仅仅缺少最后一格右边框和最后一行的底边框，这些就需要特殊处理，所以另外定义两个class：lastcell和lastrow来处理，最后拼出来的table边框就不会有重叠。
class：grid_rw1clr，grid_rw2clr实现交替色
Css Table效果
header(1,1)
header(1,2)
row(1,1)
row(1,2)
row(2,1)
row(2,2)
Html代码
header( 1 , 1 ) div > header( 1 , 2 ) div > div >
row( 1 , 1 ) div > row( 1 , 2 ) div > div >
row( 2 , 1 ) div > row( 2 , 2 ) div > div >
div >
接下来还需要实现：
系统介绍：YIXUNCMS中专专版是易迅软件工作室在中秋节来临之即推出的专题模板建站系统，使用增强版后台管控系统，板板设计符合节日特点。易迅软件工作室恭祝全国人民中秋快乐。特别提示：由于网站页面的不同设计，部分后台功能未在前端进行体现。系统特点：1、采用目前流行的PHP语言编写，底层采用超轻量级框架作为系统支撑；2、页面布局使用DIV+CSS技术，遵循WEB标准，及大提高页面的浏览速度；3、使用应
排序 拖拽 拉伸
立即学习“前端免费学习笔记（深入）”；
