版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
项目7制作员工信息表表格
掌握创建表格的HTML标记；
掌握合并单元格的方法；
掌握表格的CSS样式设置方法。任务描述知识准备任务实现任务小结任务测试与考核实训制作企业介绍页面1.HTML结构（1）创建一个7行11列的员工信息表；2.CSS样式（1）统一设置表格边框、内边距、字体大小等样式，使表格视觉一致，提升页面美观度。（2）表格边框设置：为表格添加1像素宽的黑色边框，合并表格边框，使表格更整洁；（3）表格居中显示：让表格在页面中水平居中；（4）表格内容对齐：使表格内所有内容水平居中；（5）表头样式：为表头设置1像素宽黑色边框，上下内边距5像素、左右20像素，字体大小18像素，背景色
rgb(47,140,206)，文字白色，增强可读性与视觉效果；（6）表格颜色规范：表格主要使用背景色
rgb(47,140,206)、白色和
#dfdfdf；（7）表格行交替背景：为表格主体奇数行设背景色
#dfdfdf，便于区分数据行；（8）单元格样式：为表格单元格设1像素宽黑色边框，上下内边距5像素、左右20像素，保证内容间距合适；图7-1员工信息表任务描述知识准备任务实现任务小结任务测试与考核实训表格标记合并单元格使用CSS定义表格样式知识准备1:表格标记1.简易表格标记HTML表格由<table>标记来定义。HTML表格是一种用于展示结构化数据的标记语言元素。每个表格均有若干行，每行由<tr>标记定义，每行被分割为若干单元格，每格由<td>标记定义，表格可以包含标题行。表格相关标签与作用如下表：基本语法：标签作用<table></table>构建
HTML表格的容器；<tr></tr>tablerow的缩写，表示表格的一行。<td></td>tabledata的缩写，表示表格的数据单元格。<table><tr>
<td>单元格内的文字</td></tr></table>知识准备1:表格标记2.完整表格标记一个简单的表格只需包含<table>、<tr>、<td>这3种标记即可。如果要创建一个结构更完整、更复杂的HTML表格，还需要包含<caption>、<th>、<thead>、<tbody>等标记，如下图所示。知识准备1:表格标记2.完整表格标记（1）<caption></caption>。用于定义表格标题。一个表格只能有一个标题。默认情况下，表格标题位于整个表格的第一行。（2）<th></th>。用于定义表头单元格。要注意<th>标记和<td>标记的区别，<th>标记对内的文本通常会呈现为居中的粗体文本，<td>标记用于定义普通行的单元格，标记对内的文本通常是左对齐的普通文本。（3）<thead></thead>。用于定义表格的表头。（4）<tbody></tbody>。用于定义表格主体（正文）,这2个标记可以让表格结构更清晰，更具有可读性。实现复杂结构表格启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter07文件夹），新建HTML文件，命名为demo7-2.html。定义一个复杂结构表格，效果图如下：知识准备1:表格标记<tableborder="1"><caption>表格标题</caption><thead><tr><th>表头1</th>...</tr></thead><tbody><tr><td>第一行第一列单元格</td>...</tr>...</tbody></table>表格标记合并单元格使用CSS定义表格样式知识准备2:合并单元格合并单元格设计表格时，面对格式不规则的表格，可以通过合并单元格来进行调整格式，合并单元格可以给单元格标记<td>或<th>添加colspan或rowspan属性合并单元格。（1）列合并，即让同行不同列的单元格合并为一个单元格，需找到被合并的最左侧的单元格，添加colspan属性，语法格式如下，其中number为合并的单元格数目：如：<tdrowspan="number">内容</td>跨列合并跨行合并<tdrowspan="2">内容</td>知识准备2:合并单元格合并单元格（2）行合并，即让同列不同行的单元格合并为一个单元格，需找到被合并的最上面的单元格，添加rowspan属性，语法格式如下，其中number为合并的单元格数目：<tdcolspan="number">内容</td>合并表格单元格创建员工信息表，分别使用rowspan属性、colspan属性合并单元格，实现如下效果。知识准备2:合并单元格<throwspan="2"><!--行合并2个单元格-->
工号</th><thcolspan="3"><!--列合并3个单元格-->
个人信息</th><thcolspan="3"><!--列合并3个单元格-->
岗位信息</th>表格标记合并单元格使用CSS定义表格样式知识准备3:使用CSS定义表格样式常用的表格CSS样式属性使用CSS定义表格样式，可以让表格更佳美观、简洁。表格常用的CSS样式属性如下表。属性说明width设置表格的宽度，其值可以是像素值或者百分比height设置表格的高度，其值可以是像素值或者百分比text-align设置单元格中内容的水平对齐方式（默认左对齐，取值有left、center、right）vertical-align设置单元格中内容的垂直对齐方式（默认垂直居中，取值有top、middle、bottom）padding设置表格内容到表格边框之间的距离border设置表格的边框border-collapse设置表格的行和单元格的边框是否合并在一起（默认值
separate表示边框独立，collapse表示边框合并）border-spacing设置相邻单元格边框之间的距离empty-cells设置表格中的空白单元格是否显示边框和背景，仅当border-collapse为默认值时，该属性有效使用CSS修改表格样式在已实现的员工信息表的基础上，使用CSS样式修改表格，效果如下图所示。知识准备3:使用CSS定义表格样式table{border:1pxsolid#000;/*设置表格边框*/border-collapse:collapse;/*表格边框合并*/margin:0auto;text-align:center;}th,td{border:1pxsolid#000;/*设置表格边框*/}tr:first-child{background:#dedede;/*设置表格第一行的样式*/}...1.使用border-collapse属性使表格的行和单元格的边框合并，这样可以制作1px宽的细线边框表格。2.用类选择器进行定位后设置单元格样式。3.tr:first-child用于选取表格的第一行。任务描述知识准备任务实现任务小结任务测试与考核实训制作企业介绍页面1.HTML结构（1）创建一个7行11列的员工信息表；2.CSS样式（1）统一设置表格边框、内边距、字体大小等样式，使表格视觉一致，提升页面美观度。（2）表格边框设置：为表格添加1像素宽的黑色边框，合并表格边框，使表格更整洁；（3）表格居中显示：让表格在页面中水平居中；（4）表格内容对齐：使表格内所有内容水平居中；（5）表头样式：为表头设置1像素宽黑色边框，上下内边距5像素、左右20像素，字体大小18像素，背景色
rgb(47,140,206)，文字白色，增强可读性与视觉效果；（6）表格颜色规范：表格主要使用背景色
rgb(47,140,206)、白色和
#dfdfdf；（7）表格行交替背景：为表格主体奇数行设背景色
#dfdfdf，便于区分数据行；（8）单元格样式：为表格单元格设1像素宽黑色边框，上下内边距5像素、左右20像素，保证内容间距合适；任务描述图7-1员工信息表1.启动VSCode，打开“OpenFolder”对话框，选择本章代码文件夹（chapter07文件夹）。2.在目录chapter07下，新建一个名为Information
的文件夹。3.打开Information的文件夹，新建文件名为07-staff.html，打开该文件。任务实现1.创建项目在07-staff.html文件的<body></body>标签中继续输入表格信息代码：任务实现1：制作员工信息表2.搭建员工信息表网页结构<tableclass="stafftable"><thead><tr><th>工号</th><th>姓名</th><th>性别</th><th>民族</th><th>学历</th><th>年龄</th><th>部门</th><th>岗位</th><th>薪资</th><th>入职时间</th><th>操作</th></tr></thead><tbody><tr><td>20230101</td><td>李艳东</td><td>男</td><td>汉</td><td>本科</td><td>55</td><td>行政部</td><td>董事长</td><td>10000</td><td>2019-1-1</td><td><buttonclass="amend">修改</button><buttonclass="del">删除</button></td></tr>......在07-staff.html文件中，<head>与</head>标记之间输入如下代码：任务实现1:制作员工信息表3.搭建员工信息表css样式<style>table{border:1pxsolid#000;/*设置表格边框*/border-collapse:collapse;/*表格边框合并*/margin:0auto;text-align:center;}th{border:1pxsolid#000;padding:5px20px;font-size:18px;background-color:rgb(47,140,206);color:#ffffff;}tbodytr:nth-child(odd){/*odd为偶数行*/background-color:#dfdfdf;}td{border:1pxsolid#000;padding:5px20px;/*设置表格边框*/}
button{/*设置按钮的边框样式*/border:none;/*设置边框圆角的大小*/border-radius:5px;color:white;padding:5px10px;}.amend{background-color:#1165bf;}.del{background-color:#5c5c5c;}</style>
实现效果如下：任务实现1:制作员工信息表3.搭建员工信息表css样式任务描述知识准备任务实现任务小结任务测试与考核实训任务描述知识准备任务实现任务小结任务测试与考核实训一、单选题1.下面说法正确的是（）A.<table>是表格行标记B.<tr>是表格列标记C.<td>是表格行标记D.<th>是表头标记2.当同一行的三个单元格需要合并时要（）A.在最左边的单元格标记里添加rowspan=”3”B.在最左边的单元格标记里添加colspan=”3”C.在最上边的单元格标记里添加rowspan=”3”D.在最上边的单元格标记里添加colspan=”3”3.在HTML中，设置表格边框合并为一条实线的属性是（）A.borderB.border-sizeC.border-collapseD.border-spacing4.定义HTML表格的标记是（）A.<table>B.<tr>C.<td>D.<th>二、判断题1.在HTML中创建的表格在默认情况下是有边框（）2.在HTML中表格一行中的列数取决于定义一行中的单元格数（）3.colspan属性是用来合并行单元格的（）4.表头标记<td>可以使表头的单元格加粗且居中（）5.在CSS中border-collapse:collapse可以合并单元格的行和单元格边框，使中空的边框变为实线边框。三、填空题1.HTML表格的结构中，____________标签用于定义表格的表头区域，____________标签用于定义表格的主体内容区域，____________标签用于定义表格的页脚区域，合理划分这些区域可提升表格语义化。2.表格中，若要让某个单元格跨2行显示（即合并2行单元格），需在该单元格的____________或____________标签中添加____________属性，并设置属性值为2。3.在CSS中，若想设置表格单元格之间的间距，可使用____________属性，其属性值为具体的长度单位（如px）。4.若表格中某一行的高度需要固定，可通过CSS的____________属性为该行的<tr>标签设置具体高度值。任务描述知识准备任务实现任务小结任务测试与考核实训“数字中国”2.实训内容表格1．深入理解表格在网页中的作用：熟悉表格标记的使用2．熟练掌握如何通过表格有效展示数据，提升信息的可读性3．学习理解“加快数字化发展，建设数字中国”的战略意义1．在本任务中创建的chapter07目录文件夹下，继续创建一个新的.html文件。文件命名为test01.html。2．网页标题为：数字中国。3．选取当前社会热点问题（如环保、教育、医疗等），通过表格展示相关数据。实训目的3.实训总结1．简述如何通过<table>,<tr>,<td>,<th>等标记构建基本的表格结构？2．如何增强表格的语义结构？3．表格样式调整中，哪些CSS属性是常用的，如何应用于表格以提升视觉效果？项目8制作企业网站登录注册表单表单理解表单在网页中的作用和重要性。掌握表单的基本标记和控件的使用。学习如何使用CSS来定义和美化表单样式。实现一个功能完整、用户友好的注册表单。任务描述知识准备任务实现任务小结任务测试与考核实训制作企业介绍页面1.HTML结构（1）创建一个注册表单的结构，包括用户名、密码、确认密码等输入字段，注册提交按钮，一个用户需要同意隐私政策和服务条款的复选框，一个跳转到登录页面的链接；（2）创建一个登录表单的结构，包括用户名、密码的输入字段，一个自动登录的复选框，一个链接到忘记密码页面的选项和一个跳转到到注册界面的链接。2.CSS样式（1）设置所有元素的外边距和内边距为0；（2）设置表单的宽度380px、高度390px、内边距为30px、居中显示；（3）设置整体字体类型和默认字体大小；（4）设置表单元素的边框、边距、阴影等样式；（5）设置背景颜色和背景图片；（6）设置按钮和链接的样式，包括悬停效果。任务描述任务描述知识准备任务实现任务小结任务测试与考核实训认识表单表单标记<input>控件其他表单控件使用CSS定义表单知识准备：认识表单1.认识表单：
表单是HTML中用于收集用户输入的区域，通过<form>标签定义。表单的主要功能是将用户输入的数据传递给服务器进行处理。一个完整的HTML表单由以下几部分组成：（1）表单域（<form>标记）：定义表单的容器，包括表单的提交方式和提交到的URL。（2）表单控件：如<input>、<textarea>、<select>等，用于收集用户输入的数据。（3）提交按钮：如<button>、<inputtype=“submit”>等，用于将表单数据发送到服务器。（4）提示信息：表单控件周围用于提示用户输入内容的文字。如下就是一个完整的表单页面：表单认识表单表单标记<input>控件其他表单控件使用CSS定义表单
在HTML中，表单的主体由<form>标签定义，它是一个块级元素，用于包裹表单控件和相关元素。<form>标签是创建表单的基础容器，通过它可以将输入框、按钮、选择框等表单控件组织在一起，实现数据的收集和提交功能。<form>标签的语法格式如下：<formaction="提交地址"method="提交方式"><!--表单控件和其他内容--></form><form>标签具有多个重要的属性，这些属性决定了表单的行为和功能，常用的属性说明如下：知识准备2：表单标记1.表单概述属性名称说明action指定表单数据提交到的服务器地址。当用户点击提交按钮时，表单中的数据会发送到该地址。如果未指定，则默认提交到当前页面的URL。method指定表单数据提交的方式，常见的值为
GET
和
POST。GET
方法会将表单数据附加到URL中，适合简单查询；POST
方法则将数据放在请求体中，适合处理敏感信息或大量数据。name为表单指定一个名称，便于在JavaScript中通过
document.forms
访问该表单。enctype指定表单数据的编码类型，默认值为
application/x-www-form-urlencoded。如果表单包含文件上传功能，则需要设置为
multipart/form-data。autocomplete控制表单是否启用自动填充功能。常见的值为
on（允许自动填充）和
off（禁止自动填充）。novalidate如果设置该属性，则浏览器不会对表单进行验证，通常用于测试或自定义验证逻辑。2.表单案例例8-1启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter08文件夹），新建HTML文件，命名为demo8-1.html，效果图如下：知识准备2：表单标记
浏览网页效果如图8-4表单提交示例效果图所示，页面展示了一个登录表单，表单的提交地址未指定，则默认提交到当前页面的URL，提交方式为GET。表单中有两个输入框，分别用于输入用户名和密码，均设置为必填项。表单提交后，用户名和密码会附加到URL中发送到指定地址。部分代码如下：<formaction=""method="get">
<inputtype="text"name="username"placeholder="用户名"required><br>
<inputtype="password"name="password"placeholder="密码"required><br>
<buttontype="submit">登录</button>
</form>表单标记认识表单表单标记<input>控件其他表单控件使用CSS定义表单
表单控件是用户与表单交互的界面元素。常见的表单控件包括文本框、密码框、单选按钮、复选框、下拉列表、按钮等。表单控件通过<input>、<textarea>、<select>等HTML标记实现。<input>控件即<input>标记，是表单中最为核心的控件，使用<input>标记可以定义很多控件，如文本框、密码框、复选按钮、单选按钮、提交按钮、重置按钮等。其语法格式如下：<input/>标记为单标记，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除type属性外，<input>标记还可以定义其他的属性，如表8-3所示。其中id、name和value是最常用且重要的属性。知识准备3：<input>控件
1.<input>控件<inputtype="控件类型"id="id名"name="name名"value="默认值"/>id：用于标识表单控件的唯一性，方便CSS和JavaScript操作name：用于指定表单控件的名称，服务器通过该名称获取表单数据value：设置表单控件的默认值input控件的type属性知识准备3：<input>控件
1.<input>控件属性属性值描述typetext单行文本输入框password密码输入框checkbox复选框radio单选按钮submit提交按钮reset重置按钮button普通按钮file文件域hidden隐藏域image图像按钮emailE-mail地址输入域urlURL地址输入域number数值输入域range一定范围内数字的输入域date、datetime-local、month、week、time、datetime日期和时间输入类型search搜索域tel电话号码输入类型color颜色输入类型input的控件的其他属性知识准备3：<input>控件
1.<input>控件属性属性值描述id字符串指定控件的IDname字符串指定控件的名称value字符串设置控件的默认值size正整数输入控件在页面中的显示宽度readonlyreadonly该控件内容为只读（不能编辑修改）disableddisabled加载页面时禁用该控件checkedchecked定义选择控件默认被选中的项maxlength正整数指定允许输入的最大字符数onoffon/off指定页面加载后是否自动获取焦点autofocusautofocus指定字段获取第一个或前几个菜单form字符串指定字段隶属于哪个form元素的id(1）文本框
文本框用于输入单行文本，通过<input>标签的type="text"属性创建。其基本语法格式如下：
示例：创建文本框知识准备3：<input>控件
2.Type属性<inputtype="text"id="id名"name="name名"value="默认值"><labelfor="username">用户名：</label><inputtype="text"id="username"name="username"value="请输入用户名">
(2）密码框
密码框用于输入密码，通过<input>标签的type="password"属性创建。其基本语法格式与文本框类似：
密码框的特点是输入的内容会以点或星号显示，以保护用户隐私。（3）单选按钮单选按钮用于从一组选项中选择一个选项，通过<input>标签的type=“radio”属性创建。其基本语法格式如下：<inputtype="password"id="password"name="password"><inputtype="radio"id="option1"name="group1"value="option1"><labelfor="option1">选项1</label><inputtype="radio"id="option2"name="group1"value="option2"><labelfor="option2">选项2</label>(4）复选框复选框用于从一组选项中选择多个选项，通过<input>标签的type="checkbox"属性创建。其基本语法格式如下：
示例：创建文本框知识准备3：<input>控件
2.Type属性<inputtype="checkbox"id="option1"name="option1"value="option1"><labelfor="option1">选项1</label><inputtype="checkbox"id="option2"name="option2"value="option2"><labelfor="option2">选项2</label>(5）按钮按钮用于提交表单或执行其他操作，通过<input>标签的type="submit"、type="reset"或type="button"属性创建。其基本语法格式如下：
<inputtype="submit"value="提交"><inputtype="reset"value="重置"><inputtype="button"value="普通按钮">复选框的特点是用户可以同时选择多个选项。
type="submit"：提交按钮，点击后将表单数据提交到服务器。
type="reset"：重置按钮，点击后将表单恢复到初始状态。
type="button"：普通按钮，需要结合JavaScript实现其他功能。2.
<input>控件常用的type属性例8-2启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter08文件夹），新建HTML文件，命名为demo8-2.html，效果图如下：知识准备3：<input>控件从图中可以看出，界面中添加了单行文本输入框、单选按钮、数值输入域、日期输入类型、复选框、文件域、提交按钮等类型的input控件。<input>控件认识表单表单标记<input>控件其他表单控件使用CSS定义表单知识准备4：其他表单控件
除了input控件之外，HTML还提供了其他多种表单控件以满足不同的交互需求。当用户需要输入大段文本内容时，可以使用textarea控件；而需要创建下拉选择列表时，则应当使用select标签及其配套的option标签来实现。1.<textarea>控件<textarea>是HTML表单中的多行文本输入控件，适用于评论、描述等较长内容的输入。与单行输入框<inputtype="text">不同，它支持多行文本、自定义尺寸（行/列）、占位提示（placeholder）及动态调整大小，提供更灵活的文本输入方式。其语法格式如下：其中cols是指多行文本框的每行字符数，rows是指显示的行数。这两项是标签的必填属性。2.<select>控件<select>是HTML表单的下拉选择控件，用于从预设选项中选择（如地区、分类）。通过<option>定义选项，支持单选、多选（multiple）和分组（<optgroup>），能规范输入并提高交互效率。其基本语法格式如下：<textareacols="每行字符数"rows="行数">
文本内容...</textarea><select><option>选项1</option><option>选项2</option><option>选项3</option>...</select>3.其他表单控件例8-3启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter08文件夹），新建HTML文件，命名为demo8-3.html。在demo8-2.html代码的基础上，添加<textarea>控件和<select>控件
，效果图如下：知识准备4：其他表单控件从图中可以看出，在界面中添加了“学历”和“部门”两个下拉列表<select>控件和“个人特点”文本域<textarea>控件。其他表单控件认识表单表单标记<input>控件其他表单控件使用CSS定义表单1.
定义表单样式案例例8-4启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter08文件夹），新建HTML文件，命名为demo8-4.html，效果图如下：知识准备5：使用CSS定义表单样式从图中可以看出，界面中只有表单标记，并没有任何的css样式设置，看起来并不美观。为了使表单界面美观，下面引入外部式CSS样式对界面进行修饰。1.定义表单样式案例将上述8-4案例选择已有目录文件夹（例如，chapter08文件夹下的css文件夹），新建css文件，命名为demo8-4.css，效果图如下：知识准备5：使用CSS定义表单样式
如图使用CSS定义表单样式示例效果图所示，从图可以看出，使用了CSS定义表单样式之后比之前看起来美观一些。其他表单控件任务描述知识准备任务实现任务小结任务测试与考核实训制作企业网站注册页面创建项目
在VSCode中打开chapter08文件夹，新建LoginHub子文件夹。在其中创建08-login.html、08-register.html、images文件夹和css文件夹。css文件夹中需包含08-login.css和08-register.css文件。2.实现注册界面模块的制作（1）首先，对CSS样式进行初始化设置，以消除不同浏览器默认样式的影响，从而提高开发效率。主要设置如下：清除所有元素内外边距；统一字体为Arial或无衬线字体；去除列表标记；设置固定居中背景图，覆盖整个视口；启用弹性布局，子元素居中对齐；高度设为100vh。（2）将08-register.css样式引入08-register.html页面。（3）实现欢迎注册头部模块制作（4）实现注册表单模块制作（5）实现同意隐私政策和服务条款复选框模块设置3.代码截图如下所示任务描述制作企业网站注册页面任务描述制作企业网站注册页面任务描述制作企业网站注册页面任务描述效果图如下制作企业网站登录页面实现登录界面模块的制作（1）首先，对CSS样式进行初始化设置，以消除不同浏览器默认样式的影响，从而提高开发效率。主要设置如下：字体：Arial或无衬线字体；列表：无标记；背景：固定居中全屏覆盖；布局：弹性盒子居中对齐；尺寸：100vh高度，0外边距（2）将08-login.css样式引入08-
login.html页面。（3）实现logo模块制作（4）实现登录选项模块（5）实现登录form表单模块制作（6）实现查看隐私和注册账号链接模块设置3.部分代码截图如下所示通用样式设置代码放置于08-register.css文件中，任务描述制作企业网站登录页面任务描述制作企业网站登录页面任务描述制作企业网站登录页面任务描述效果图如下图表单控件任务描述知识准备任务实现任务小结任务测试与考核实训一、单选题1.下列选项中，用来定义下拉列表的标记是（
）A．<input/>B．<textarea></textarea>C．<select></select>D．<form>2.下列选项中,可以实现邮箱验证的是()A．<inputtype="text"/>B．<inputtype="email"/>C．<inputtype="password"/>D．<inputtype="button"/>3.下列选项中,可以设置表单提交按钮的是()A．<inputtype="color"/>B．<inputtype="url"/>C．<inputtype="submit"/>D．<inputtype="file"/>4.下列选项中,可以实现表单元素重置功能的是()。A．<inputtype="password"/>B．<inputtype="email"/>C．<inputtype="reset"/>D．<inputtype="submit"/>5.在HTML中，要创建一个表单（form1），要向服务器发送数据的方式为post，提交表单服务器的地址为process.asp。下面创建表单正确的代码是（）A．<formname=”form1”method=”post”submit=”process.asp”><form>B．<formname=”form1”method=”post”submitSrc=”process.asp”><form>C．<formname=”form1”method=”post”action=”process.asp”><form>D．<formname=”form1”method=”post”src=”process.asp”><form>表单二、填空题1．在HTML表单中，______控件用于输入单行文本，例如用户名、密码等。2．当需要用户输入多行文本，如评论、描述等内容时，应使用______控件。3．______控件通常用于从一组预设的选项中选择一个值，例如选择性别、国籍等。4．如果希望input控件显示为密码输入框，应将其type属性设置为______。5．在select控件中，______标签用于定义一个选项，其value属性用于指定选项的值。6．要使textarea控件的文本内容在提交表单时被发送，需要为其设置______属性。表单任务描述知识准备任务实现任务小结任务测试与考核实训请根据本章节所学内容，完成主题为“社会责任”的网站实训实训目的表单1.掌握HTML表单控件（input/textarea/select）的基本使用。2.运用CSS美化表单界面，提升视觉体验。3.理解并应用盒子模型，熟练设置边框、内外边距等属性。4.通过表单设计融入社会责任主题，引导关注环保、公益等议题，增强社会责任感。2.实训内容本实训项目是实现社会责任表单页面设计。浏览效果如图所示。请根据本章节所学内容，完成主题为“社会责任”的网站实训3.实训制作过程表单（1）.HTML结构
1）导航栏：显示网站的主要导航链接。
2）社会责任表单：用户可以填写个人信息，并选择他们愿意参与的社会责任活动。
(2).CSS样式
1）重置样式：清除内外边距，设置box-sizing:border-box2）全局样式：字体设为Arial,sans-serif；背景色为#f4f4f43）导航栏：1200×60px，居中，透明背景，Flex布局4）导航链接：移除列表样式，Flex水平排列，项间距15px，链接无下划线，颜色#333，字号16px5）主内容区：1200×710px，居中，Flex水平布局6）侧边栏：380×750px，半透明黑背景，白色文字，内边距20px7）侧边栏内容：标题下边距20px，列表项去样式，项间距10px8）表单容器：宽820px，白背景，内边距20px，圆角8px，阴影效果9）表单控件：下边距15px，标签灰色加粗；输入框类宽度100%，内边距10px，1px浅灰边框，圆角4px，字号14px；焦点状态边框色#007bff，无轮廓。请根据本章节所学内容，完成主题为“社会责任”的网站实训3.实训总结表单1．简述什么是表单控件，都有哪些常用的表单控件？2．如何设置表单控件的样式？项目9实现网页中的动画效果CSS3高级特性掌握过渡的多种属性，能够为网页中的元素添加过渡效果;掌握变形的多种属性，能够制作2D变形效果和3D变形效果;掌握动画的多种属性，能够为网页中的元素添加动画效果。任务描述知识准备任务实现任务小结任务测试与考核实训制作客户案例页面。包括企业实现智能办公升级和赋能服务模块。1.HTML结构（1）创建“企业实现智能办公升级”展示区结构。（2）创建“赋能服务”展示区结构。2.CSS样式（1）整体页面的版心宽度设置1200px，并居中显示；（2）“企业实现智能办公升级”部分背景颜色为浅灰色（#eaeef6）；（3）每个内容盒子的大小为宽度386px，高度390px，背景颜色为白色，左外边距20px，下外边距20px；（4）设置鼠标经过时标题颜色变蓝加粗，盒子产生阴影效果并向左上移动2px；（5）“赋能服务”部分背景颜色为白色（#fefeff），鼠标经过图片产生放大动画效果。任务描述任务描述知识准备任务实现任务小结任务测试与考核实训过渡属性变形属性动画属性知识准备1：过渡属性过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用
Flash
动画或JavaScript
的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。CSS过渡能够为CSS属性的变化赋予平滑的动画效果，而非生硬的瞬间切换。这一动画由四个属性协同控制：transition-property（定义过渡属性）、transition-duration（设置持续时间）、transition-timing-function（控制变化节奏）以及transition-delay（设置开始延迟）。我们现在经常和:hover一起搭配使用。transition-property属性指定哪些CSS属性需要应用过渡效果。只有在这里列出的属性，在值变化时才会产生动画。其基本语法格式如下：在上述语法格式中，transition-property的属性值具体说明如表所示：知识准备1：过渡属性1.transition-property属性transition-property:none|all|property;属性名称说明none没有属性会获得过渡效果。all所有属性都将获得过渡效果。property定义应用过渡效果的
CSS属性名称列表，列表以逗号分隔。transition-duration定义过渡效果持续的时间，即动画从开始到结束需要花费多久。其基本语法格式如下：在上述语法格式中，transition-duration属性的值以秒（s）或毫秒（ms）为单位（例如0.5s或500ms）。默认值为0，表示无动画。知识准备1：过渡属性2.transition-duration属性transition-duration:time;transition-timing-function属性定义过渡效果的速度曲线，控制动画在持续时间内的变化速率（如先快后慢、匀速等）。其基本语法格式如下：transition-timing-function属性用于定义过渡动画的速度曲线，其默认值为ease（慢速开始，加速，再慢速结束）。除默认值外，还可选用以下常用速度曲线：
linear：匀速变化
ease-in：慢速开始
ease-out：慢速结束
ease-in-out：慢速开始和结束
cubic-bezier：通过贝塞尔曲线自定义速度模式（基础场景建议优先使用前述预设值）知识准备1：过渡属性3.transition-timing-function属性transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);transition-delay属性用于指定过渡效果延迟开始的时间。其基本语法格式如下：上述语法格式中，time：指定延迟时间，常用单位为秒(s)或毫秒(ms)，默认值为0，表示不延迟。知识准备1：过渡属性4.transition-delay属性transition-delay:
time;CSS过渡动画四个属性案例例9-1启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter09文件夹），新建HTML文件，命名为demo9-1.html。部分代码如下：知识准备1：过渡属性鼠标悬停时，div经过2秒延迟后，背景色和宽度同时开始过渡变化：背景色从天空蓝渐变为绿色，宽度从300px扩展到500px，整个过程持续3秒，呈现慢进慢出的缓动效果。div:hover{width:500px;background-color:green;transition-property:background-colorwidth;/*指定产生动画过渡效果的CSS属性*/transition-duration:3s;/*指定动画过渡效果的时间*/transition-timing-function:ease-in-out;/*指定以慢速开始和结束的过渡效果*/transition-delay:2s;/*指定动画过渡动作延迟触发*/}div{width:300px;height:50px;background-color:skyblue;color:brown;font-weight:bold;}<body><div>会挽雕弓如满月，西北望，射天狼。</div></body>
transition属性通过一个声明，即可定义元素样式变化时的平滑过渡效果。它集成了四个关键值：过渡属性(property)、持续时间(duration)、速度曲线(timing-function)和延迟时间(delay)。其基本语法格式如下：在使用transition属性时，它的各个参数必须按照顺序进行定义，不能颠倒。
property：指定哪些CSS属性会触发过渡或动画。
duration：定义效果持续的时间。
timing-function：定义效果的速度曲线。delay：定义效果开始前的延迟时间。知识准备1：过渡属性5.transition属性transition:
propertydurationtiming-functiondelay;transition属性的用法案例例9-2启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter09文件夹），新建HTML文件，命名为demo9-2.html。部分代码如下：知识准备1：过渡属性当鼠标悬停时，经过2秒延迟，圆形边框开始逐渐变为方形，同时边框颜色从绿色过渡到黄色。整个过渡过程持续3秒，呈现慢速开始和结束的缓动效果。这是通过transition属性设置all值的过渡动画实现的，使边框形状和颜色同时产生平滑变化。div{width:300px;height:300px;border:20pxsolidgreen;border-radius:50%;}div:hover{border-radius:0%;border-color:yellow;/*指定产生动画过渡效果的CSS属性、时间、以慢速开始和结束的过渡效果和动画过渡动作延迟触发*/transition:all3sease-in-out2s;}
方形逐渐过渡为圆形的效果图transform是CSS3中用于对元素进行2D或3D变换的核心属性。通过该属性，开发者可以实现元素的位移、旋转、缩放和倾斜等效果，为网页交互带来更加丰富的视觉体验。其语法格式如下：transform属性可应用于各类元素，其默认值none表示不执行变换。通过为其指定translate()、scale()、rotate()等变换函数，可实现丰富的转换效果。具体说明如表所示：知识准备2：变形属性1.认识transformtransform:none|transform-functions;函数作用translate()基于X和Y坐标重新定位元素，移动元素对象。scale()缩放元素对象，改变元素的尺寸。rotate()旋转元素对象，使元素绕其中心点旋转。过渡属性过渡属性变形属性动画属性在CSS3中，2D转换主要包括4种转换效果，分别是平移、缩放、倾斜和旋转。（1）平移：translate(x,y)平移是指元素位置的变化，包括水平和垂直移动。在CSS3中，使用translate()函数可以实现元素的平移效果，其基本语法格式如下。
参数x-value和y-value分别用于定义水平(X轴)和垂直(Y轴)坐标。
参数值常用单位为像素和百分比。当参数值为负数时，表示反方向移动元素(向左和向上移动)。
如果省略了第二个参数，则取默认值0，即在该坐标轴不移动。知识准备2：变形属性2.2D变形transform:translate(x-value,y-value);translate()函数的使用案例例9-3启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter09文件夹），新建HTML文件，命名为demo9-3.html。部分代码如下：知识准备2：变形属性页面中包含一个带有红色虚线边框的父容器，内部有一个红色背景的子元素。当鼠标悬停在红色子元素上时，该元素会向右平移80px，向下平移20px。.son:hover{transform:translate(80px,20px);/*设置水平向右移动100px，垂直向下移动50px*/}
translate()函数平移后效果图<divclass="father"><divclass="son">平移元素</div></div>在CSS3中，2D转换主要包括4种转换效果，分别是平移、缩放、倾斜和旋转。（2）缩放：scale(x,y)在CSS3中，scale()函数用于实现元素缩放效果，通过定义宽度（X轴）和高度（Y轴）的缩放比例参数来控制元素尺寸的放大或缩小。基本语法格式如下:
x-value：控制宽度缩放比例
y-value：控制高度缩放比例
单参数时：宽高等比例缩放。知识准备2：变形属性2.2D变形transform:scale(x-value,y-value);scale()函数的使用案例例9-4启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter09文件夹），新建HTML文件，命名为demo9-4.html。部分代码如下：知识准备2：变形属性灰色边框父容器内水平排列四个天蓝色矩形。当鼠标悬停父容器时，第二个盒子缩小至0.6倍，第三个盒子宽度放大1.5倍、高度放大2倍，第一和第四个盒子保持不变，缩放过程带有1秒平滑过渡效果，以元素中心为基点缩放，鼠标移出后所有盒子恢复原始尺寸。#box1,#box2,#box3,#box4{float:left;margin:20px;width:140px;height:80px;background-color:skyblue;transition:allease1s;}.father:hover#box2{transform:scale(0.6);/*设置宽度和高度均缩小为原来的一半*/}.father:hover#box3{transform:scale(1.5,2);/*设置宽度放大1.5倍，高度放大2倍*/}scale()函数实现缩放效果在CSS3中，2D转换主要包括4种转换效果，分别是平移、缩放、倾斜和旋转。（3）旋转：rotate(angle)rotate()函数用于实现元素的旋转效果，通过指定角度值使元素在二维平面内顺时针或逆时针转动。默认情况下，元素以其中心点为旋转中心，该中心点位置可通过transform-origin属性进行调整。1）旋转基础基本语法格式如下:
旋转角度值(angle)以度(deg)为单位，正值表示顺时针旋转，负值表示逆时针旋转，默认以元素中心点为旋转中心。知识准备2：变形属性2.2D变形transform:rotate(angle);rotate()函数的使用案例例9-5启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter08文件夹），新建HTML文件，命名为demo9-5.html。部分代码如下：知识准备2：变形属性红色虚线边框的父容器内包含一个红色背景的子元素。当鼠标悬停在子元素上时，该元素会以其中心点为基点顺时针旋转45度，旋转过程中元素的尺寸和位置保持不变，仅发生角度变化。.father{margin:60pxauto;border:1pxdashedred;}.son{text-align:center;line-height:100px;background-color:red;transition:allease1s;}.son:hover{transform:rotate(45deg);/*旋转45度*/}通过rotate()方法实现旋转效果在CSS3中，2D转换主要包括4种转换效果，分别是平移、缩放、倾斜和旋转。2）旋转中心点旋转中心点可以通过transform-origin属性进行自定义设置，该属性用于指定元素变形的基点位置。基本语法格式如下：其中，x-axis定义水平方向的基点位置，y-axis定义垂直方向的基点位置，可以使用关键词（left、center、right、top、bottom）、百分比或具体长度值来指定。知识准备2：变形属性2.2D变形transform-origin:x-axisy-axis;旋转中心点的设置案例例9-6启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter08文件夹），新建HTML文件，命名为demo9-6.html。部分代码如下：知识准备2：变形属性当鼠标悬停在容器上时，四个方块同时以不同中心点进行45度顺时针旋转：第一个以元素中心旋转，第二个以左上角为基点旋转，第三个以右下角为基点旋转，第四个以自定义坐标(30px,70px)为基点旋转，所有旋转过程均带有1秒的平滑过渡动画效果，清晰展示了不同旋转中心点带来的视觉差异。.container:hover.center{transform:rotate(45deg);transform-origin:centercenter;/*默认值，可省略*/}.container:hover.left-top{transform:rotate(45deg);transform-origin:lefttop;/*左上角为旋转中心*/}.container:hover.right-bottom{transform:rotate(45deg);transform-origin:rightbottom;/*右下角为旋转中心*/}.container:hover.custom{transform:rotate(45deg);transform-origin:30px70px;/*自定义坐标点为旋转中心*/}设置旋转中心点效果图2D转换是元素在X轴和Y轴的变化，而3D转换是元素在X轴、Y轴和Z轴的变化。相较于平面化2D转换，3D转换更注重于空间位置上的变化。下面具体介绍网页中一些常用的3D转换效果。（1）3D旋转3D旋转在2D旋转基础上增加了绕X轴、Y轴及Z轴旋转的能力，使元素可以在三维空间中绕指定轴进行立体旋转。这种变换为网页元素创造动态空间视觉效果，是实现三维动画交互的核心技术。1）rotate3d()rotate3d()用于实现同时围绕多个轴的3D旋转，基本语法格式如下。在上述语法格式中，x、y、z的值可以为0或1，当要沿着某个轴旋转，就将对应参数的值设置为1，否设置为0；angle用于定义要旋转的角度。
知识准备2：变形属性3.3D变形rotate3d(x,y,z,angle);2D转换是元素在X轴和Y轴的变化，而3D转换是元素在X轴、Y轴和Z轴的变化。相较于平面化2D转换，3D转换更注重于空间位置上的变化。下面具体介绍网页中一些常用的3D转换效果。（1）3D旋转3D旋转在2D旋转基础上增加了绕X轴、Y轴及Z轴旋转的能力，使元素可以在三维空间中绕指定轴进行立体旋转。这种变换为网页元素创造动态空间视觉效果，是实现三维动画交互的核心技术。2）perspective属性为了呈现良好的3D透视效果，还需要设置perspective属性来定义视距，该属性通过调整观察者与3D元素之间的距离来增强立体空间表现。基本语法格式如下。在上述语法格式中，参数值可以为none或者数值(一般为像素值)。在使用perspectve属性设置3D透效果时，参数值越小，3D透视效果越突出。知识准备2：变形属性3.3D变形perspective:参数值;rotate3d()案例例9-7启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter09文件夹），新建HTML文件，命名为demo9-7.html。部分代码如下：知识准备2：变形属性五个天蓝色方块在透视容器中水平排列，悬停时分别呈现不同的3D旋转效果：依次绕X轴翻折、Y轴旋转、Z轴转动、XY轴复合翻转及XYZ轴三维变换，通过rotate3d()函数与透视距离的配合，清晰展现了各轴向旋转的空间差异。.container:hover#box1{transform:rotate3d(1,0,0,60deg);/*主要围绕X轴旋转*/}.container:hover#box2{transform:rotate3d(0,1,0,60deg);/*主要围绕Y轴旋转*/}.container:hover#box3{transform:rotate3d(0,0,1,60deg);/*主要围绕Z轴旋转*/}.container:hover#box4{transform:rotate3d(1,1,0,60deg);/*同时围绕X轴和Y轴旋转*/}.container:hover#box5{transform:ro
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 消防安全考核试题及答案
- 肾上腺危象诊疗试题（附答案）
- 林芝地区一级建造师考试（通信与广电工程管理与实务）真题及答案
- 初级护师基础护理学模拟试题及答案
- 2026年浙江温州专业技术人员公需科目试题及答案
- 2026年陕西省公务员考试（申论）能力提高训练题及答案
- 2026年留疆战士考试题库及答案的需求人群分析
- 2026年公安警务涉恐案件办理知识考试试题及答案
- 2025社区教育岗位试题库及答案
- 安徽省江南十校2026届高三下学期开学考试政治试卷（含答案） 江南十校开学考政治答案
- 1输变电工程施工质量验收统一表式（线路工程）-2024年版
- 12DX011《建筑电气制图标准》图示
- 印刷企业绩效考核全案模板
- 住院医师运行病历检查评分表（医院肿瘤科表格模板）
- 心功能四级的护理措施
- 变电站设备巡视要点课件
- 空调电气安装工程施工方案
- “三龄两历一身份”核定表
- 随货同行单模板
- GB/T 4937.3-2012半导体器件机械和气候试验方法第3部分：外部目检
- 危险化学品-培训-课件
评论
0/150
提交评论