第章对表与表单应用CSS样式.ppt

* HTML与CSS前台页面设计 * HTML与CSS前台页面设计 第十章 HTML与CSS前台页面设计 对表格与表单应用CSS样式 第十章 对表格与表单应用CSS样式 HTML与CSS前台页面设计 本章要点 如何利用CSS样式构建美观的数据表格 CSS样式在表单中的应用 第十章 对表格与表单应用CSS样式 HTML与CSS前台页面设计 目录： 10.1 利用CSS样式构建美观的数据表格 10.2 CSS样式在表单中的应用 10.3 综合实例 1. 表格标记 （1） 有关标记 包括： table，td，caption ，thead，tbody，tfood ，col，colgroup 等。 10.1 利用CSS样式构建美观的数据表格 （2）表格中常用的属性 包括： 边框宽度、边框颜色、边框样式 、边框属性、填充间距 、宽度 、高度 、边框共享等。 10.1 利用CSS样式构建美观的数据表格 2.对表格应用样式 包括可以进行下面的一些设置： （1）表格和单元格宽度 （2）文本对齐 （3）边框 （4）边距设置 （5）背景设置 （6）标题和表头的处理 （8）标题摆放 （9）表格行的颜色交替 （10）不完全表格 （11）内部表格 （12）按列进行设置 （13）鼠标动态效果 10.1 利用CSS样式构建美观的数据表格 1. 表单标记 包括： form ，input ，fieldset ，legend ，label 等。 10.2 CSS样式在表单中的应用 2.表单布局 包括可以进行下面的一些设置： （1）格式对齐 （2）标签和输入框分两行显示 （3）增加排序 10.2 CSS样式在表单中的应用 3. 修饰表单 在给表单布局后，需要对表单的字体，颜色，边距等外观进行设置，使整个表单看起来更友好。 包括可以进行下面的一些设置： （1）设置fieldset （2）设置标题 （3）设置强调信息 （4）设置提示信息 （5）强调输入框 （6）输入框和按钮的特殊效果 10.2 CSS样式在表单中的应用 3. 复杂的表单布局 对于比较长和复杂的表单，表单上不仅有文本输入框，还会有单选框、下拉列表等。这个时候在布局的时候要考虑到各种元素的整体排放了。 包括可以进行下面的一些设置： （1）表单控件分组设置样式 （2）隐藏部分标签 10.2 CSS样式在表单中的应用 10.3 综合实例 HTML与CSS前台页面设计