《JavaScript动态网页设计》课件 8 网站平台表单的验证.pptx

项目8网站平台表单的验证主讲：***2024年12月18日JavaScript动态网页设计1子项目

2024年12月18日JavaScript动态网页设计2学习任务 任务1用CSS制作表格 任务2用DOM动态制作表格任务6 复选框 任务3表单任务4文本框任务5单选按钮

2024年12月18日JavaScript动态网页设计3学习任务 任务7设置下拉框 任务8表格与表单设计 任务9网站平台注册的验证

2024年12月18日JavaScript动态网页设计4任务1用CSS制作表格本用CSS来设置表格的背景颜色和边框样式等，可以美化表格外观。

2024年12月18日JavaScript动态网页设计5一、表格的标签tablewidth=200height=”100”border=1…/table在JavaScript中，如果制作简单的没有样式的表格就可以使用表格的标签来制作完成。表格具有5个最基本的HTML标签：（1）table/table标签：用于定义整个表格。（2）tr/tr标签：用于定义表格的一行。（3）td/td标签：用于定义一个单元格。（4）caption/caption标签：用于设置表格标题。（5）th/th标签：用于设置表格的表头，使表格的格式更加清晰。

2024年12月18日JavaScript动态网页设计6一、表格的标签tr与td标签的格式如下：trtd***/td…/tr例如：trtd学号/tdtd姓名/td/tr

2024年12月18日JavaScript动态网页设计7一、表格的标签案例：制作一个学生竞赛成绩表。如下图：

2024年12月18日JavaScript动态网页设计8设置表格颜色，可以使用CSS来实现。颜色值设置有三种方式：（1）预定义颜色值，如red，green，blue等;（2）十六进制，如#FFFFFF为白色，#000000为黑色，#FF0000为红色等。其中十六进制是最常用的颜色定义方式。（3）RGB代码，如红色可以表示为rgb(255,0,0)，绿色表示为rgb(0,255,0)，蓝色表示为rgb(0,0,,255)等。二、表格的颜色

2024年12月18日JavaScript动态网页设计9用CSS控制表格边框样式可以轻松实现，不仅可以设置整个表格的边框，也可以单元格单独设置边框样式。三、表格的边框1、边框的整体设置CSS控制的边框属性包括：（1）border-width：设置边框宽度，取值为像素，常用值为1px、2px等。（2）border-style：设置边框样式，常用值有solid、dashed、dotted、double、groove、ridge、inset和outset等。（3）border-color：设置边框颜色，常用值有red、green、blue等。或者用rgb(100,100,100)及#000000来设置。

2024年12月18日JavaScript动态网页设计10三、表格的边框2、边框的边单独设置对边框也可以针对边框的四个边单独设置。其属性和格式如下：border-top:[样式][宽度][颜色]border-bottom:[样式][宽度][颜色]border-left:[样式][宽度][颜色]border-right:[样式][宽度][颜色]

2024年12月18日JavaScript动态网页设计11三、表格的边框3、表格单线边框设置用CSS可以控制表的单线边框，让相邻单元格的边框合并成一条边框，就可以得到常见的细线边框。border-collapse：使单元格的边框合并或分离，当值为collapse时，表格的相邻单元格合并出现单线边框；当值为separate时，表格的相邻单元格就是默认的分离状态。其属性和格式如下：border-collapse:collapse;border-collapse:separate;

2024年12月18日JavaScript动态网页设计12三、表格的边框5、表格边框设置范例styletype=text/csstable{color:#FF6666;/*表格文字颜色*/background-color:#FFFFF;/*表格背景色*/font-family:宋体;/*表格字体*/font-size:16px;/*表格文字大小*/border-collapse:separate;/*单元格相邻边框不合并*/