网站设计与网页制作立体化项目教程（第4版） 课件任务4：“英博特智能科技”企业网站二三级页面布局_第1页
网站设计与网页制作立体化项目教程（第4版） 课件任务4：“英博特智能科技”企业网站二三级页面布局_第2页
网站设计与网页制作立体化项目教程（第4版） 课件任务4：“英博特智能科技”企业网站二三级页面布局_第3页
网站设计与网页制作立体化项目教程（第4版） 课件任务4：“英博特智能科技”企业网站二三级页面布局_第4页
网站设计与网页制作立体化项目教程（第4版） 课件任务4：“英博特智能科技”企业网站二三级页面布局_第5页
已阅读5页，还剩86页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

任务4：“英博特智能科技”企业网站二三级页面布局第二篇：项目实战篇4.1产品案例页面制作4-1

产品案例页面制作能力要求学习导览（1）掌握竖向二级导航菜单的制作。（2）掌握FontAwesome图标字体库的使用。（3）会使用服务器端字体。（4）掌握背景属性的设置方法，能够设置背景颜色和图像。（5）理解渐变属性的原理，能够设置渐变背景。任务概述本次任务完成“英博特智能科技”企业网站二级页面产品案例页面制作，经过结构分析，发现页面头部、横幅广告和页尾与首页一致，因此只需在首页基础上，更改中间内容即可。搭建好产品案例页面结构后，主要完成左侧竖向导航制作、右侧产品案例图文混排制作。4.1产品案例页面制作任务思考（1）一级导航菜单左侧的小图标可以用哪些方法实现？

（2）二级导航菜单的显示和隐藏是如何实现的？

（3）网页中如何换段和换行？

4.1产品案例页面制作FontAwesome图标字体库4.1产品案例页面制作FontAwesome是一套图标字体库和CSS框架，为我们提供可缩放的矢量图标，我们可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。步骤1：下载字体图标库文件夹“font-awesome”，也可以用国内外推荐的CDN。如果引用CDN，则步骤2可以省略。步骤2：复制整个font-awesome文件夹到项目中。步骤3：在HTML的<head>中引用font-awesome.min.css样式表文件。步骤4：开始使用FontAwesome。FontAwesome图标字体库4.1产品案例页面制作（1）下载字体图标库文件夹。①FontAwesome官网下载。通过站点/下载字体图标库，我们选择了V4.7版本，也可下载最新版本。下载后得到“font-awesome-4.7.0.zip”压缩文件。②国内推荐CDN。<linkrel="stylesheet"href="/font-awesome/4.7.0/css/font-awesome.css">③海外推荐CDN。<linkrel="stylesheet"href="/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">FontAwesome图标字体库4.1产品案例页面制作（2）复制字体图标库文件夹到项目中。将下载后得到“font-awesome-4.7.0.zip”解压缩，复制整个font-awesome文件夹到项目中。（3）在HTML的<head>中引用font-awesome.min.css。<linkrel="stylesheet"type="text/css"href="font-awesome-4.7.0/css/font-awesome.min.css">提示：href里的路径根据项目中font-awesome.min.css所在实际路径确定。（4）使用FontAwesome。<i>和<span>元素广泛用于图标，FontAwesome与内联元素一起使用。更改<i>和<span>元素字体大小或颜色，图标也会更改。可以使用前缀

fa

和图标的名称来放置FontAwesome图标。FontAwesome图标字体库4.1产品案例页面制作【示例代码】2-4-1.html。引用font-awesome.min.css<i>元素广泛用于图标，使用前缀

fa

