第13章+css美化表格和表单要点解析.ppt

第13章 css美化表格和表单 目录 本章学习目标： 了解表格和表单的使用 掌握基本的表格和表单布局方法 能够使用样式表进行表格和表单的美化 能够举一反三的灵活运用美化技巧 1 表格边框样式 表格边框样式对应的属性是border-style，这个属性用来设定边框边线的显示样式。 表格边框样式： !DOCTYPE HTML html head title表格边框样式/title /head style type=text/css .table_style { margin: 10px auto; /*外补白*/ padding:10px; /*内补白*/ border-style: dashed; /*表格边框样式*/ border-collapse: separate; /*边框是否被合并*/ } .table_style td { width:150px; /*单元格宽度*/ height: 100px; /*单元格高度*/ border-style:ridge; /*单元格边框样式*/ } /style 2 表格边框宽度 表格边框宽度对应的属性是“border-width”，我们可以根据需要调整表格边框宽度的大小。我们在上个代码基础上对表格进行修改，将表格的边框宽度设为20px，单元格边框宽度设为10px style type=text/css .table_style{ margin: 10px auto; /*外补白*/ padding:10px; /*内补白*/ border-style: ridge; /*表格边框样式*/ border-collapse: separate; /*边框是否被合并*/ border-width:20px; /*表格边框宽度*/ border-spacing: 10px; /*单元格间距*/ } .table_style td{ width:150px; /*单元格宽度*/ height: 100px; /*单元格高度*/ border-style:ridge; /*单元格边框样式*/ border-width:10px; /*单元格边框宽度*/ } /style 3 表格边框颜色 表格边框颜色的设置通过属性border-color来设定，比如：“border-color: #600;” style type=text/css .table_style{ margin: 10px auto; /*外补白*/ padding:10px; /*内补白*/ border-style: ridge; /*表格边框样式*/ border-collapse: separate; /*边框是否被合并*/ border-width:20px; border-spacing: 10px; /*单元格间距*/ border-color: #600; /*表格边框颜色*/ color: #0000FF; /*前景色*/ background: #FF6; /*背景色*/ } .table_style td{ width:150px; /*单元格宽度*/ height: 100px; /*单元格高度*/ border-style:ridge; /*单元格边框样式*/ border-width:10px; /*单元格边框宽度*/ border-color: #F90; /*单元格边框颜色*/ } /style 4 盒子阴影 盒子阴影通过属性box-shadow来实现的。 基本语法： box-shadow： x-offset y-offset blur || box-shadow 语法说明： “x-offset”表示阴影沿x轴水平偏移值（可取正负值）； “y-offset”表示阴影沿y轴垂直偏移值（可取正负值）； “blur”表示阴影模糊值； “box-shadow”表示阴影的颜色。 盒子阴影 !DOCTYPE HTML html head title盒子阴影/title /head style type=text/css .table_style{ margin: 10px auto; /*外补白*/ padding:20px 20px 20px; /*内补白*/ border-style: outset; /*表格边框样式*/ border-collapse: separate; /*边框是否被合并*/ border-width:20px; border-spaci