表格表单css样式设计教案
html表单布局及CSS样式
HTML（二）一、HTML中的特殊符号1.常用的特殊符号：特殊符号字符实体示例空格 A B大于号> >a <b<br/>小于号< < <html><br/>引号"" " "姓名"<br/>版权符号 © Copyright© All Reserved2.表单（标签<form>）2.1、表单的基本语法：<form 属性action="表单提交地址" method="提交的方法">action：规定到表单提交之后，由谁处理，默认为当前页面 method：有两种取值get和post（更安全，数据量更大）表单内部由大量表单元素构成2.2、表单元素的基本格式<input name="表单元素的名称" type="类型" value="值" size="显示的宽度" maxlength="最大输入字符长度"checked="checked(是否被选中)" / >2.3、表单元素的逐一介绍1、文本框（type:txt）<input name="username" type="txt" value="张三" size="20" />2、密码框<input name="psswd" type="password" size="20"> 3、重置、提交和普通按钮<input name="reset" type="reset" value="重置" /><input name="submit" type="reset" value="提交" /><input name="button" type="reset" value="普通" />4、单选按钮（radio）<input type="radio" name="gen" value="男" checked="checked" /><img src="images/Male.gif" alt="男"/>男<input type="radio" name="gen" value="女" /> <img src="images/Female.gif" alt="女"/>女5、复选框（check和post）<input type="checkbox" name="hobby" value="sports" />运动 <input type="checkbox" name="hobby" value="swimming" />游泳 <input type="checkbox" name="hobby"value="play" checked="checked"/>玩游戏6、文件域（上传文件）<input type="file" name="files" /><br/> <input type="button" name="upload" value="上传" />7、下拉列表框<select name="bmon" ><potion value="0">一月</option><potion value="1">二月</option><potion value="2">三月</option><potion value="3">四月</option><potion value="4">五月</option><potion value="5">六月</option><potion value="6">七月</option><potion value="7">八月</option><potion value="8">九月</option><potion value="9">十月</option><potion value="10">十一月</option><potion value="11">十二月</option></select >月 8、多行文本域<textarea name="serviceprotocol" cols="60" rows="6" >欢迎阅读服务协议</textarea>9、隐藏域<input type="hidden" name="userid"value="777" />10、只读和禁用属性a、只读<textarea name="serviceprotocol" cols="60" rows="6" readonly="readonly">欢迎阅读服务协议</textarea>b、禁用同意以上协议<input type="checkbox" name="accept" /> <input type="submit" value="注册" disabled="disabled"/> 3.HTML的注释<!-- 注释内容-->要避免在注释内容中使用<！--------------注释内容------------>(不规范)可以用= =或者##代替--4、表格布局4.1、基本语法< table><tr> //行<td>百度</td>//单元格 </tr><tr><td>猫扑</td></tr><table>4.2、跨列<td colspan="2">学生成绩</td>//跨两列4.3、跨行<td rowspan="2">李四</td>4.4、跨行跨列<td colspan="3" align="center">学生成绩</td>5、表格的高级标签表格数据的分组标签<thead>,<tbody>,<tfoot>6、表格布局采用form-table-tr-td进行页面布局7、CSS样式表CSS是Cascading Style Sheets 的缩写，层叠样式表（W3C规范之一），把网页的内容和外观的美化分开。
项目六(网页表格与表单)
1 <tbody>和<tfoot>标签。当表格中的数据过多以至于在屏幕中无法完整显示时，可以将表头与表尾
设置为始终可见，表体则滚动或翻页显示。在实际的网页制作中，一般将表体放置在表头与表尾之后。
按列分组。当需要单独设置表格中某一列或多列的样式时，可以将表格按列分组。在HTML5中，使用
01 表单域：放置表单控件与提示信息的容器，用于收集用户输入或选择的数据，并以一定的方式传送到
服务器。 在HTML5中，使用<form>标签标记表单域，具体格式为：
<form action="url" method="提交方式 "> …… </form>
其中，action属性表示接收表单数据的服务器地址，属性值使用URL；method表示提交表单数据的方式， 默认的属性值为get，一般使用post。<form>标签还有一些其他属性，例如，name表示表单名称； autocomplete表示自动完成功能，用于将表单控件中曾输入过的内容记录下来，当再次单击表单控件时，自动 展开历史记录的列表，用户选择历史记录选项即可快速输入内容，属性值有on（具有自动完成功能）和off（无 自动完成功能）；novalidate属性用于在提交数据时关闭表单控件对输入内容的验证，属性值为novalidate。
“插入”面板
添加表格后，文档窗口中自动生成表格的代码，如图所示。
“Table”对话框
表格的代码
一个最基本的表格结构包括行标签与单元格标签。在HTML5中，使用<table>标签标记表格，使用<tr>子标签 标记行，使用<td>子标签标记单元格，具体格式为：
2025年秋季人教版八年级电脑上册《HTML与CSS基础》教案
2025年秋季人教版八年级电脑上册《HTML与CSS基础》教案 教学内容： 教材：《HTML与CSS基础》人教版八年级上册 内容：本节课主要围绕HTML与CSS的基本概念展开，包括HTML的基本结构、标签的使用、CSS的基本语法以及样式表的创建。学生将学习如何使用HTML标签创建网页的基本结构，如标题、段落、链接等，并通过CSS对网页进行美化，如设置字体、颜色、背景等。此外，还将介绍如何将CSS样式表与HTML文档关联，实现网页的样式统一。通过本节课的学习，学生将掌握HTML与CSS的基础知识，为后续学习网页设计和制作打下坚实基础。 教学内容： 教材：《HTML与CSS基础》人教版八年级上册 内容：本节课深入探讨HTML文档的语义结构，重点讲解常见标签如`
`, ``, ``等的用途和属性。学生将练习如何使用这些标签来构建一个简单的网页布局。同时，课程将引入CSS选择器，让学生学会如何通过类选择器、ID选择器等对网页元素进行样式设计。实践环节将包括创建一个包含文本、图片和超链接的网页，并应用CSS规则调整其外观。通过这一系列的练习，学生将能够理解和应用HTML与CSS的基本知识，为构建动态网页打下初步基础。 内容：本节课将进一步巩固学生对HTML和CSS的理解，通过以下内容实现： 1. 学习HTML表单元素，包括输入框、复选框、单选按钮等，以及如何使用CSS对表单进行样式美化。 2. 探索表格的创建和使用，掌握如何通过HTML标签``, ``, ``等来构建表格，并使用CSS调整表格的样式和布局。 3. 介绍列表标签，包括有序列表和无序列表，以及如何通过CSS实现列表的样式设计。 4. 实践环节将结合上述知识点，指导学生完成一个包含表单、表格和列表的综合性网页设计任务。 内容：继续深化HTML和CSS的应用，具体内容包括： 1. 学习HTML中的表单验证，理解如何使用HTML5的内置验证属性来增强用户体验。 2. 探索CSS的盒子模型，理解边距（margin）、边框（border）、内边距（padding）和宽高（width/height）在布局中的作用。 3. 讲解如何使用CSS的定位属性（如position, top, left等）来实现元素的绝对定位或相对定位。 4. 通过案例分析，让学生体验如何结合HTML和CSS制作响应式网页，适应不同屏幕尺寸的显示需求。 5. 最后，布置一个小型项目，要求学生综合运用所学知识，设计并实现一个具有基本功能的个人网页。 内容： 5. 在项目实践中，学生将学习如何规划网页结构，使用HTML5新增的语义化标签如``, ``, ``, ``等来增强网页的可读性和搜索引擎优化（SEO）。 6. 接下来，课程将教授如何使用CSS媒体查询（Media Queries）来创建响应式设计，使得网页在不同设备上都能保持良好的显示效果。 7. 学生将学习使用CSS伪类和伪元素，如`:hover`, `:active`, `::before`, `::after`等，来增强网页的交互性和视觉效果。 8. 最后一部分，将引导学生进行代码审查和调试，使用浏览器的开发者工具来检查CSS样式是否正确应用，以及如何解决常见的布局问题。通过这一系列的教学活动，学生将能够掌握HTML和CSS的基础技能，为后续的网页开发打下坚实的基础。
css中table用法
css中table用法CSS中的Table用法在网页设计和开发中，表格是一种常见的元素，用于展示和组织数据。
使用HTML的table标签可以创建基本的表格结构，而CSS可以帮助美化和调整表格的样式。
本文将介绍CSS中一些常用的table用法，包括表格样式、边框、背景色、对齐方式、表头和表格布局等。
1. 表格样式使用CSS可以对表格的样式进行自定义，如设置表格的背景色、文字颜色、字体大小等。
以下是一些常用的表格样式属性：表格背景色：```csstable {background-color: #f2f2f2;}```表格文字颜色：```csstd, th {color: #333;```字体大小：```csstd, th {font-size: 14px;}```2. 边框通过CSS可以设置表格的边框样式、边框宽度和边框颜色等。
以下是一些常用的表格边框属性：边框样式：```csstable {border-collapse: collapse;}td, th {border: 1px solid #ccc;}边框宽度：```csstd, th {border-width: 2px;}```边框颜色：```csstd, th {border-color: #999;}```3. 背景色除了设置表格的背景色之外，还可以通过CSS为表格的行、单元格或特定的列设置不同的背景色。
以下是一些例子：设置行的背景色：```csstr:nth-child(even) {background-color: #f9f9f9;}tr:nth-child(odd) {background-color: #eaeaea;}```设置特定列的背景色：```cssth:first-child {background-color: #ccc;}td:last-child {background-color: #ddd;}```4. 对齐方式通过CSS可以设置表格内容的对齐方式，包括水平对齐和垂直对齐。
CSS样式表
关于CSS样式表使用的特别说明（frontpage2003）一、外部CSS样式表（必考内容，一定要掌握）首先，要建立外部样式文件，然后再在网页中引用。
步骤1：点击“文件”下的“新建”，在右边弹出窗口点击“其他网页模板”。
再点击“样式表”“普通样式表”然后确定。
步骤2：看到打开的空白窗口后，点击“格式”在弹出下拉列表中选择“样式”，再在弹出窗口中“列表”处选择“用户自己定义样式”，然后点击“新建”步骤3：在弹出窗口的名称（选择器）中按题目要求输入名称(一般是style1或mystyle)，然后点击右下角“样式”，在下拉的列表中，分别选择“字体”并按题目要求设置相关选项后确认，步骤4：还可在“段落”中选择对齐方式，在“边框”中设置边框属性等等；在各弹出窗口，确定。
设置好以上内容后，保存该.css文件，文件名请按题目要求输入。
题目没有要求可自己定义为“外部样式表”步骤4、回到网页文件中，把鼠标定位到单元格后，点击“格式”在下拉表中选中“样式表链接”，再在弹出窗口，点击“添加”，然后找到已保存的样式表文件（如“外部样式表.css”），选中该文件后, 确定。
步骤5. 在屏幕左上角的“普通”处点下拉按钮，然后在最下面找到你刚才链接的样式名称(一般是.style1或mystyle)，单击它就OK了。
二、嵌入式CSS样式（可能考，掌握）步骤1、把鼠标定位要应用嵌入式CSS样式的文字后，点击“格式”在下拉表中选中“样式”，再在弹出窗口中“列表”处选择“用户自己定义样式”，然后点击“新建”后，步骤2、在弹出窗口的名称（选择器）中按题目要求输入名称(一般是style2)，然后点击右下角“样式”，在下拉的列表中，分别选择“字体”并按题目要求设置相关选项后确认，步骤3、然后还可在“段落”中选择对齐方式，在“边框”中设置边框属性等等再在弹出窗口，确定。
步骤4. 选中要应用嵌入式CSS样式的文字，在屏幕左上角的“普通”处点下拉按钮，然后在最下面找到你刚才定义的样式名称（一般是.style2），单击它就OK了。
div+css教案
机房演示教学，上机实践操作
教学手段
教学过程
设计
（4学时）
5.1列表样式设置基础164
5。1.1设置列表项符号164
5.1。2定义项目的图片符号166
5.1.3列表的横竖转换167
5。2案例实战169
5.2.1设计新闻栏目169
5。2。2设计导航菜单173
5.2.3设计多级菜单177
5。2.4列表排版的应用182
设计高效的表格
教学课题
第7章使用CSS设计表单样式
□标准班
□合班
教学目的
认识表单样式
重点难点
掌握定义字体样式、边框样式、背景样式
教学方法
机房演示教学，上机实践操作
主要教学过程
机房演示教学，上机实践操作
教学手段
教学过程
设计
（4学时)
7。1表单样式设置基础212
7.1.1表单基本结构212
7。1。2设置基本样式216
教学手段
教学过程
设计
（4学时）
6。1表格样式设置基础193
6.1。1设置表格颜色193
6.1.2设置表格边框194
6。2案例实战196
6。2.1美化表格197
6.2。2设计高效的表格200
6.2。3让表格更易用204
6.2。4表格布局207
机
房
操
作
课堂小结
（3分钟）
小结表格在CSS中如何运用
思考题、作业及其预习要求（2分钟）
10。3。2嵌套层叠顺序349
10。3.3CSS层叠框351
10.3。4CSS层叠常见问题354
10.4案例实战357
10。4。1画册式网页布局357
第7章 网页设计与制作-CSS样式使用
行内样式
这种样式是直接添加在HTML的标签里，语法如下：
<标签名 style=”样式规则的集合”>网页内容< /标签名>
【例】：
<p style=”color: blue; font-size: 10pt”>CSS实例</p>
代码说明：
用蓝色显示字体大小为10pt的“CSS实例”。尽管使用简单、显 示直观，但是这种方法不怎么常用，因为这样添加无法完全发挥 样式表的优势“内容结构和格式控制分别保存”。
案例（文字滚动效果） <marquee direction="up" scrollamount="2" onMouseOver="stop()" onMouseOut="start()"> <div>文字内容</div></marquee>
div设置宽高 400*100 固定定位 top: 20% left: 25%;
复习
第7章 CSS样式使用
$ [知识目标]
了解CSS样式的概念 掌握CSS样式表的创建方法 掌握应用CSS样式表的方法
8 [能力目标]
了解CSS样式的概念 掌握CSS样式表的创建方法 掌握应用CSS样式表的方法
什么是CSS层叠样式表
• CSS（Cascading Stylesheets，层叠样式 表）是一种制作网页的新技术，也有的人称 之为层叠样式表（Cascading Stylesheet） ，现在已经为大多数的浏览器所支持，成为 网页设计必不可少的工具之一。
看看段落中的字体有什么变化？
语法规定
4．注释
你可以在CSS中插入注释来说明你代码的意思 ，注释有利于你或别人以后编辑和更改代码时 理解代码的含义。在浏览器中，注释是不显示 的。CSS注释以"/*" 开头，以"*/" 结尾。
css样式表讲解
3．外部样式表
先创建一个CSS文件，然后在页面中调用这个CSS文
件。
调用的方法:在页面的头部标记<HEAD>中加入下面的
代码 <head> <link href="school.css" rel="stylesheet" type="text/css" />
</head>
<link>标记，用来调用外部的样式表文件。
CSS 样 式 表
CSS 样 式 表
CSS样式表概述 样式表的基本语法 样式表的使用规则 样式表中的常用属性 布局与定位
CSS样式表概述
CSS是Cascading Style Sheet的缩写，称为“层叠样
式表”，简称为“样式表”
层叠是指多个样式可以同时应用于同一个页面或网页
·CSS是一种用来装饰HTML的标记集合，是 对HTML标记的一种扩展，可以进一步美化 HTML页面 样式表的作用： 覆盖浏览器 页面布局 可以重用 多个文档可以链接到一个样式表
样式表的使用规则
样式表的分类
按加入的方式不同，可以分为：
行内样式表、
内部样式表
外部样式表。
1．行内样式表(内嵌样式表)
在HTML标记中使用style属性，直接写入需要定义的样式。 例如： <p style="color:Blue; font-size:12px" >内嵌样式表<p> 其中各个属性之间用“;”隔开，属性与属性值之间用“:”隔开.
内联式样式表是在现有HTML元素的基础上，用style属性把 特殊的样式直接加入到那些控制信息的标记中，比如下面的 例子： <p style="color：#ff0000">内联式样式表</p> 这种样式表只会对使用它的元素起作用，而不会影 响HTML文档中的其他元素。也正因为如此，内联式样式表 通常用在需要特殊格式的某个网页对象上。
div+css制作表格
div+css制作表格<div class="table"><h2 class="table-caption">花名册：</h2><div class="table-column-group"><div class="table-column"></div><div class="table-column"></div><div class="table-column"></div></div><div class="table-header-group"><ul class="table-row"><li class="table-cell">序号</li><li class="table-cell">姓名</li><li class="table-cell">年龄</li></ul></div><div class="table-footer-group"><ul class="table-row"><li class="table-cell">footer</li><li class="table-cell">footer</li><li class="table-cell">footer</li></ul></div><div class="table-row-group"><ul class="table-row"><li class="table-cell">1</li><li class="table-cell">John</li><li class="table-cell">19</li></ul><ul class="table-row"><li class="table-cell">2</li><li class="table-cell">Mark</li><li class="table-cell">21</li></ul><ul class="table-row"><li class="table-cell">3</li><li class="table-cell">Kate</li><li class="table-cell">26</li></ul></div></div>cssul{margin:0;padding:0;list-style:none;}.table{display:table;border-collapse:collapse;border:1px solid #ccc;}.table-caption{display:table-caption;margin:0;padding:0;font-size:16px;}.table-column-group{display:table-column-group;}.table-column{display:table-column;width:100px;}.table-row-group{display:table-row-group;}.table-row{display:table-row;}.table-row-group .table-row:hover,.table-footer-group .table-row:hover{background:#f6f6f6;}.table-cell{display:table-cell;padding:0 5px;border:1px solid #ccc;}.table-header-group{display:table-header-group;background:#eee;font-weight:bold;}.table-footer-group{display:table-footer-group;}。
《网页设计与制作》教案-第17讲 使用CSS美化网页一
第17讲使用CSS美化网页一1.1教学目标：◆知识目标1.熟练掌握CSS样式表的创建与编辑。
2.掌握CSS样式表的基本语法和定义位置。
3.理解CSS样式表的标签样式、高级样式、类样式的定义方法。
◆技能目标1.能合理创建和管理样式表文件，在网页设计中能够灵活利用CSS样式对页面元素变换不同的视觉效果◆品质目标培养学生认真细致、踏实进取的精神1.2教学重点：1.掌握CSS样式表的创建与编辑。
2.掌握CSS样式表的基本语法和定义位置。
1.3 教学难点1.理解CSS样式表的标签样式、高级样式、类样式的定义方法。
1.4教学方法：讲练结合，任务驱动、分子任务操练1.5课时安排：2课时1.6教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。
1.7教学过程：一、激趣导入，揭示课题对于一个网站的多个页面文件，经常出现布局一致的情况，甚至网页的一些部分是完全相同的，比如导航栏、标题栏等，利用Dreamweave中的模板可以方便快捷地创建大量风格统一、布局一致的网页，运用方便灵活的库文件，可省去设计者大量的重复工作。
二、使用样式表在Internet的汪洋大海之中，怎样才能使自己的页面独树一帜？怎样使自己的页面保持统一的风格？怎样免除众多HTML标志属性设置的烦恼？Dreamweaver中的CSS（层叠样式表）可以使我们很方便地完成页面风格的设置。
利用CSS不仅可以控制一篇文档中的文本格式，而且可以控制多篇文档的文本格式。
因此使用CSS样式表定义页面文字，将会使设计制作工作量大大减小。
一些好的CSS样式表的建立，使我们可以更进一步地对页面进行美化，对文本格式进行精确定制。
什么是样式表？样式表的英文缩写为CSS，即Cascading Style Sheet（层叠样式表）的缩写，我们又常称这为风格样式单Style Sheet，顾名思义，是用来进行页面风格设计的。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
一体化课程教案
编号：QD-0707-05版本号：D/0 流水号：
编制：教研室批准:成振洋
2011/2012 学年度第二学期计算机系（部）任课教师颜虹一体化课程网络编程基础学习任务CSS表格表单样式设计授课时数 6 授课日期2012.5.17 周次13 审批
年月日教学班级10计网1
学习目标学习重点及其化解方法
根据教材上要求，通过本次课程学习学生要能运用CSS样式实现表格、表单的样式设计。
本次课程的学习内容应该是学生比较感兴趣的知识，我们可以从简单例子入手，到复杂的网页效果实现，再结合书本要求完成的综合实例，还可以让学生自由创作。
这样学生既理解了书上的表格表单CSS样式设计的用法，真正具备进行网页设计的能力。
学习重点：分析并制作出网页表格、表单的样式表。
学习难点及其化解方法
学习难点：指导学生的自主学习和正确评价自己和他人的设计多看优秀的表单表格设计例子，例如google的日历视图等网页上实例。
教学准备➢教学设备：电脑、投影、PowerPoint软件、Dreamweaver软件➢教学准备：示例网页、素材图片、任务书
教学内容（课时 6 ）：
学习任务书
教学任务一绘制交换颜色变化的表格
【任务内容】
讲解表格CSS样式表设置的方式方法
【任务目的】
使学生掌握表格样式，学会熟练设置表格边框、背景色、单元格间距等属性。
【学习重点】
CSS样式表的灵活运用
【学习难点】
理解表格的各个属性、间距设置的意义
【教学方式】
案例分析式、任务教学
【教学内容】
一、制作4X5的表格，并输入相应的文字内容
提示：没有特殊合并格式的表格，可以使用<table>、<tr>、<td>标签完成。
或直接用dw生
成。
二、设置表格CSS样式
1、设置table的样式为border-collapse:collapse;
2、设置tbody、td的样式为
color:#333;
padding:8px;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #F60;
border-bottom-color: #F60;
border-top-width: 1px;
border-top-style: solid;
border-left-style: solid;
border-top-color: #F60;
border-left-color: #F60;
border-left-width: 1px;
3、设置两种颜色的表格单元格样式类分别为in\on，颜色可自行设计。
并写出相应的样式代码：
4、效果图如下所示
可以独立完成帮助下完成完成得比较困难
学习任务书
教学任务二仿照google日历制作相应的样式表格
【任务内容】
讲解表格边框与文字样式的设置
【任务目的】
使学生掌握表格样式，学会熟练设置表格边框与文字样式，以及添加层的使用。
【学习重点】
CSS样式表的灵活运用，以及层定位的设置
【学习难点】
能够实现表格所有单元格等宽等高，以及表格多行多列细边框线的实现
【教学方式】
案例分析式、任务教学
【教学内容】
一、设置8X5表格，并设置表格头，输入相应文字。
二、设置表格边框线
参考样式如下：
table {border-collapse:collapse;
}
border: 1px solid #33C;
font-family: "宋体";
font-size: 12px;
三、设置层的绝对定位
1、添加div，直接在对话框里选择新建新样式
2、点击这里直接编写div
的样式表
这个定位类型设置
为绝对定位，宽约
200px，高约100px。
3、层的样式表细节，请大家自己动手调整，并达到如效果图一致。
并写出相应的样式表代码：
四、最后实现效果图如下：
可以独立完成帮助下完成完成得比较困难
学习任务书
教学任务三 制作彩色表单
【任务内容】
讲解表单制作，以及表单样式表的设置，复合样式表的使用方法
【任务目的】
使学生掌握表单样式表设置，学会熟练制作表单。
【学习重点】
CSS 样式表的灵活运用，以及表单控件的制作、复合样式表的使用 【学习难点】
能够实现表单样式效果、hover 样式的使用使鼠标经过时表单单元格变色。
【教学方式】
案例分析式、任务教学
【教学内容】
一、 制作在线调查表单
利用DW 添加表单，然后再添加一个12X1的表格，在各行内分别插入不同的表单元素。
二、 利用任务二得到的表格样式，设置本次任务的表格样式。
参考如下：
table { border-collapse:collapse; text-align: left; }
tbody td { font:normal 14px/15px georgia; color:#CCC; padding:8px; border: 1px solid #03F; } 三、 思考：我们在前面学习了超链接样式表时，能够实现鼠标经过时将超拉链颜色改变，那
这种样式表是否也可以适用在其他地方呢？下面让我们在这个表单上试一下吧。
提示：tr:hover
请写出相应的样式代码
在网页里添加一个
form ，所有表单元素都要包含在这个form 里 利用这些快捷菜单创
建样图的表单
四、完成效果图如下所示
可以独立完成帮助下完成完成得比较困难
学习任务书
教学任务四综合实例1、2
【任务内容】
表格最基本的作用就是让复杂的数据变得更有条理，让人容易看懂，在设计页面时，往往要利用表格来排列网页元素。
通过几个实例掌握表格的使用技巧。
【任务目的】
使学生掌握表单样式表设置，学会熟练制作用表格布局的网页。
【学习重点】
CSS样式表的灵活运用，以及复合样式表的使用
【学习难点】
能够实现表格样式效果、hover样式、复合样式使用。
【教学方式】
案例分析式、任务教学
【教学内容】
一、综合实例1：制作变换背景色的表格。
步骤提示如下：
(1)打开素材文件，设计如下图所示网页。
任务要求：根据素材自己实现网
页效果。
(2) 变换背景色的设置提示在<table>标记中输入以下代码。
onMouseOver="this.style.background='#FF3366'"
onMouseOut="this.style.background='#9FE417'"
请写出此处<table>标记的代码;
二、综合实例2：设计文本框的样式
（1）打开素材文件，设计如下图所示网页。
任务要求：根据素材自己实现
网页效果。
（2）设置表格的边框线，提示代码如下：
border:1 solid #FF9900;
background-color: #FFCC00;
请写出你的样式表代码：
（3）思考题：在本例中应用任务三的表单单元格鼠标经过时变色效果。
请写出你的样式表代码：。