和图标的名称来放置FontAwesome图标。CSS3服务器端字体4.1产品案例页面制作浏览器显示网页上的字体只能局限在用户电脑里已经安装的字体里，但每个用户电脑里安装的字体不尽相同，因此网页里设置的字体在用户电脑里未必能显示出来。@font-face的作用是从网上下载并使用自定义字体，使页面显示字体不依赖用户的操作系统字体环境。在@font-face规则中，先定义字体名称（例如myFirstFont），然后指向字体文件。字体的URL使用小写字母，大写字母可能会在IE中产生意外结果。定义好字体后，再通过font-family属性使用定义的字体。CSS3服务器端字体4.1产品案例页面制作【示例代码】2-4-2.html。步骤1：定义字体名称，指向字体文件步骤2：通过font-family属性使用定义的字体步骤3：使用定义的样式使用了服务器端字体的文字样式和默认文字样式的确有区别。CSS3新增背景属性4.1产品案例页面制作通过background-image属性可以添加多张背景图片，不同的背景图片用逗号隔开，越靠前的图片层级越高。通过background-image、background-repeat、background-position和background-size等属性值可以实现多重背景图像效果，各属性值之间用逗号隔开。（1）background-image属性设置多重背景CSS3新增背景属性4.1产品案例页面制作【示例代码】2-4-3.html：background-image属性设置多重背景案例。该示例实现了盒子四个角上分别放置了一张背景，从而实现了多重背景的放置。设置了4张背景图片设置背景图片不重复设置背景图片位置在盒子的上、下、左、右四个角。（1）background-image属性设置多重背景CSS3新增背景属性4.1产品案例页面制作（2）background-size属性在CSS3中，background-size属性用于设置背景图像的大小，可以指定像素或百分比大小。如果指定的是百分比大小，则是相对于父元素的宽度和高度的百分比的尺寸，还有cover和contain两个属性值。background-size属性值类型如下表所示。CSS3新增背景属性4.1产品案例页面制作（2）background-size属性修改【示例代码】2-4-3.html，在样式表中增加如下代码，保存后，在浏览器中查看，发现背景图片大小发生了改变，每张背景图片占所在父容器宽度的20%。background-size:20%,20%,20%,20%;增加background-size前增加background-size后CSS3新增背景属性4.1产品案例页面制作（3）background-origin属性background-origin属性指定了背景图像的位置区域，属性取值有content-box、padding-box和border-box。background-origin属性取值如表2-4-2所示。CSS3新增背景属性4.1产品案例页面制作（3）background-origin属性【示例代码】2-4-4.html：background-origin设置不同属性值案例。下面三幅效果图显示了background-origin设置不同值时，背景图片开始渲染的位置也不同。content-boxborder-boxpadding-box设置background-origin属性CSS3新增背景属性4.1产品案例页面制作（4）background-clip属性背景从盒子左上角开始渲染，background-clip背景裁剪属性是从指定位置开始裁切，属性取值和background-origin一样，包括content-box、padding-box和border-box。background-clip属性取值如下表所示。虽然background-clip和background-origin属性取值一样，但含义完全不同。对于background-clip,

是指将背景图片以border的尺寸、padding的尺寸或者content的尺寸进行裁切，其得到的结果可能是不完整的背景，也就是其中的一部分(原理与截图差不多)。而background-origin，是指将背景图片放置到border范围内、padding范围内或者content范围内，其得到的结果是完整的背景(原理与图片的缩放相似)。CSS3新增背景属性4.1产品案例页面制作（4）background-clip属性分别把background-clip和background-origin属性值设置为content-box，通过观察，可以发现background-clip以content的尺寸大小进行了裁切，背景图不完整了。而background-origin是指将背景图片放置到content范围内开始的起点，图片没有被裁切，只是背景图片放置的起点位置发生变化而已。background-clip属性

