HTML5+CSS3+JavaS教学幻灯片9.pptVIP

第9章 用CSS3美化表格和表单样式 本章内容 9.1 表格基本样式 9.2 CSS3与表单 9.3 综合实例1—隔行变色 9.4 综合实例2—表格图文网页布局 9.5 综合实例3—变色表格 9.6 综合实例4—登录表单 9.7 综合实例5—注册表单 9.1 表格基本样式 9.1.1 表格边框样式 9.1.2 表格边框宽度 9.1.3 表格边框颜色 9.1.1 表格边框样式 可以使用CSS3的border属性及衍生属性，和border-collapse属性对边框进行修饰，其中border属性表示对边框进行样式、颜色和宽带设置，从而达到提高样式效果的目的，这个属性前面已经介绍过了，其使用方法和前面一模一样，只不过修饰的对象变换了。 border-collapse属性主要用来设置表格的边框是否被合并为一个单一的边框，还是像在标准的HTML中那样分开显示。其语法格式为：border-collapse : separate | collapse。 实例：9.1.html 9.1.2 表格边框宽度 虽然使用HTML标记的描述border也能提高表格的宽度，但我们还是推荐使用CSS属性设置边框宽度。使用border-width边框宽度进行设置，从而提高显示样式。如果需要单独设置某一个边框宽度，可以使用border-width的衍生属性设置，例如border-top-width和border-left-width等。 实例：9.2.html 9.1.3 表格边框颜色 表格颜色设置非常简单，通常使用CSS3属性color设置表格中文本颜色，使用background-color设置表格背景色。如果为了突出表格中的某一个单元格，还可以使用background-color设置某一个单元格颜色。 实例：9.3.html 9.2 CSS3与表单 9.2.1 美化表单中的元素 9.2.2 美化提交按钮 9.2.3 美化下拉菜单 9.2.1 美化表单中元素 表单中元素非常多而且杂乱，例如input输入框、按钮、下拉菜单、单选按钮和复选框等。当使用form表单将这些元素排列组合在一起的时候，其单纯的表单效果非常简陋，这时设计者可以通过CSS3的相关样式，控制表单元素输入框和文本框等元素外观。 实例：9.4.html 9.2.2 美化提交按钮 可以将一个输入框的上、左和右边框去掉，形成一个和签名效果一样的输入框，例如将按钮的四个边框去掉，只剩下文字超级链接一样的按钮。对表单元素边框定义，可以采用border-style、border-width和border-color及其衍生属性。如果要对表单元素背景色设置，可以使用background-color设置，其中将值设置为transparent（透明色）是最常见的一种方式。 实例：9.5.html 9.2.3 美化下拉菜单 CSS3属性不仅可以控制下拉菜单的整体字体和边框等，还可以对下拉菜单中的每一个选项设置背景色和字体颜色。对于字体设置可以使用font相关属性设置，例如font-size，font-weight等，对于颜色设置可以采用color和background-color属性设置等。 实例：9.6.html 9.3 综合实例1—隔行变色 分析需求 创建HTML，实现table表格 设置标题和表格基本样式 修饰td和th单元格 实现隔行变色 源文件分析：9.7.html 9.4 综合实例2—表格图文网页布局 分析需求 创建HTML页面，实现表格基本样式 修饰全局样式和表格 修饰行tr和单元格td 源文件分析：9.8.html 9.5 综合实例3—变色表格 分析需求 创建HTML，实现table表格 修饰table表格和单元格 修饰标题 实现鼠标悬浮变色 源文件分析：9.9.html 9.6 综合实例4—登录表单 分析需求 创建HTML网页，实现表单 修饰标题和层 修饰输入框和按钮 源文件分析：9.10.html 9.7 综合实例5—注册表单 分析需求 构建HTML页面，实现基本表单 修饰全局样式和表单样式 修饰段落、输入框和按钮 源文件分析：9.11.html