DIV+CSS系列课程 (二) DIV+CSS模式介绍

 

DIV+CSS 模式   中文理解是 层+样式表模式
与它相对的是TABLE模式   中文理解是表格模式

两者的区别:
TABLE模式  以前都是用TABLE模式 这种模式简单 容易入门 但是这种模式会造成代码很多 维护困难 实例如下:
<table >
<tr>
<td>我是个表格的单元格 呵呵</td>
<td>
 <table>
 <tr>
 <td>我是个表格的单元格里嵌套的表格中的单元格 呵呵</td>
 </tr>
 </table>
</td>
</tr>
</table>

这种模式每个单元格的样式 如 宽　高　浮动　背景　距离等等都需要加上这些属性 实例如下:
<table style="width: 950px;background-color: #EEEEEE;">
<tr>
<td style="width:50px;height:30px;border: 1px solid #b0de62;font-size: 12px;background-color: #FF0000;">我是个表格的单元格 我的宽度是50像素 高度是30像素 呵呵</td>
<td style="width:50px;height:30px;border: 1px solid #b0de62;font-size: 12px;background-color: #FF0000;">我是个表格的单元格 我的宽度是50像素 高度是30像素 呵呵</td>
<td style="width:50px;height:30px;border: 1px solid #b0de62;font-size: 12px;background-color: #FF0000;">我是个表格的单元格 我的宽度是50像素 高度是30像素 呵呵</td>
</tr>
</table>

这种情况下 一个样式 如果单元格需要用的话 得把这些属性都复制给它 造成代码冗余

DIV+CSS模式  这种模式下框架和样式分离 简单实例如下:

<div class="d1">我是个层 我和刚才的格式样式一样喔</div>
<div class="d1">我是个层 我和刚才的格式样式一样喔</div>
<div class="d1">我是个层 我和刚才的格式样式一样喔</div>

在CSS文件中输入 (如何建一个CSS文件 请看第一节)
.d1
{
width:50px;
height:30px;
border: 1px solid #b0de62;
font-size: 12px;
background-color: #FF0000;
}

预览一下看看 效果是不是一样?呵呵 同样的样式 使用table模式和DIV+CSS模式的代码量大大减少 当然不是说表格一无是处 而是要理解它们两种模式的优劣 在适当的时候使用不同的样式
如:我需要显示一个表中的数据 这时可以就可以使用表格这种样式来显示