第11章 用CSS设置表格和表单样式.pptVIP

Width=content + left-padding + right-padding (FF正确，但是IE6width=content,没有加上padding，所以显示出来的宽度为：conten50+左右pading20=70，错误，所以，需要修正IE6的这一错误) 11.4 用CSS设置表单样式 表单最终效果 1.为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时，table是作为一个整体解释的，使用TBODY可以优化显示。 如果表格很长，用tbody分段，可以一部分一部分地显示，不用等整个表格都下载完成。下载一块显示一块，表格巨大时有比较好的效果。??? 表格行本来是从上向下显示的。但是，应用了thead/tbody/tfoot以后，就“从头到脚”显示，不管你的行代码顺序如何。也就是说如果thead写在了tbody的后面，html显示时，还是以先thead后tbody显示。 2. thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。 3.注释：thead 内部必须拥有 tr 标签！ 　注释：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。 border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。 * width:100%; 对最大的容器设置宽度，相对宽度和绝对宽度都可以，即可修正bug 11.3 表单标记 form id=“form1” name=“form1” method=“post” action=“” /form 说明： method 属性用于设置传送表单数据的方法。 action 属性用于设置服务器端处理表单的应用程序。 1. 表单 label for=“username” 用户名：/label input type=“text” name=“username” id=“username” / 在应用程序中使用name属性 表单对象与label关联使用id属性 2. 单行文本域 label for=“password” 密码：/label input type=“password” name=“password” id=“password” / 3. 密码域 label for=“suggestion” 建议：/label textarea name=suggestion cols=30 rows=3 id=suggestion/textarea 4. 多行文本域 性别： input type=“radio” name=“gender” value=“M” id=“male” checked=“checked”/ label for=“male”男/label input type=“radio” name=“gender” value=“F” id=“female” / label for=“female”女/label 5. 单选按钮 name值相同，成为一组。 id值不同，互相区别。 爱好： input type=“checkbox” name=“interest” value=“music” id=“music” / label for=“music” 音乐/label input type=“checkbox” name=“interest ” value=“sport” id=“sport” / label for=“sport” 体育/label input type=“checkbox” name=“interest” value=“movie” id=“movie” / label for=“movie” 电影/label 6. 复选框 label for=“city”城市：/label select name=“city” id=“city” option value=0请选择……/option option value=“beijing”北京/option option value=“shanghai”上海/option option value=“guangzhou”广州/option /select