CSS表格和表单

透明 按钮
教育创造学生价值
Байду номын сангаас
教育创造学生价值
Neusoft Institute of Information
1.2 表格的颜色
• CSS属性：color、background-color 属性： 属性 、 • 其中，color属性设置表格中文字的颜色，通过 属性设置表格中文字的颜色， 其中， 属性设置表格中文字的颜色 通过background-color 属性设置表格的背景颜色。 属性设置表格的背景颜色。 • 实例：11-2.html 实例： • 这些设置与文字本身的 这些设置与文字本身的CSS设置完全相同，与页面背景的设置也完 设置完全相同， 设置完全相同 全一样。 全一样。
教育创造学生价值
Neusoft Institute of Information
2.3 练习——表格课表
• 根据这学期的课程安排，利用CSS表格样式设计一个自己的课表（ 根据这学期的课程安排，利用 表格样式设计一个自己的课表（ 表格样式设计一个自己的课表 周课表）： 周课表）： 1.表格居中，有边框和标题，标题左对齐 表格居中， 表格居中 有边框和标题， 2.单元格有边框，边框之间没有空隙。 单元格有边框， 单元格有边框 边框之间没有空隙。 3.不同课程的单元格文字字体、颜色和背景色不同 不同课程的单元格文字字体、 不同课程的单元格文字字体 4.注重颜色搭配和页面美观 注重颜色搭配和页面美观
教育创造学生价值
Neusoft Institute of Information
2.2 鼠标经过时变色的表格
• 如果数据行能够动态地根据鼠标来变色，会使页面充满生机，减少 如果数据行能够动态地根据鼠标来变色，会使页面充满生机， 阅读疲劳。 阅读疲劳。 • 对于 对于Firefox浏览器来说，仅仅通过 浏览器来说， 便可以实现该效果， 浏览器来说 仅仅通过CSS便可以实现该效果，只需要 便可以实现该效果 标记添加如下代码： 为<tr>标记添加如下代码： 标记添加如下代码 • .datalist tr:hover{ • background-color:#c4e4ff; /*动态变色 动态变色*/ 动态变色 • } • 以上代码直接调用 以上代码直接调用<tr>标记的伪类别 标记的伪类别hover来实现变色效果，但IE浏 来实现变色效果， 标记的伪类别 来实现变色效果 浏 览器并不支持，因此必须采用JavaScript的配合。 的配合。 览器并不支持，因此必须采用 的配合 • 实例：11-5.html 实例：
教育创造学生价值
Neusoft Institute of Information
1.3 表格的边框
• CSS属性：border、border-collapse 属性： 属性 、 • 在CSS中通过 中通过border属性设置表格边框，设置方法跟图片边框完全 属性设置表格边框， 中通过 属性设置表格边框 一样。特别要注意的是，当仅设置表格的边框时， 一样。特别要注意的是，当仅设置表格的边框时，单元格不会有任 何的边框。只有对单元格单独设置边框时，单元格才会有边框。 何的边框。只有对单元格单独设置边框时，单元格才会有边框。 • 另外，默认情况下，单元格的边框之间会有空隙，这时需要设置 另外，默认情况下，单元格的边框之间会有空隙， CSS属性 CSS属性border-collapse，使边框重叠在一起。 属性border-collapse，使边框重叠在一起。 • 实例：11-3.html 实例：
教育创造学生价值
Neusoft Institute of Information
4.3 练习——直接输入的excel表格
• ftp课堂练习下载模拟 课堂练习下载模拟excel表格，结合 表格， 控制的表格和表单， 课堂练习下载模拟 表格 结合CSS控制的表格和表单，实 控制的表格和表单 现类似excel表格的效果，每个单元格中可以直接输入内容，最后一 表格的效果， 现类似 表格的效果 每个单元格中可以直接输入内容， 并提交。 并提交。
教育创造学生价值
Neusoft Institute of Information
3.1 设置表单基本样式
• 利用 利用CSS对标记的控制，同样可以对表单添加简单的样式风格，包 对标记的控制，同样可以对表单添加简单的样式风格， 对标记的控制 括边框、背景色、高度、宽度等，设置方法跟前面的相同。 括边框、背景色、高度、宽度等，设置方法跟前面的相同。 • 实例：11-6.html 实例： • 仔细观察会发现单选项和复选框对于边框的显示效果，在IE和 仔细观察会发现单选项和复选框对于边框的显示效果， 和 Firefox浏览器中有明显的区别。解决办法是分别给具体的各项添加 浏览器中有明显的区别。 浏览器中有明显的区别 类别属性，进行单独的设置。这种方法在实际设计中经常使用。 类别属性，进行单独的设置。这种方法在实际设计中经常使用。 • 实例 实例11-7.html
Neusoft Institute of Information
CSS表格和表单 第11 章 CSS表格和表单
王会
wangh-wh@neusoft.com
教育创造学生价值
Neusoft Institute of Information
1.用CSS设置表格样式
教育创造学生价值
Neusoft Institute of Information
教育创造学生价值
Neusoft Institute of Information
2.CSS表格实例
教育创造学生价值
Neusoft Institute of Information
2.1 隔行变色的表格
• 采用隔行变色的表格，使数据一目了然，不会感到凌乱。 采用隔行变色的表格，使数据一目了然，不会感到凌乱。 • 在CSS中实现隔行变色十分简单，只需要给偶数行的<tr>标记都添 中实现隔行变色十分简单，只需要给偶数行的 中实现隔行变色十分简单 标记都添 加上相应的类型就可以了。 加上相应的类型就可以了。 • 实例：11-4.html 实例：
教育创造学生价值
Neusoft Institute of Information
2.3 课后练习——表格日历
• 通过 通过CSS设定表格的属性，实现日历效果。 设定表格的属性，实现日历效果。 设定表格的属性
教育创造学生价值
Neusoft Institute of Information
3.用CSS设置表单样式
1.1 表格标题的位置
• CSS属性：caption-side 属性： 属性 • 该属性可以调整表格标题的位置为上、下、左、右，但是只在 该属性可以调整表格标题的位置为上、 Firefox、iE8及以上有效，IE8以下不支持。 及以上有效， 以下不支持 以下不支持。 、 及以上有效 • 实例：11-1.html 实例：
教育创造学生价值
Neusoft Institute of Information
4.2 七彩的下拉菜单
• CSS不仅可以控制下拉菜单的整体字体和边框等，对于下拉菜单中 不仅可以控制下拉菜单的整体字体和边框等， 不仅可以控制下拉菜单的整体字体和边框等 的每一个选项同样可以设置背景色和文字颜色。例如， 的每一个选项同样可以设置背景色和文字颜色。例如，当需要在下 拉菜单中选择相应的颜色时，有这种设置就显得非常方便。 拉菜单中选择相应的颜色时，有这种设置就显得非常方便。 • 关键的方法是给下拉菜单的每一个 关键的方法是给下拉菜单的每一个<option>标记都设置单独的文字 标记都设置单独的文字 颜色和背景颜色。 颜色和背景颜色。 • 实例：11-9.html 实例：
教育创造学生价值
Neusoft Institute of Information
4.CSS表单实例
教育创造学生价值
Neusoft Institute of Information
4.1 像文字一样的按钮
• 通过 通过CSS设置，可以将按钮变得跟普通文字一样。关键在于将按钮 设置，可以将按钮变得跟普通文字一样。 设置 的背景色设置为透明“ 的背景色设置为透明“transparent”，这样无论页面 ” 这样无论页面body的背景 的背景 色如何修改，按钮的背景色都会发生相应的变化。 色如何修改，按钮的背景色都会发生相应的变化。最后再单独设置 输入框和按钮的边框效果即可。 输入框和按钮的边框效果即可。 • 实例：11-8.html 实例：