background-origin属性CSS3新增背景属性4.1产品案例页面制作（5）background属性background背景缩写属性可以在一个声明中设置所有的背景属性。可以设置的属性分别是：background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment和background-image。语法如下：background:bg-colorbg-imageposition/bg-sizebg-repeatbg-originbg-clipbg-attachmentinitial|inherit;background-position和background-size属性,之间需使用/分隔,且position值在前,size值在后。CSS3新增背景属性4.1产品案例页面制作（5）background属性background属性取值如下表所示。CSS3新增背景属性4.1产品案例页面制作（5）background属性修改【示例代码】2-4-3.html下方部分代码：修改后代码如下：【示例代码】详见2-4-3.html修改后的显示效果和修改前是一样的，background属性是一种缩写属性，效果与分开设置一样，但代码更加精简了。CSS3新增背景属性4.1产品案例页面制作（6）背景透明度的设置通过引入RGBA模式，用rgba()函数使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。例如：使用RGBA模式为p元素指定透明度为0.5，颜色为红色的背景。p{background-color:rgba(255,0,0,0.5);}RGBA模式属性取值如下表所示。CSS3新增背景属性4.1产品案例页面制作（6）背景透明度的设置【示例代码】2-4-5.html：RGBA模式。上图只设置背景色为红色：background-color:red。下图用RGBA模式设置了透明度：rgba(255,0,0,0.3)。通过比较发现，右侧图片明显带有透明效果，颜色比左侧红色略浅。用RGBA模式设置背景颜色CSS3渐变4.1产品案例页面制作渐变是网页设计中使用频率较高的一种效果，它可以让元素看起来更有质感。传统的渐变实现方式是用图像实现效果的，而CSS3能方便的实现元素的渐变，减少图片下载的时间，同时使用渐变效果的元素会随着浏览器的放大而效果更好。CSS3渐变（gradients）可以实现在两个或多个指定的颜色之间显示平稳的过渡，主要定义了线性渐变和径向渐变两种类型的渐变。CSS3渐变4.1产品案例页面制作（1）线性渐变（LinearGradients）创建一个线性渐变，需至少定义两种颜色节点，颜色节点用于呈现平稳过渡的颜色。同时，还可以设置一个起点和一个方向（或一个角度）。①方向线性渐变的方向主要包括向下/向上/向左/向右/对角等方向，如tobottom、totop、toright、toleft、tobottomright等。语法如下：background-image:linear-gradient(direction,color-stop1,color-stop2,...);CSS3渐变4.1产品案例页面制作（1）线性渐变（LinearGradients）【示例代码】2-4-6.html：线性渐变（设置方向）。实现了方向由下到上，颜色由红色到黄色的线性渐变。CSS3渐变4.1产品案例页面制作（1）线性渐变（LinearGradients）②角度如果想要在渐变的方向上做更多的控制，可以定义角度，而不用预定义方向。语法如下：background-image:linear-gradient(angle,color-stop1,color-stop2);角度对应方向如图所示：CSS3渐变4.1产品案例页面制作（1）线性渐变（LinearGradients）【示例代码】2-4-7.html：线性渐变（设置角度）。实现了角度为左上45度角，颜色由红色过渡到黄色，再到蓝色的线性渐变。CSS3渐变4.1产品案例页面制作（2）径向渐变（RadialGradients）创建一个径向渐变，必须至少定义两种颜色节点。颜色节点用于呈现平稳过渡的颜色。可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是center（表示在中心点），渐变的形状是ellipse（表示椭圆形），渐变的大小是farthest-corner（表示到最远的角落）。语法如下：background-image:radial-gradient(shapesizeatposition,start-color,...,last-color);CSS3渐变4.1产品案例页面制作（2）径向渐变（RadialGradients）【示例代码】2-4-8.html：径向渐变。实现了颜色由红色到黄色再到绿色的径向圆形渐变。任务实施竖向导航制作02.产品案例图文混排制作03.01.搭建页面结构具体要求见任务书4.1产品案例页面制作讨论区运用本课学习的技术，模仿完成效果图所示竖向二级导航菜单。要求有文字、图片，截图上传讨论区。4.1产品案例页面制作讨论区运用所学知识，完成小米平板产品案例页面的制作，要求有文字、图片，截图上传讨论区。4.1产品案例页面制作4.1产品案例页面制作完成在线测试题。学习其他二级导航菜单的制作和产品案例页面的制作。运用本课学习的技术，完成竖向二级导航菜单和产品案例图文混排（详见能力拓展）。日拱一卒无有尽，功不唐捐终入海！Web前端技术基础任务4：“英博特智能科技”企业网站二三级页面布局第二篇：项目实战篇4.2产品详细信息页面制作4-2产品详细信息页面制作能力要求学习导览（1）掌握HTML表格和表格属性。（2）掌握表格的跨行和跨列操作。（3）掌握嵌套表格的插入。（4）会使用CSS样式设置表格。任务概述本次任务完成三级页面中产品详细信息页面制作，该任务主要包括三个模块，上部是产品图片信息介绍，中部是产品详情介绍和规格参数，下部是产品应用场景。4.2产品详细信息页面制作任务思考（1）中部产品详情介绍“双舵轮背负式”内容可以采用哪些方法实现内容布局？

