第5章网页布局..ppt

5.4.1 表格＋CSS布局 返回本节 针对这个布局效果，传统的表格布局方法是创建一个3行1列的表格，然后直接设置表格和每个单元格的属性。表格＋CSS的布局方法不是这样。具体方法是，先创建一个3行1列的表格，表格和每个单元格的样式用CSS来控制，示意图如图5-60所示。 用left_top样式控制 用left_mid样式控制 用left_end样式控制 用left_tdbgall 样式控制表格 图5-60 CSS样式控制表格示意图 这里定义了4个CSS类选择符：.left_tdbgall、.left_top、.left_mid、.left_end，它们分别用来控制表格的样式和3个单元格的样式。 5.4.1 表格＋CSS布局 返回本节 下面详细介绍这个网页布局实例的制作方法。 1．创建CSS文件 （1）新建一个CSS文档，保存为5.4.1.css。单击“CSS样式”面板中的“新建CSS规则”按钮，弹出“新建CSS规则”对话框，在其中进行设置，具体情况如图5-61所示。 图5-61 新建.left_tdbgall样式 单击“确定”按钮进入“.left_tdbgall的CSS规则定义”对话框，在其中选择“分类”列表框中的“背景”，设置“背景颜色”为#666666（灰色）；然后选择“分类”列表框中的“方框”，设置宽和高分别为190像素和250像素，如图5-62所示。 图5-62 设置方框属性 5.4.1 表格＋CSS布局 返回本节 选择“分类”列表框中的“边框”，设置如图5-63所示。这样定义整个表格的边框为1个像素的绿色细实线。 图5-63 设置边框属性 完成CSS规则定义以后，单击“确定”按钮。这时文档窗口增加如下代码： /* 表格样式定义 */ .left_tdbgall { height: 250px;/*定义表格宽度*/ width: 190px;/*定义单元格高度*/ background-color: #666666;/*定义背景颜色为灰色*/ border: 1px solid #99CC00;/*定义表格边框为1像素绿色细线*/ } 5.4.1 表格＋CSS布局 返回本节 （2）按照同样的方法定义一个.left_top类选择符，这个CSS样式用来控制第一个单元格（顶部单元格）。代码如下： /* 顶部单元格背景、文字、段落格式等定义 */ .left_top { color: #FFFFFF; /*定义文字颜色*/ height: 30px; /*定义单元格高度*/ width: 190px; /*定义单元格宽度*/ text-align: left; /*定义段落对齐方式为左对齐*/ background-image: url(img/head.png); /*定义单元格背景图像*/ background-position: center; /*定义背景图像居中*/ background-repeat: no-repeat; /*定义背景图像不重复*/ padding-left:35px; /*设置方框中填充对象的左边距为20像素*/ font-size: 12px; /*定义文字大小*/ vertical-align: middle; /*定义文字在单元格垂直方向居中对齐*/ } 5.4.1 表格＋CSS布局 返回本节 （3）按照同样的方法定义一个.left_mid类选择符，这个CSS样式用来控制第二个单元格（中部单元格）。代码如下： /* 中部单元格背景、文字、段落格式等定义 */ .left_mid { padding: 5px; /*定义填充内容的边距*/ height: 200px; /*定义单元格高度*/ width: 190px; /*定义单元格宽度*/ font-size: 12px; /*定义文字大小*/ background-color: #CCCCCC; /*定义背景颜色为浅灰色*/ color: #000000; /*定义文字颜色*/ list-style-position: inside; /*定义列表位置为内部*/ list-style-image: url(img/s_left.gif); /*定义列表项前面的图标*/ } 5.4.1 表格＋CSS布局 返回本节 （4）按照同样的方法定义一个.left_end类选择符，这个CSS样式用来控制第三个单元格（底部单元格）。代码如下所示。 .left_end { height:20px; /*定义单元格高度*/ width: 190px; /*定义单元格宽度*/ font-size: 1