教学幻灯片HTML5CSS3JavaScript 网页设计案例课堂 网页设计 网站设计 网页设计入门 自学教程 教材 html5标准 计算机开发 附光盘9

第9章用CSS3美化表格和表单样式,本章内容,9.1表格基本样式9.2CSS3与表单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.2CSS3与表单,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网页，实现表单修饰标题和层修饰输入框和按钮源文件分