（2）数据表格主要设置了哪些样式？

（3）数据表格隔行显示不同的背景色可以采用什么方法快速实现？

4.2产品详细信息页面制作HTML表格元素常用表格标签包括table（表格）标签、tr（表格行）标签、th（表头）标签和td（表格单元格）标签，它们组成了HTML的基本表格结构。更复杂的HTML表格也可以包括caption、col、colgroup、thead、tfoot以及tbody元素。4.2产品详细信息页面制作HTML表格元素4.2产品详细信息页面制作【示例代码】2-4-9.html：表格。table定义表格caption定义表标题tr定义行th定义表头td定义单元格该示例插入了一个5行3列的表格。HTML表格属性（1）表格属性table标签的常用属性如下表所示，其中width、border、cellspacing和cellpadding属性的度量单位有两种，即百分数和像素。当使用百分数作为单位时，其值为相对于上一级元素宽度的百分数，并用符号%表示，它不是一个固定值。4.2产品详细信息页面制作HTML表格属性（2）行、单元格属性tr标签的常用属性如下表所示：4.2产品详细信息页面制作th标签和td标签的常用属性下表所示。这些标签的属性中都有align和valign属性。如果在th标签和td标签中不设置align和valign属性，默认情况下，th在水平和垂直方向上都为居中对齐，加粗显示，td标签的水平方向为左对齐，垂直方向为居中对齐。CSS表格样式可以使用CSS表格属性改善表格的外观。CSS常用表格属性如下表所示：4.2产品详细信息页面制作CSS表格样式可以使用CSS表格属性改善表格的外观。CSS常用表格属性如下表所示：结合前面所学的CSS样式属性，对表格进行美化。4.2产品详细信息页面制作美化前美化后表格跨行跨列（1）跨行跨行是指一个单元格占据两行或两行以上。使用td元素的rowspan属性来实现单元格的跨行操作。4.2产品详细信息页面制作【示例代码】2-4-10.html：跨行。跨2行，即合并2行单元格表格跨行跨列（2）跨列跨列是指一个单元格占据两列或两列以上。一般使用td元素的colspan属性来实现单元格跨列操作。注意：在同一个表格中，可以同时使用跨行跨列。但在使用跨行跨列时，要计算好，同一个单元格，不能出现既跨行、又跨列的情况。4.2产品详细信息页面制作【示例代码】2-4-11.html：跨列。跨2列，即合并2列单元格表格嵌套（2）跨列在一个大的表格中，再嵌进去一个或几个小的表格称作是表格的嵌套。即在单元格th或td中再插入一个或多个新的表格。4.2产品详细信息页面制作【示例代码】2-4-12.html：表格嵌套。在td里面嵌套了一个table任务实施图文内容设计02.数据表格设计03.01.搭建页面结构具体要求见任务书4.1产品案例页面制作编写相关样式04.讨论区运用本课学习的技术，模仿完成效果图所示产品详情一览表。要求有文字、图片，截图上传讨论区。4.1产品案例页面制作讨论区运用所学知识，模仿完成效果图所示房屋信息表。要求有文字、图片，截图上传讨论区。4.1产品案例页面制作4.1产品案例页面制作完成在线测试题。运用本课学习的技术，完成产品详情一览表和房屋信息表产品案例图文混排（详见能力拓展）。吾生也有涯，而知也无涯！Web前端技术基础任务4：“英博特智能科技”企业网站二三级页面布局第二篇：项目实战篇4.3应用场景详细信息页面制作4-3应用场景详细信息页面制作能力要求学习导览（1）能在网页中添加音频、视频等多媒体文件。（2）熟悉video标签的相关属性。（3）熟悉audio标签的相关属性。任务概述本次任务完成音频和视频的插入，该模块经过结构分析，主要包含上下两部分，上面插入视频，下面插入音频。4.3应用场景详细信息页面制作任务思考（1）网页中常见的多媒体元素有哪些？

