1、第7章表格与表单1 1 考核知识点考核知识点表格创建及表格的样式设置。2 2 练习目标练习目标掌握创建表格的方法。掌握表格相关属性的设置。掌握合并单元格的方法。掌握、标签的用法。掌握、的常用属性。实验实验1 1 表格表格请做出以下效果:要求:(1)创建宽600px的表格,表格有7列,1行表格标题,卖家买家信用各占4行,中间有一空行,如效果图所示。(2)表格标题有灰色的背景。(3)评价中的好、中、差用给定的图片表示。3 3 实验内容及要求实验内容及要求实验实验1 1 表格表格结构分析:创建表格首先要分析表格有多少行列,表格的行列以最大数算,然后通过合并单元格,制作出各种效果的表格。本例从效果图可
2、以分析出,表格有7列,10行,中间的空白行可通过合并一行单元格制作出来,“卖家信用”和“买家信用”所占单元格是通过纵向合并单元格就可以制作出来。样式分析:(1)设置表格的样式进行整体控制,需对表框的宽度、外边距样式进行设置。(2)设置表题的背景及单元格的边框、文字对齐样式。(3)设置中间行无边框,制作出空行。4 4 实验分析实验分析实验实验1 1 表格表格1 1 考核知识点考核知识点表单、控件、控件、控件、用CSS控制表单及表单元素的样式。2 2 练习目标练习目标掌握表单的构成。掌握标签的用法及相关属性的设置。掌握input控件中的单行文本输入框、密码输入框、复选框、文件域、按钮的属性设置及使
3、用方法。掌握、等控件的属性设置及使用方法。掌握标签的属性设置及使用方法。熟悉表格布局的。实验实验2 2 宝贝宝贝发布表单发布表单请做出以下效果:要求:(1)要求运用表格和表单组织页面。(2)跟根需要录入的信息特点,选择对应的控制制作。3 3 实验内容及要求实验内容及要求实验实验2 2 宝贝宝贝发布表单发布表单结构分析:从效果图可以看出界面整体包在一个大盒子中,内容分可以分为上面的标题和下面的表单两部分。其中表单部分排列整齐,由左右两部分构成,左边为提示信息,右边为对应的表单控制。表单部分可以表格来布局,需要定义一个7行2列的表格。宝贝标题、尺寸、宝贝图片、提交及重置按钮用标签定义;宝贝卖点需要录入多行信息,通过控件定义多行文本框;品牌用下拉列表选择,控件定义。样式分析:(1)通过最外层的大盒子页面进行整体控制,需要对其设置高度、宽度、边框、外边距样式。(2)设置标题字体大小及下内边距控制标题的位置。(3)设置左侧提示信息列的宽度及对齐样式。(4)对部分控件进行的样式设置,调整控件的布局效果。4 4 实验分析实验分析实验实验2 2 宝贝宝贝发布表单发布表单