第6章 为网页添加表格与表单（新）.pptVIP

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 6.4 【案例20】空间日志 6.4 【案例20】空间日志 空间日志效果图 案例效果图 6.4 【案例20】空间日志 知识引入 空间日志案例知识 6.4 【案例20】空间日志 1、textarea控件 其基本语法格式如下： textarea cols=每行中的字符数 rows=显示的行数 文本内容 /textarea 【结论】 cols和rows为textarea标记的必须属性，其中cols用来定义多行文本输入框每行中的字符数，rows用来定义多行文本输入框显示的行数，取值均为正整数。 6.4 【案例20】空间日志 1、textarea控件 textarea可选属性 属性 属性值 描述 name 由用户自定义 控件的名称 readonly readonly 该控件内容为只读（不能编辑修改） disabled disabled 第一次加载页面时禁用该控件（显示为灰色） 6.4 【案例20】空间日志 2、select控件 浏览网页时，经常会看到包含多个选项的下拉菜单。 6.4 【案例20】空间日志 2、select控件 基本语法格式 select option选项1/option option选项2/option option选项3/option ... /select 使用select控件定义下拉菜单的基本语法格式如下： 6.4 【案例20】空间日志 2、select控件 select和option标签属性 标签名 常用属性 描述 select size 指定下拉菜单的可见选项数（取值为正整数）。 multiple 定义multiple=multiple时，下拉菜单将具有多项选择的功能，方法为按住Ctrl键的同时选择多项。 option selected 定义selected = selected 时，当前项即为默认选中项。 6.4 【案例20】空间日志 多学一招： 使用Dreamweaver工具生成表单控件。 选择菜单栏中的【窗口】→【插入】选项 单击插入栏上方的“表单”选项 单击表单工具组中不同的选项，即可生成不同的表单控件 6.4 【案例20】空间日志 案例实现 效果图 6.4 【案例21】员工档案 员工档案用于对员工信息进行统一管理，从而使员工的档案管理更加科学化、信息化。本节将使用表单控件，并通过CSS控制表单样式来制作一个精美的电子员工档案。 6.4 【案例21】员工档案 员工档案效果图 案例效果图 6.4 【案例21】员工档案 知识引入 员工档案案例知识 6.4 【案例21】员工档案 1、CSS控制表单样式 使用CSS可以轻松地控制表单控件的样式，主要体现在控制表单控件的字体、边框、背景和内边距等。 6.4 【案例21】员工档案 1、CSS控制表单样式 由于form是块元素，重置浏览器的默认样式时，需要清除其内边距padding和外边距margin 使用input /标记定义各种按钮时，通常需要清除其边框 通常情况下需要对文本框和密码框设置2到3像素的内边距，以使用户输入的内容不会紧贴输入框 1 2 3 6.4 【案例21】员工档案 案例实现 效果图 * * * * * * * * * * * * * * * 7、CSS控制表格样式 6.1 【案例17】简历表 学习CSS控制表格边框时需要注意以下几点： border-collapse属性的属性值除了collapse（合并）之外，还可以为separate（分离），默认为separate。 行标签tr无border样式属性，本书不再做具体的演示，初学者可以自己测试加深理解。 当表格的border-collapse属性设置为collapse时， HTML中设置的cellspacing属性值无效。 A B C 7、CSS控制表格样式 6.1 【案例17】简历表 CSS代码如下所示： th,td{ border:1px solid #30F; /*为单元格单独设置边框*/ padding:20px; /*为单元格内容与边框设置20px的内边距*/ margin:20px; /*为单元格与单元格边框之间设置20px的外边距*/ } CSS控制表格边距 7、CSS控制表格样式 6.1 【案例17】简历表 学习CSS控制单元格边距时需要注意： 行标签tr无内边距属性padding和外边距属性margin。 7、CSS控制表格样式 6.1 【案例17】简历表 C