（2）常见的音频和视频格式有哪些？

（3）HTML5标签中新增的音频、视频标签是什么？该如何使用？

4.3应用场景详细信息页面制作音频声音能极好地烘托网页页面的氛围，网页中常见的声音格式有WAV、MP3、MIDI、AIF、RA或RealAudio格式。HTML5规定了在网页上嵌入音频元素的标准，即使用audio元素。目前audio元素支持三种音频格式文件:MP3、Wav和Ogg。4.3应用场景详细信息页面制作【示例代码】2-4-13.html：插入音频。音频4.3应用场景详细信息页面制作audio元素允许使用多个source元素，source元素可以链接不同的音频文件，浏览器将使用第一个可识别的格式。audio标签提供了许多属性，如下表所示。音频4.3应用场景详细信息页面制作Audio支持的音频格式如下表所示。视频4.3应用场景详细信息页面制作video标签定义视频，比如电影片段或其他视频流。目前，<video>元素支持三种视频格式：MP4、WebM、Ogg。video元素允许使用多个source元素，source元素可以链接不同的音频文件，浏览器将使用第一个可识别的格式。video标签还提供了许多属性，如下表所示。【示例代码】2-4-14.html：插入视频。视频4.3应用场景详细信息页面制作video属性如下表所示。视频格式类型如下表所示。任务实施插入音频02.插入视频03.01.搭建页面结构具体要求见任务书4.3应用场景详细信息页面制作讨论区运用本课学习的技术，根据效果图完成视频和文字的混排。要求有文字、图片，截图上传讨论区。4.3应用场景详细信息页面制作讨论区运用所学知识，根据效果图完成视频和列表的混排。要求有文字、图片，截图上传讨论区。4.3应用场景详细信息页面制作完成在线测试题。运用本课学习的技术，完成视频和文字的混排及视频和列表的混排（详见能力拓展）。4.3应用场景详细信息页面制作学必求其心得,业必贵其专精！Web前端技术基础任务4：“英博特智能科技”企业网站二三级页面布局第二篇：项目实战篇4.4留言页面制作4-4留言页面制作能力要求学习导览（1）了解表单功能，能够快速创建表单。（2）掌握表单相关元素，能够准确定义不同的表单控件。（3）掌握表单样式的控制，能够美化表单界面。任务概述本次任务完成二级子页面留言页面制作，包括搭建页面结构、插入表单元素、设置表单样式。留言页面主要用到文本字段、电子邮件、多行文本框、下拉列表框、提交按钮等表单元素。4.4留言页面制作任务思考（1）表单在网站中的作用是什么？工作过程是怎样的？

（2）表单元素主要分成哪些类型？常用的表单元素和表单属性有哪些？

（3）表单经常设置的样式有哪些？

4.4留言页面制作表单（1）表单作用表单（form）用于收集用户输入的信息，然后将用户输入的信息提交到action属性所表示的程序文件中进行处理。表单有很多应用，如登录、注册、调查问卷、用户订单等。表单是一个包含表单元素的区域，允许用户在表单中输入内容,比如：文本域、下拉列表、单选框、复选框等等。4.4留言页面制作（2）表单工作过程①访问者在浏览有表单的页面时，可填写必要的信息，然后单击“提交”按钮。②这些信息通过Internet传送到服务器上。③服务器上专门的程序对这些数据进行处理，如果有错误返回错误信息，并要求纠正错误。④当数据完整无误后，服务器反馈一个输入完成信息。表单（3）表单代码<form>与</form>之间的表单控件是由用户自定义的，action、method为表单标记<form>的常用属性。<formaction="url地址"method="提交方式"name="表单名称">

