HTML5+CSS3+JavaS教学幻灯片9

1、第9章 用CSS3美化表格和表单样式本章内容o 9.1 表格基本样式o 9.2 CSS3与表单o 9.3 综合实例1隔行变色o 9.4 综合实例2表格图文网页布局o 9.5 综合实例3变色表格o 9.6 综合实例4登录表单o 9.7 综合实例5注册表单9.1 表格基本样式o 9.1.1 表格边框样式o 9.1.2 表格边框宽度o 9.1.3 表格边框颜色9.1.1 表格边框样式o可以使用CSS3的border属性及衍生属性，和border-collapse属性对边框进行修饰，其中border属性表示对边框进行样式、颜色和宽带设置，从而达到提高样式效果的目的，这个属性前面已经介绍过了，其使用方法

2、和前面一模一样，只不过修饰的对象变换了。oborder-collapse属性主要用来设置表格的边框是否被合并为一个单一的边框，还是像在标准的HTML中那样分开显示。其语法格式为：border-collapse : separate | collapse。o实例：9.1.html9.1.2 表格边框宽度o虽然使用HTML标记的描述border也能提高表格的宽度，但我们还是推荐使用CSS属性设置边框宽度。使用border-width边框宽度进行设置，从而提高显示样式。如果需要单独设置某一个边框宽度，可以使用border-width的衍生属性设置，例如border-top-width和border-

3、left-width等。o实例：9.2.html9.1.3 表格边框颜色o表格颜色设置非常简单，通常使用CSS3属性color设置表格中文本颜色，使用background-color设置表格背景色。如果为了突出表格中的某一个单元格，还可以使用background-color设置某一个单元格颜色。o实例：9.3.html9.2 CSS3与表单o 9.2.1 美化表单中的元素o 9.2.2 美化提交按钮o 9.2.3 美化下拉菜单9.2.1 美化表单中元素o表单中元素非常多而且杂乱，例如input输入框、按钮、下拉菜单、单选按钮和复选框等。当使用form表单将这些元素排列组合在一起的时候，其单纯的

4、表单效果非常简陋，这时设计者可以通过CSS3的相关样式，控制表单元素输入框和文本框等元素外观。o实例：9.4.html9.2.2 美化提交按钮o可以将一个输入框的上、左和右边框去掉，形成一个和签名效果一样的输入框，例如将按钮的四个边框去掉，只剩下文字超级链接一样的按钮。对表单元素边框定义，可以采用border-style、border-width和border-color及其衍生属性。如果要对表单元素背景色设置，可以使用background-color设置，其中将值设置为transparent（透明色）是最常见的一种方式。o实例：9.5.html9.2.3 美化下拉菜单oCSS3属性不仅可以控

5、制下拉菜单的整体字体和边框等，还可以对下拉菜单中的每一个选项设置背景色和字体颜色。对于字体设置可以使用font相关属性设置，例如font-size，font-weight等，对于颜色设置可以采用color和background-color属性设置等。o实例：9.6.html9.3 综合实例1隔行变色o分析需求o创建HTML，实现table表格o设置标题和表格基本样式o修饰td和th单元格o实现隔行变色o源文件分析：9.7.html9.4 综合实例2表格图文网页布局o分析需求o创建HTML页面，实现表格基本样式o修饰全局样式和表格o修饰行tr和单元格tdo源文件分析：9.8.html9.5 综合实例3变色表格o分析需求o创建HTML，实现table表格o修饰table表格和单元格o修饰标题o实现鼠标悬浮变色o源文件分析：9.9.html9.6 综合实例4登录表单o分析需求o创建HTML网页，实现表单o修饰标题和层o修饰输入框和按钮o源文件分