各种表单控件</form>表单常用属性如下表所示。4.4留言页面制作表单元素（1）Input元素①文本字段（inputtype="text/password"）。文本字段可接受任何类型的字母数字项。输入的文本可以显示为单行文本框或密码框，其语法格式如下：

<inputtype="text"name="textfield"id="textfield"/><inputtype="password"name="textfield"id="textfield"/>

②复选框（inputtype="checkbox"）。复选框允许在一组选项中选择多项，用户可以选择任意多个适用的选项。其语法格式如下：

<inputtype="checkbox"name="checkbox"id="checkbox"/>

③单选按钮（inputtype="radio"）。单选按钮代表互相排斥的选择。选择一组中的某个按钮，就会取消选择该组中的所有其他按钮。例如，用户可以选择“是”或“否”按钮。其语法格式如下：

<inputtype="radio"name="radio"id="radio"value="radio"/>4.4留言页面制作表单元素（1）Input元素④图像域（inputtype="image"）。“图像域”使您可以在表单中插入图像。可以使用图像域替换“提交”按钮，以生成图形化按钮。其语法格式如下：

<inputtype="image"name="imageField"id="imageField"src="images/1-1.png">

⑤文件域（inputtype="file"）。“文件域”在文档中插入空白文本域和“浏览”按钮。文件域使用户可以浏览到其硬盘上的文件，并将这些文件作为表单数据上传。其语法格式如下：

<inputtype="file"name="fileField"id="fileField">

⑥按钮（inputtype="submit/reset"）。按钮在单击时执行任务，如提交或重置表单。可以为按钮添加自定义名称或标签，或者使用预定义的“提交”或“重置”标签之一。其语法格式如下：

<inputtype="submit"name="button"id="button"value="提交"><inputtype="reset"name="button"id="button"value="重置">4.4留言页面制作表单元素（1）Input元素⑦电子邮件（inputtype="email"）。“电子邮件”是一种专门用于输入E-mail地址的文本输入框，用来验证email输入框的内容是否符合Email邮件地址格式。如果不符合，将提示相应错误信息。<inputtype="email"/>⑧url地址（inputtype="tel"）。url类型的input元素是一种用于输入URL地址的文本框。<inputname="url"type="url"/>⑨电话号码（inputtype="tel"）。tel类型用于提供输入电话号码的文本框，通常会和pattern属性配合使用。<inputtype="tel"name="telphone"pattern="^\d{11}$"/>⑩搜索框（inputtype="search"）。search类型是一种专门用于输入搜索关键词的文本框，它能自动记录一些字符。右侧会附带一个删除图标，单击这个图标按钮可以快速清除内容。<inputtype="search"name="searchtxt"/>4.4留言页面制作表单元素（1）Input元素⑪颜色框（inputtype="color"）。color类型用于提供设置颜色的文本框，实现RGB颜色的输入，可以通过value属性值更改默认颜色。<inputtype="color"name="colorbox"value="#00ff00"/>⑫数值框（inputtype="number"）。number类型用于提供输入数值的文本框。在提交表单时，会自动检查输入框中的内容是否为数字，如果不是数字或者数字不在限定范围内，则会出现错误提示。<inputtype="number"name="number1"value="1"min="1"max="20"step="4"/>⑬滑动条（inputtype="range"）。range类型的input元素用于提供一定范围内数值的输入范围，在网页中显示为滑动条,value属性用于设置或返回滑块控件的value属性值。<inputtype="range"name="number1"value="1"min="1"max="20"step="4"/>4.4留言页面制作表单元素（1）Input元素⑭时间日期（Datepickers）。HTML5中提供了多个可供选取日期和时间的输入类型，用于验证输入的日期。<inputtype=date,month,week…"/>时间和日期类型如下表所示：4.4留言页面制作表单元素（2）Inp

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论