《全套课件·HTML5与CSS3项目实战》由会员分享，可在线阅读，更多相关《全套课件·HTML5与CSS3项目实战（199页珍藏版）》请在金锄头文库上搜索。
1、同城旅游界面设计同城旅游界面设计项项 目目 一一企业级卓越人才培养（信息类专业集群）目目 录录 01 学习目标 02 学习路径 03 任务描述 04 任务技能 05 任务实施 06 任务总结01 01 学习目标学习目标学习目标学习目标了解HTML5的文档结构、新增标签了解CSS样式规则掌握CSS3选择器学习目标通过实现同程旅游 界 面 ， 学 习HTML5与CSS3相关知识，了解HTML5与CSS3发展历史、基础标签和自适应网站标签的使用了解自适应网站的概念企业级卓越人才培养（信息类专业集群）02 02 学习路径学习路径学习路径学习路径企业级卓越人才培养（信息类专业集群）03 03 任务描述任
2、务描述 01情境导入任务描述任务描述企业级卓越人才培养（信息类专业集群）情境导入情境导入随着科技的发展，网络在人们的生活中占着主导地位，而旅游作为人们缓解压力的方式之一，旅游网站也慢慢的走进了我们的生活。本次任务主要是实现同程旅游的界面设计。企业级卓越人才培养（信息类专业集群）功能描述功能描述情境入01 01 02 03 04企业级卓越人才培养（信息类专业集群）基本框架基本框架企业级卓越人才培养（信息类专业集群）系统环境Windows7系统及以上系统软件环境服务器浏览器SublimeTextTomcat7.0电脑端：火狐浏览器谷歌浏览器手机端：Webkit内核浏览器Android手机内置浏览器
3、开发环境开发环境企业级卓越人才培养（信息类专业集群）04 04 任务技能任务技能任务技能 HTML5概述 HTML5基础 网页编辑器及环境 CSS3初体验 CSS样式表 CSS选择器任务技能任务技能企业级卓越人才培养（信息类专业集群）建设制造强国12HTML5万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改（W3CRecommendation）。2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，标准规范终于制定完成。（1）快速迭代（2）减低成本（3）导流入口多（4）分发效率高HTML5概述概述HTML5的发展HTML5的优点企业级卓越人才培
4、养（信息类专业集群）HTML5文档的基本结构HTML5语法HTML5新增标签（1）用于向浏览器说明当前文档使用哪种HTML标签。（2）和分别表示文档的开始和结束，用于告知浏览器其自身是一个HTML文档。（3）为头部标签，用于定义HTML文档的头部信息，紧跟在标签后，里面包括的内容有、和等。（4）为主体标签，用于定义HTML文档所要显示的内容，在浏览器中所看到的图片，音频，视频，文本等都位于内。该标签中的内容是展示给用户看的。HTML5为了更大兼容各浏览器，在设计和语法方面发生了一些变化，语法变化的主要内容如下：l标签不在区分大小写l元素可以省略结束标签l允许省略属性的属性值l允许属性值不使用引
5、号HTML5基础基础HTML5和HTML相比，增加了结构标签，语义标签、特殊功能标签以及audio和video标签等。其中新增标签如表标签标签描述描述用于描述页面上一处完整的文章用于定义导航条，包括主导航条、页面导航、底部导航等aside用于定于当前页面的附属信息，内容和article内容相关hgroup用于对网页或区段（section）的标题进行组合用于对元素进行组合header用于定义文档的页眉（介绍信息）footer用于定义 section 或 document 的页脚企业级卓越人才培养（信息类专业集群）网页编辑器自适应网页设计手机端访问网页环境部署3随着编写网页的语言在不断的更新，网页
6、编辑器也在不断的开发。其中几款为大家所熟知的网页编辑器有Notepad+、Dreamweaver、SublimeText随着智能手机的普及，设计的界面也需在手机端显示，为了能够在手机端正常显示，我们需要使网页宽度自动调整。（1）在网页代码的头部，加入一行viewport元标签。（2）不使用绝对宽度（3）MediaQuery模块，自动探测屏幕宽度（4）media，根据不同的屏幕分辨率，选择不同的CSS规则。在SublimeText制作完之后，点击浏览器就能出现效果，想要手机访问，我们不仅需要在头部添加响应式布局所对应代码，还需配置服务器的环境才可以在手机上访问。（1）下载tomcat软件，网址为
7、http:/tomcat.apache.org/download-70.cgi（2）配置tomcat环境（3）启动Tomcat软件网页编辑器及环境网页编辑器及环境企业级卓越人才培养（信息类专业集群）建设制造强国CSS3（CascadingStyleSheet，层叠样式表）是一种不需要编译、可直接由浏览器执行的标记性语言，用于控制页面的布局、文字的大小和颜色、图片位置、列表、表单等样式。CSS3的产生大大简化了编程模型CSS3主要是给文字、图片设置样式和布局，CSS3的标准格式为：选择器属性1:属性值1；属性2:属性值2CSS3初体验初体验CSS3概述CSS3样式规则企业级卓越人才培养（信息类专
8、业集群）建设制造强国2CSS3样式可以写在HTML标签内，用style属性表示，这个方法简便快捷，但是具有局限性，无法通用，该属性的语法格式为：定义内部样式表即CSS3样式表写在HTML文档内，我们可以对整个或者整个设置样式，也可以对单个标签设置样式。CSS3样式表样式表定义标记的style属性定义内部样式企业级卓越人才培养（信息类专业集群）建设制造强国4嵌入外部样式表就是在HTML代码中直接导入样式表的方法。基本语法importurl(外部样式表的文件名称);链接外部样式表就是把外部的CSS文件链接到HTML中，基本语法为：CSS3样式表样式表嵌入外部样式表链接外部样式表企业级卓越人才培养（
9、信息类专业集群）类选择器标签选择器ID选择器后代选择器CSS选择器选择器子选择器伪类选择器企业级卓越人才培养（信息类专业集群）05 05 任务实施任务实施输入标题输入标题输入标题第一步：在里面添加标签，使网页适应手机屏幕宽度。第二步：头部为同程旅游的logo，用标签表示第三步：主体部分包括各种图片的超链接，需要用到列表样式标签第四步：尾部主要为本站点的版权信息，版权信息的样式为文字居中，内间距为10px点击输入说明文字点击输入说明文字点击输入说明文字任务实施任务实施企业级卓越人才培养（信息类专业集群）06 06 任务总结任务总结任务技能任务技能任务实施任务实施任务拓展任务拓展任务描述任务描述通
10、过本项目的学习，对HTML5的发展、优势、文档结构具有初步了解，对HTML5新增的标签及属性有了初步认识，同时也掌握了CSS3选择器和自适应网站的相关概念。任务总结任务总结企业级卓越人才培养（信息类专业集群）谢谢观赏PPT模板下载： 行业PPT模板： 节日PPT模板： PPT素材下载： PPT图表下载： 优秀PPT下载： PPT教程： Word教程： Excel教程： 资料下载： PPT课件下载： 范文下载： 试卷下载： 教案下载： PPT论坛： 百度导航界面百度导航界面设计设计项项 目目 二二企业级卓越人才培养（信息类专业集群）目目 录录 01 学习目标 02 学习路径 03 任务描述
11、04 任务技能 05 任务实施 06 任务总结01 01 学习目标学习目标学习目标学习目标掌握HTML5中常用的文本标签掌握CSS3文本属性掌握CSS字体属性学习目标通过实现百度导 航 界 面 ， 学 习HTML5与CSS3相关的文本标签、字体颜色以及弹性布局的使用。了解流式布局和弹性布局企业级卓越人才培养（信息类专业集群）02 02 学习路径学习路径学习路径学习路径企业级卓越人才培养（信息类专业集群）03 03 任务描述任务描述 01情境导入任务描述任务描述企业级卓越人才培养（信息类专业集群）情境入01情境导入情境导入百度导航是网络时代最受欢迎的导航之一，百度导航上的功能能够帮助人们解决所遇
12、到的困难，同时百度导航除了搜索之外，还提供一系列的链接，为我们快速、准确的提供信息。本次任务主要是实现百度导航界面的设计。企业级卓越人才培养（信息类专业集群）功能描述功能描述 01 02 03企业级卓越人才培养（信息类专业集群）基本框架基本框架 企业级卓越人才培养（信息类专业集群）系统环境Windows7系统及以上系统软件环境服务器浏览器SublimeTextTomcat7.0电脑端：火狐浏览器谷歌浏览器手机端：Webkit内核浏览器Android手机内置浏览器开发环境开发环境企业级卓越人才培养（信息类专业集群）04 04 任务技能任务技能任务技能 HTML5文本标签 CSS文本属性 CSS字
13、体属性 CSS导航栏 固定布局和流动布局的介绍任务技能任务技能企业级卓越人才培养（信息类专业集群）1段落标签2标题一共有6级，分别用h1-h6表示，其中标题最大的为h1，依次递减，h6最小。标题文本默认是全部加粗是段落标签，主要功能是定义网页中的文本内容，段落标签可以使文本段落上下边距加大HTML5文本标签文本标签标题标签企业级卓越人才培养（信息类专业集群）3标签与标签4标签主要用于换行，使用该标签只能输入空行，不能分割段落。该标签是一个单标签，不能成对出现，没有结束符号标签主要用于软换行，在文本中添加该标签时，当文本内容（中英文部分）在一行放不下时自动换行到下一行标签是用户可以创建一个可折叠
14、的控件，只显示想要的标题和文字，隐藏一些对标题或者文字描述的信息。标签一般与标签配合使用，显示的内容一般为标签的内容，如果点击了标签，则会显示出标签中的内容HTML5文本标签文本标签标签与标签企业级卓越人才培养（信息类专业集群）字体类型1字体风格2字体变形3在CSS中，有两种不同类型的字体系列：通用字体类型：拥有相似外观的字体系统组合（例如“Serif”或“Monospace”）。特定字体类型：具体的字体系列（例如“Times”或“Courier”）。文本字体的设置用font-style属性，该属性有三个取值：normal（文本正常显示）、italic（文本斜体显示）、oblique（对于没有
15、设计过斜体样式的文字强行用代码使其倾斜）小型大写字母使用font-variant属性设置，小型大写字母即字母都是大写字母，但字体尺寸会比大写字母小CSS字体属性字体属性企业级卓越人才培养（信息类专业集群）4字体大小5文本的粗细程度使用font-weight属性设置，该属性功能为字体设置一个加粗程度，用数字或normal、bold、bolder设置，一般设置字体粗度的值为100-900，数字越大，字体越粗，在大多数浏览器中数字400相当于所写的normal，700相当于bold文本中字体的大小一般用font-size属性设置，可以用绝对值、相对值或px、pt、em来表示CSS字体属性字体属性字体
16、加粗企业级卓越人才培养（信息类专业集群）文本对齐属性1文本水平对其2文本垂直对其3text-align用来设定文本的对齐方式。有以下四种设置文本对齐的方式：left(居左，缺省值)，right(居右)，center(居中)，justify(两端对齐)。文本水平对齐用text-align属性设置，该属性根据指定行与某一个点对齐进行设置块级元素文本的水平对齐方式文文本本垂垂直直对对齐齐用用vertical-align属属性性设设置置，在在该该属属性性中中值值可可以以是是负负数数或或者者百百分分比比的的形形式式。在在表表格格中中，通通常常用用这这个个属属性性来来设置单元格内容的对齐方式设置单元格内容
17、的对齐方式CSS文本属性文本属性企业级卓越人才培养（信息类专业集群）文本修饰属性4文本缩进属性5文本字符转换6设设置置文文本本划划线线用用text-decoration属属性性，有有四四种种属属性性值值none(无无，缺缺省省值值)，underline(下下划划线线)，overline(上上划划线线)，line-through(当中划线当中划线)设置文本缩进采用text-indent属性，有以下三种设置方式length长度，绝对单位(cm,mm,in,pt,pc)、相对单位(em,ex,px)或者percentage(百分比，相当于父对象宽度的百分比)文文本本的的大大小小写写用用text-tr
18、ansform属属性性设设置置，有有四四种种取取值值：none（默默认认值值）、uppercase（大大写写）、lowercase（小小写写）和和capitalize（首首字字母母大大写写）。默默认认值值none对对文文本本不不做做任任何何改动，将使用原文档中的原有大小写改动，将使用原文档中的原有大小写CSS文本属性文本属性企业级卓越人才培养（信息类专业集群）1CSS导航栏分为垂直导航栏和水平导航栏，用和元素来设置CSS导航栏导航栏CSS导航栏企业级卓越人才培养（信息类专业集群）1流体布局2在制作界面时自己设置的一个宽度（固定值）叫做固定宽度布局，比如说980px。使用这种布局通常需要设置一个
19、整个的DIV布局，通常里面各个模块的宽度也是固定的，不会根据整个界面的变换而变换，所以说不管是手机端还是在PC端，访问的界面的宽度都是一样的，所显示的信息也是不变的流动布局在设计页面时宽度和高度不再是固定值，而是采用百分比来设置的。现如今主流的网页都是响应式布局网页，在设计网页时采用的都是百分比设置网页的宽度。流体布局页面对用户更友好，因为它能自适应用户的设置。页面周围的空白区域在所有分辨率和浏览器下都是相同的，在视觉上更美观。固定布局和流动固定布局和流动布局布局固定布局企业级卓越人才培养（信息类专业集群）05 05 任务实施任务实施输入标题输入标题第一步：头部制作，把新浪导航页标题和图片在一
20、行现实，调整图片的大小，设置一个下边框，带边框阴影。第二步：主体热点网站链接的制作，采用无序列表和float属性来实现。第三步：主体分类导航链接的制作，取消无序列表默认的无序符号，用float属性设置导航栏左浮动，设置无序列表中文字的大小，颜色和边框第四步：底部版权信息制作，版权信息内容为C，该内容为一个段落，使用段落标签。点击输入说明文字点击输入说明文字任务任务实施实施企业级卓越人才培养（信息类专业集群）06 06 任务总结任务总结任务技能任务技能任务实施任务实施任务拓展任务拓展任务描述任务描述本项目通过对新闻网站导航网页和文本新闻网页设计的探析和练习，重点熟悉HTML5中常用的文本标签、C
21、SS文本属性、字体属性、颜色值及颜色表示方法、CSS链接属性等，学会了网页元素的水平对齐、CSS导航栏的设计，学会了新闻网页和导航网页的设计方法。了解流式布局和弹性布局的优点和缺点，了解CSS框架的原理，为以后我们制作响应式网站打好基础任务总结任务总结企业级卓越人才培养（信息类专业集群）谢谢观赏PPT模板下载： 行业PPT模板： 节日PPT模板： PPT素材下载： PPT图表下载： 优秀PPT下载： PPT教程： Word教程： Excel教程： 资料下载： PPT课件下载： 范文下载： 试卷下载： 教案下载： PPT论坛： 去去哪儿旅游哪儿旅游主界面设主界面设计计项项 目目 三三企业级卓
22、越人才培养（信息类专业集群）目目 录录 01 学习目标 02 学习路径 03 任务描述 04 任务技能 05 任务实施 06 任务总结01 01 学习目标学习目标学习目标学习目标掌握HTML5图像标签的使用掌握CSS3页面背景图像的设置掌握CSS3新增边框属性学习目标通过实现去哪儿旅游主界面，学习HTML5图像相 关 标 签 以 及CSS3图像相关属性，了解和掌握HTML5和CSS3图像标签在实战中的应用企业级卓越人才培养（信息类专业集群）02 02 学习路径学习路径学习路径学习路径企业级卓越人才培养（信息类专业集群）03 03 任务描述任务描述 01情境导入任务描述任务描述企业级卓越人才培养
23、（信息类专业集群）情境导入情境导入在这个信息化的时代，人们现在更多的是利用图片来表达信息，那么在网页编辑时图片的美化和布局是非常重要的，我们需要在表达自己想要表达的信息的同时还要考虑界面的美观，能够让用户在了解信息的同时还要满足用户的视觉享受。本次任务主要是实现去哪儿旅游主界面设计。企业级卓越人才培养（信息类专业集群）功能描述功能描述 01 02 03企业级卓越人才培养（信息类专业集群）基本框架基本框架企业级卓越人才培养（信息类专业集群）系统环境Windows7系统及以上系统软件环境服务器浏览器SublimeTextTomcat7.0电脑端：火狐浏览器谷歌浏览器手机端：Webkit内核浏览器A
24、ndroid手机内置浏览器开发环境开发环境企业级卓越人才培养（信息类专业集群）04 04 任务技能任务技能任务技能 网页中图片格式 HTML5图像标签 背景属性 盒子模型 CSS3边框属性 HTML5图像过渡和变形任务技能任务技能企业级卓越人才培养（信息类专业集群）1在网页中添加图片时，图片的格式与代码中图片的格式必须一致，所以我们需要对图片的格式有一定的了解。在网页中主要使用以下几种图片格式：JPG、PNG、GIF、BMP、PCX、TIFF。其中使用最广泛的图片格式为：JPG、PNG、GIF网页中图片格式网页中图片格式格式企业级卓越人才培养（信息类专业集群）标签1标签2标签3是添加图片的标签
25、，在HTML5中添加图片的基本格式为：。标签可以成对出现也可以写成，在网页编写中标签主要用于添加网站logo和添加网站信息介绍的图片标签是HTML5中的新标签。标签代表一段独立的流内容，主要包括图像、文字、代码等。该标签添加标题时需要标签，所有主流浏览器都支持标签定义图像映射内部的区域通常使用标签，area元素始终嵌套在标签内部。该标签是新增标签，属性有rel、media、hreflang。其中rel是规定当前文档与目标URL之间的关系，media是规定目标URL是为何种媒介/设备优化的，hreflang是规定目标URL的语言HTML5图像标签图像标签企业级卓越人才培养（信息类专业集群）1ma
26、rgin属性2把HTML页面中的元素看作是一个矩形的盒子叫做盒子模型。盒子模型所具备的四个属性为：内容、填充、边框、边界。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。盒子模型的四个 属 性 分 别 是 ： margin、 border、 padding、content在CSS中通过margin属性设置元素边框与相邻元素之间的距离。盒子模型盒子模型盒子模型概念border是为图像添加边框的属性，border的属性值有三种，分别是：边框的粗细程度（2px）、边框的样式（solid）、边框的颜色（#000）padding是设置边框和内部元素之间的距离的属性43border
27、属性padding属性属性描述margin-top上外边距margin-right右外边距magin-bottom下外边距margin-left左外边距margin上外边距 右外边距 下边距 左边距属性描述border-width用来设置边框粗细主要参考值有thin定义细边框，medium定义中等边框border-style 用来设置元素边框样式，主要参考值有none 定义无边框，solid 定义实线border-color用来设置边框的颜色属性描述padding-top上内边距padding-right右内边距padding-bottom下内边距padding-left左内边距padding
28、上内边距 右内边距 下内距 左内距企业级卓越人才培养（信息类专业集群）border-image属性1border-radius属性2box-shadow属性3border-image是使用图像作为标签的边框的属性。但是border-collapse属性不能跟border-image属性同时使用border-radius是实现圆角边框的属性box-shadow是给边框添加阴影效果的属性，box-shadow的属性值包括：阴影宽度、阴影颜色等CSS3边框属性边框属性值描述border-image-source表示用在边框的图片的路径border-image-slice表示图片边框向内偏移borde
29、r-image-width表示图片边框的宽度border-image-outset表示边框图像区域超出边框的量值描述length定义圆角的形状%以百分比定义圆角的形状值描述h-shadow必需填写。表示水平阴影的位置。允许负值v-shadow必需填写。表示垂直阴影的位置。允许负值blur可选。表示模糊距离spread可选。表示阴影的尺寸color可选。表示阴影的颜色。请参阅 CSS 颜色值inset可选。表示将外部阴影 (outset) 改为内部阴影企业级卓越人才培养（信息类专业集群）CSS背景属性background-color属性background-image属性background-r
30、epeat属性背景属性背景属性background-position属性background-attachment属性企业级卓越人才培养（信息类专业集群）12transition是实现背景图像过渡的效果的属性，是HTML5增加属性transform是实现图形变形的属性HTML5图像过渡图像过渡和变形和变形transition属性transform属性值描述property表示设置过渡效果的 CSS 属性的名称transition-duration表示完成过渡效果需要多少秒或毫秒transition-timing-function表示速度效果的速度曲线transition-delay表示过渡效果
31、何时开始值描述none表示不进行转换matrix(n,n,n,n,n,n)表示 2D 转换，使用六个值的矩阵matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)表示 3D 转换，使用 16 个值的 4x4 矩阵translate(x,y)表示 2D 转换translate3d(x,y,z)表示 3D 转换scale(x,y)表示 2D 缩放转换scale3d(x,y,z)表示转换，只是用 X 轴的值企业级卓越人才培养（信息类专业集群）05 05 任务实施任务实施第一步：头部样式制作分为三部分：网站logo、搜索框、搜索按钮，其中网站logo是使用的图片标签，搜索框
32、和搜索按钮是表单标签第三步：主体部分主要包括导航栏和景点推荐部分第四步：底部信息样式设置，版权信息内容为C，该内容为一个段落，使用段落标签任务实施任务实施企业级卓越人才培养（信息类专业集群）06 06 任务总结任务总结任务技能任务技能任务实施任务实施任务拓展任务拓展任务描述任务描述 本项目通过去哪儿网旅游网站旅游目的地推荐网页的训练，熟悉了HTML5中的图像标签、CSS的背景设置、图像的设置以及CSS3.0中新增关于图片的便签的使用，学会在网页中合理地插入图像和应用图片设计景点推荐网页的方法任务总结任务总结企业级卓越人才培养（信息类专业集群）谢谢观赏PPT模板下载： 行业PPT模板： 节日PP
33、T模板： PPT素材下载： PPT图表下载： 优秀PPT下载： PPT教程： Word教程： Excel教程： 资料下载： PPT课件下载： 范文下载： 试卷下载： 教案下载： PPT论坛： 衣衣世界旗舰店主界面世界旗舰店主界面设计设计项项 目目 四四企业级卓越人才培养（信息类专业集群）目目 录录 01 学习目标 02 学习路径 03 任务描述 04 任务技能 05 任务实施 06 任务总结01 01 学习目标学习目标学习目标学习目标掌握列表标签的属性和样式掌握表格的创建和属性掌握CSS3新增属性学习目标通过实现衣世界旗舰店主界面，学习列表标签的使用和表格的创建等知识。企业级卓越人才培养（
34、信息类专业集群）02 02 学习路径学习路径学习路径学习路径企业级卓越人才培养（信息类专业集群）03 03 任务描述任务描述 01情境导入任务描述任务描述企业级卓越人才培养（信息类专业集群）情境导入情境导入随着时代的发展，购物网站越来越多，已经成为我们生活不可或缺的一部分。而在编写购物网站的界面时，通常使用列表标签，我们在编写导航栏、图片排版、商品类型的排版中都需要用到列表标签。本次任务主要是实现衣世界旗舰店主界面设计。企业级卓越人才培养（信息类专业集群）功能描述功能描述 01 02 03企业级卓越人才培养（信息类专业集群）基本框架基本框架企业级卓越人才培养（信息类专业集群）系统环境Windo
35、ws7系统及以上系统软件环境服务器浏览器SublimeTextTomcat7.0电脑端：火狐浏览器谷歌浏览器手机端：Webkit内核浏览器Android手机内置浏览器开发环境开发环境企业级卓越人才培养（信息类专业集群）04 04 任务技能任务技能任务技能 列表的作用 HTML5文本列表标签 CSS列表标签属性 HTML5创建表格 CSS定位任务技能任务技能企业级卓越人才培养（信息类专业集群）建设制造强国列表标签是HTML语言中不可或缺的标签，列表标签在网页布局时起到了关键的作用，在美化页面时，用CSS样式对列表进行修饰可以使页面的效果达到我们想要的效果列表的作用列表的作用企业级卓越人才培养（信
36、息类专业集群）无序列表1有序列表2定义列表3无序列表类似于Word中的项目符号，无序列表项目排列没 有 顺 序 ， 以 符 号 作 为 子 项 的 标 识 ， 使 用 一 组标签，该标签中包含多组元素，其中每组均为一个列表有序列表用标签表示，必须成对出现，列表内容用标签表示，内容前面的符号一般有：字母、数字和罗马数字等定义列表由自定义列表和自定义列表项组成，自定义列表以标签（definitionlists）开始，每个自定义列表项以（definitiontitle）开始，每个自定义列表项的定义以（definitiondescription）开始HTML5文本列表文本列表企业级卓越人才培养（信息类
37、专业集群）list-style-image1list-style-position2list-style-type3list-style-image是定义列表内容前显示的图片的属性，将图像设置为列表项标志list-style-position是定义列表项的位置的属性，其属性值为：outside、insidelist-style-type为列表显示类型，有9种常见属性值。CSS列表标签属性列表标签属性值描述disc默认值。实心圆circle空心圆square实心方块decimal阿拉伯数字lower-roman小写罗马数字企业级卓越人才培养（信息类专业集群）表格的基本结构1定义表格的表头单元格2
38、合并单元格3在编写页面时，表格标签是非常重要的标签，在美化界面是经常用表格标签来对文字和图片进行排版。在HTML中用标 签 表 示 表 格 ， 表 格 标 签 必 须 成 对 出 现 ，是表格的行标签，是表格的单元格标签，表示表格的一行有多少个单元格和每个单元格的内容表格中常见的表头单元格分为垂直和水平两种。在HTML5中合并单元格的两种方式为：上下合并单元格、左右合并单元格。合并单元格的属性值为colspan、rowpanHTML5创建表格创建表格企业级卓越人才培养（信息类专业集群）12relative属性为相对定位；脱离文档流的布局，但还在文档流原先的位置遗留空白区域。定位的起始位置为此元
39、素原先在文档流的位置。absolute属性用于绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为body文档本身。CSS定位定位relative属性absolute属性企业级卓越人才培养（信息类专业集群）05 05 任务实施任务实施输入标题输入标题输入标题第一步：衣世界旗舰店主界面的头部包括旗舰店的logo和店铺标题两部分，其中店铺的logo是作为背景图片添加到界面中第二步：界面的主体包括：商品推荐标题、商品图片和介绍第三步：添加网站信息点击输入说明文字点击输入说明文字点击输入说明文字任务实施任务实施企业级卓越人才
40、培养（信息类专业集群）06 06 任务总结任务总结任务技能任务技能任务实施任务实施任务拓展任务拓展任务描述任务描述通过本项目的学习，掌握HTML5列表标签、CSS列表属性、表格属性和定位属性等，学会在网页中合理地使用列表、表格和CSS定位属性展示相关信息，学会了应用列表、表格以及CSS定位设计商品信息展示网页的方法。任务总结任务总结企业级卓越人才培养（信息类专业集群）谢谢观赏PPT模板下载： 行业PPT模板： 节日PPT模板： PPT素材下载： PPT图表下载： 优秀PPT下载： PPT教程： Word教程： Excel教程： 资料下载： PPT课件下载： 范文下载： 试卷下载： 教案下载
41、： PPT论坛： 携程旅游携程旅游用户注册界面用户注册界面设计设计项项 目目 五五企业级卓越人才培养（信息类专业集群）目目 录录 01 学习目标 02 学习路径 03 任务描述 04 任务技能 05 任务实施 06 任务总结01 01 学习目标学习目标学习目标学习目标了解表单的概念了解表单元素的类型和属性掌握CSS3设置表单的外观学习目标 通过实现携程旅游用户注册界面，学习表单的类型及相关属性 ， 以 及 使 用CSS3改变表单外观的技能企业级卓越人才培养（信息类专业集群）02 02 学习路径学习路径学习路径学习路径企业级卓越人才培养（信息类专业集群）03 03 任务描述任务描述 01情境导入
42、任务描述任务描述企业级卓越人才培养（信息类专业集群）情境导入情境导入随着网络的发展浏览网站已经成为人们生活中必不可少的一部分，然而当我们进入一个新的网站的时候通常需要先注册一个账号然后再登录账号。我们所见到的登录、注册页面通常是使用HTML中表单部分的知识来编写出来的，本次任务主要是实现携程旅游用户注册界面设计。企业级卓越人才培养（信息类专业集群）功能描述功能描述 01 02 03企业级卓越人才培养（信息类专业集群）基本框架基本框架企业级卓越人才培养（信息类专业集群）系统环境Windows7系统及以上系统软件环境服务器浏览器SublimeTextTomcat7.0电脑端：火狐浏览器谷歌浏览器手
43、机端：Webkit内核浏览器Android手机内置浏览器开发环境开发环境企业级卓越人才培养（信息类专业集群）04 04 任务技能任务技能任务技能 表单的概述 表单基本元素的使用 HTML5新增input属性任务技能任务技能企业级卓越人才培养（信息类专业集群）1表单的语法和属性2表单中的按钮标签主要是实现用户信息储存的功能，当用户点击按钮之后用户的信息会储存到服务器中，然后由服务器将用户信息上传到数据库中或者将相关信息返回到主页面中表单的标签为标签，表单的五个常用属性分别为：name、method、action、enctype、target。 代 码 的 基 本 格 式 为 ： 表单的概述表单的
44、概述表单的介绍企业级卓越人才培养（信息类专业集群）文本输入框1密码输入框2文本域3标签是文本输入框的标签，文本输入框允许用户输入和编辑文本密码输入框是一种特殊的文本输入框，主要用于输入保密信息，在浏览器中显示为黑点或者其他符号，增加了文本输入框的安全性标签是文本域的标签，设置文本域的大小有两种方式：HTML格式：。CSS格式：textareawidth:50px;height:30px;表单基本元素表单基本元素属性值含义id标示一个文本框name文本框名value文本框的初始值size文本框的长度maxlength在单行文本框中能够输入最大的字符数企业级卓越人才培养（信息类专业集群）单选按钮4
45、复选框5下拉选择框6是单选按钮的HTML代码，单选按钮通常在需要用户在两个或多个选项中选择一个时使用是复选框的HTML代码，复选框通常在需要用户在两个或多个选项中选择一个或多个时使用下拉列表框包括两个控件：列表控件、选项控件，HTML标签分别为：、表单基本元素表单基本元素属性值含义name单选按钮组的名称，同一组按钮有相同名称value单选按钮进行数据传递时的选项值checked默认选择项属性值含义name复选框组的名称，同一组按钮都必须用同一个名称value复选框进行数据传递时的选项值checked默认选择项企业级卓越人才培养（信息类专业集群）7提交按钮和重置按钮8在 HTML中 普 通 按
46、 钮 一 般 用 代 码 ： 表示在 HTML中 提 交 按 钮 一 般 用 代 码 表示，重置按钮 一 般 用 代 码 表示，提交按钮的功能是提交用户信息到服务器中，重置按钮的功能是清空用户所输入的信息普通按钮表单基本元素表单基本元素属性值事件name普通按钮的名称value按钮上显示的文字onmousedown用户按下鼠标链时触发的事件onmouseup鼠标链抬起时触发的事件onclick点击按钮事件（包括鼠标链按下和抬起两个动作）企业级卓越人才培养（信息类专业集群）URL1E-mail2number3URL属 性 的 HTML代 码 为 ，添加URL属性的主要作用是用户在输入信息时，输入
47、的内容必须是一个URL地址才可以提交成功，否则无法提交Email属 性 的 HTML代 码 为 。Email属性的主要作用是用户输入邮箱时，判断所输入的邮箱是否符合邮箱的格式number属性的HTML代码为：。用户可以直接输入数字或者通过单击微调框中的向上或向下按钮选择数字HTML5新增新增input企业级卓越人才培养（信息类专业集群）range4date5placeholder6range属 性 的 HTML代 码 为 ，用户可以使用max、min和step属性控制控件的范围，其中min和max分别为控制控件的最小值和最大值，step为每单击一次跳转的步数在HTML5中日期和时间的属性包括：
48、date、datetime、 datetime-local、 month、week和timeplaceholder属性描述输入域所期待的值。以下标签中可以使用placeholder属性：text、search、url、telephone、email以及password。placeholder属性的HTML代码为：HTML5新增新增input企业级卓越人才培养（信息类专业集群）05 05 任务实施任务实施输入标题输入标题输入标题第一步：头部为标题部分，用H1标签，设置标题为居中显示第二步：主体部分为表单部分，用到的表单类型有text，password，checkbox等第三步：底部为版权信息，版
49、权信息内容为C，该内容为一个段落，使用段落标签点击输入说明文字点击输入说明文字点击输入说明文字任务任务实施实施企业级卓越人才培养（信息类专业集群）06 06 任务总结任务总结任务技能任务技能任务实施任务实施任务拓展任务拓展任务描述任务描述 通过本项目的学习，了解表单的作用以及使用方法，熟悉了HTML5中的表单及控件标签，学会了应用表单及控件设计注册登录与留言网页的方法。任务总结任务总结企业级卓越人才培养（信息类专业集群）谢谢观赏PPT模板下载： 行业PPT模板： 节日PPT模板： PPT素材下载： PPT图表下载： 优秀PPT下载： PPT教程： Word教程： Excel教程： 资料下载
50、： PPT课件下载： 范文下载： 试卷下载： 教案下载： PPT论坛： 酷狗音乐酷狗音乐播放器播放器界面界面项项 目目 六六企业级卓越人才培养（信息类专业集群）目目 录录 01 学习目标 02 学习路径 03 任务描述 04 任务技能 05 任务实施 06 任务总结01 01 学习目标学习目标学习目标学习目标掌握HTML5中video标签的属性掌握HTML5中video标签的方法和事件掌握HTML5中audio标签的属性学习目标通过实现酷狗音乐播放器界面，学习HTML5相关的多媒体 技 术 ， 掌 握HTML5中新增音频和视频标签的使用掌握HTML5中audio标签的方法和事件企业级卓越人才培
51、养（信息类专业集群）02 02 学习路径学习路径学习路径学习路径企业级卓越人才培养（信息类专业集群）03 03 任务描述任务描述 01情境导入任务描述任务描述企业级卓越人才培养（信息类专业集群）情境导入情境导入随着社会的发展、科技的进步，人们的生活压力越来越大，而大多数人选择听歌来缓解压力，所以音乐播放器在人们的生活中占据的很重要的地位。在编写一个音乐播放器时，应用最多的就是音频和视频。本次任务主要是实现酷狗音乐播放器界面设计。企业级卓越人才培养（信息类专业集群）功能描述功能描述 01 02头部包括酷狗音乐播放器手机版的头部截图 03企业级卓越人才培养（信息类专业集群）基本框架基本框架企业级卓
52、越人才培养（信息类专业集群）系统环境Windows7系统及以上系统软件环境服务器浏览器SublimeTextTomcat7.0电脑端：火狐浏览器谷歌浏览器手机端：Webkit内核浏览器Android手机内置浏览器开发环境开发环境企业级卓越人才培养（信息类专业集群）04 04 任务技能任务技能任务技能 audio标签的概述 video标签的概述 video标签的属性任务技能任务技能 audio标签的属性企业级卓越人才培养（信息类专业集群）audio标签的概述audio标签定义了播放声音文件或者音频流的标准。支持三种音频格式，分别是OggVorbis，MP3，Wav。 HTML代 码 为 ，其中s
53、rc是规定要播放音乐的地址，controls是提供播放、暂停和音量控制用的audio标签的概述标签的概述企业级卓越人才培养（信息类专业集群）属性值描述autoplayautoplay用来设定音频是否在页面加载后自动播放。如果出现该属性，则音频马上播放controlscontrols用来设置是否为音频添加控件，如播放、暂停、进度条、音量等，控制条的外观可以自定义looploop设置音频是否循环播放audio标签的属性audio标签的常见属性audio标签的属性标签的属性属性值描述autoplayautoplay（ 自 动播放）如果出现该属性，则音频在就绪后会马上播放controls（控制）如果出
54、现该属性，则向用户显示控件，比如播放按钮loop（循环）如果出现该属性，则每当音频结束时将重新开始播放preload（加载）如果出现该属性，则音频在页面加载时进行加载，并预备播放，如果使用autoplay则忽略该属性url要播放的音频的URL地址autobufferautobuffer（ 自动缓冲）在网页显示时，该二进制属性表示由用户代理（浏览器）进行缓冲的内容，还是由用户使用相关API进行内容缓冲企业级卓越人才培养（信息类专业集群）video标签的概述video标签主要是定义播放视频文件或者视频流的标准，支持3种视频格式，分别为Ogg、WebM和MPEG4。HTML代码为video标签的概述
55、标签的概述企业级卓越人才培养（信息类专业集群）video标签的属性video标签的常见属性video标签的属性标签的属性属性值描述autoplayautoplay如果出现该属性，则视频在就绪后就会马上播放controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮loop如果出现该属性，则每当视频结束时将重新开始播放preload如果出现该属性，则该视频在页面加载时进行加载，并预备播放url要播放视频的urlwidth宽度值设置视频播放器的宽度height高度值设置播放器的高度posterurl当视频未响应或缓冲不足时，该属性值链接到一个图像，该图像将以一定的比例显示出来企业
56、级卓越人才培养（信息类专业集群）05 05 任务实施任务实施第一步：头部为酷狗音乐播放器的头部截图第二步：主体为图片链接和功能拓展，底部为播放音乐的控件任务任务实施实施企业级卓越人才培养（信息类专业集群）06 06 任务总结任务总结任务技能任务技能任务实施任务实施任务拓展任务拓展任务描述任务描述 通过本项目的学习，重点掌握HTML5中的多媒体元素标签（主要包括标签和标签）、HTML5的audio/video属性、audio/video方法、audio/video事件等。任务总结任务总结企业级卓越人才培养（信息类专业集群）谢谢观赏PPT模板下载： 行业PPT模板： 节日PPT模板： PPT素材下
57、载： PPT图表下载： 优秀PPT下载： PPT教程： Word教程： Excel教程： 资料下载： PPT课件下载： 范文下载： 试卷下载： 教案下载： PPT论坛： 项项 目目 七七使用使用HTML5HTML5绘制绘制钟表钟表企业级卓越人才培养（信息类专业集群）目目 录录 01 学习目标 02 学习路径 03 任务描述 04 任务技能 05 任务实施 06 任务总结01 01 学习目标学习目标学习目标学习目标了解Canvas了解阴影效果和颜色渐变效果的设置掌握使用Canvas绘制图形，文字学习目标 通过实现HTML5绘 制 钟 表 ， 学 习Canvas标签的概念以及使用Canvas绘
58、制图形文字等技能。了解网页中图形、图片的绘制企业级卓越人才培养（信息类专业集群）02 02 学习路径学习路径学习路径学习路径企业级卓越人才培养（信息类专业集群）03 03 任务描述任务描述 01情境导入任务描述任务描述企业级卓越人才培养（信息类专业集群）情境导入情境导入 HTML5新增的Canvas元素可以让用户使用JavaScript在网页上绘制图像，从而使用HTML5新标签就可以做出丰富多彩的、炫目的界面和动画。本次任务主要是使HTML5绘制钟表。企业级卓越人才培养（信息类专业集群）功能描述功能描述 01 02使用JavaScript绘制出一个简单地钟表企业级卓越人才培养（信息类专业集群）
59、基本框架基本框架企业级卓越人才培养（信息类专业集群）系统环境Windows7系统及以上系统软件环境服务器浏览器SublimeTextTomcat7.0电脑端：火狐浏览器谷歌浏览器手机端：Webkit内核浏览器Android手机内置浏览器开发环境开发环境企业级卓越人才培养（信息类专业集群）04 04 任务技能任务技能任务技能 Canvas概述 Canvas绘制基本图形绘制渐变图形 绘制渐变图形 图形组合使用图像任务技能任务技能 绘制文字 绘制变形图形 使用图像企业级卓越人才培养（信息类专业集群）Canvas概述概述Canvas是HTML5中的一个新标签，Canvas标签主要是用于图形绘制，在使用
60、Canvas标签时通常需要定义三个属性：id属性、画布高度和宽度。其中画布大小的设置可以用CSS来定义，其默认值是300px和150px。HTML代码为：企业级卓越人才培养（信息类专业集群）建设制造强国1绘制直线2在使用canvas绘制图形时首先要知道绘制图形的起点，这就需要根据坐标系来判断坐标的位置，默认坐标系是以画布左上角（0,0）开始的，X向右增大，y向下增大。在默认坐标系中，每一个点的坐标都是直接映射到一个CSS像素上。每个Canvas实例对象中都拥有一个path对象，创建自定义图形的过程就是不断对path对象操作的过程绘制绘制基本图形基本图形Canvas坐标系方法和属性功能moveT
61、o(x,y)不绘制，只是将当前位置移动到新目标坐标(x,y),并作为线条开始点lineTo(x,y)绘制线条到指定的目标坐标(x,y),并且在两个坐标之间画一条直线，不管调用哪一个，都不会真正画出图形，因为还没有调用stroke(绘制)和fill(填充)函数，当前，只是在定义路径的位置，以便后面绘制时使用。strikeStyle属性是指定线条的颜色lineWidth属性设置线条的粗细企业级卓越人才培养（信息类专业集群）3绘制圆形4在画布中绘制矩形的方法在画布中绘制圆形的方法绘制绘制基本基本图形图形绘制矩形方法描述fillRect绘制一个无边框矩形，示例fillRect(0,0,150,75)
62、表示为左上角的坐标为（0,0）长度为150宽度为75。strokeRect绘制一个带边框的矩形，该方法的四个参数和上面的相同。clearRect清除一个矩形区域，被清除的区域没有任何线条。方法描述beginPath()开始绘制路径arc(x,y,radius,startAngle,endAngle,anticlockwise)X和y定义的是圆的中心，radius是圆的半径，startAngle和endAngle是弧度，不是度数，anticlockwise用来定义所画圆的方向，值是true或falseclosePath()结束路径的绘制fill()进行填充stroke()方法设置边框企业级卓越人
63、才培养（信息类专业集群）绘制文字绘制文字在画布中绘制文字的方式和操作其他路径对象的方式相同文本绘制功能由两个方法组成方法描述fillText（ text,x,y,maxwidth）绘制待fillStyle填充的文字，文字参数以及用于制动文本位置的坐标的参数。Maxwidth是可选参数，用于限制字体大小，它会将文本字体强制收缩到指定的尺寸trokeText（text,x,y,maxwidth）绘制只有strokeStyle边框的文字企业级卓越人才培养（信息类专业集群）1绘制径向渐变2（1）创建渐变对象，var a=cxt.creatLinearGradient(0,0,0,canvas.heig
64、ht);（2）为渐变对象设置颜色，指明过渡方式，gradient.addColorStop(0,”#fff”);gradient.addColorStop(1,”#000”);（3）在context上为填充样式或者描边样式设置渐变cxt.fillStyle=gradient;想绘制径向渐变时需要创建渐变对象，可对文本，形状进行填充，语法为context.createRadialGradient(x0,y0,r0,x1,y1,r1);其中x0: 渐变的开始圆的 x 坐标，y0: 渐变的开始圆的 y 坐标，r0: 开始圆的半径，x1: 渐变的结束圆的 x 坐标，y1: 渐变的结束圆的 y 坐标，r
65、1: 结束圆的半径。绘制渐变图形绘制渐变图形绘制线性渐变企业级卓越人才培养（信息类专业集群）1 23 4Context对象中维持了一个保存当前Canvas状态信息的堆。Context对象提供了两个方法用于保存和恢复Canvas的状态，其原型如下 ： void save(); voidrestore();状态保存与恢复位移画布图形缩放 图形旋转程序中使用ctx.translate(x,y)方法进行画布的平移，其中x表示添加到水平坐标（x）上的值，y表示添加到垂直坐标（y）上的值，发生位移后，相当于把画布的0,0坐标更换到新的x,y的位置，所有绘制的新元素都被影响实 现 图 形 的 缩 放 使 用
66、scale(x,y)函数，该函数包含两个参数，分别代表x，y两个方向上的值使用context.rotate(angle)方法来旋转图像。rotate()方法 默 认 是 从 左 上 端 的（0,0）开始旋转，通过一个指定角度来改变画布的坐标和Canvas在浏览器中的映射企业级卓越人才培养（信息类专业集群）图形组合图形组合前面已经讲过将一个图形画在另一个图形之上，本节主要介绍利用globalCompositeOperation属性改变图形的绘制顺序企业级卓越人才培养（信息类专业集群）使用图像使用图像要在画布Canvas上绘制图像，首先需要准备一张图片，图片可以通过HTML5或JS引入方法说明dr
67、awImage(image,dx,dy)接受一个图片，并将之画到canvas中。给出的坐标(dx,dy)代表图片的左上角位置。drawImage(image,dx,dy,dw,dh)接受一个图片，将其缩放，宽度为dw和高度为dh,然后把它画到canvas上的(dx,dy)drawImage(image,sx,sy,sw,sy,dx,dy,dw,dh)接 受 一 个 图 片 ， 通 过 参 数(sx,sy,sw,sh)指定图片剪裁的范围，并缩放到(dw,dh)的大小，然后然后把它画到canvas上的(dx,dy)企业级卓越人才培养（信息类专业集群）05 05 任务实施任务实施第一步：在HTML中
68、定义一个画布canvas，设置画布的宽度和高度第一步：绘制表盘中的数字，并在表盘中显示刻度，刻度分大刻度和小刻度第二步：绘制钟表的表针任务实施任务实施企业级卓越人才培养（信息类专业集群）06 06 任务总结任务总结任务技能任务技能任务实施任务实施任务拓展任务拓展任务描述任务描述 通过本项目的学习，重点熟悉了HTML5中的标签、画布与画笔、坐标与路径、各种网页图形的绘制、图片的绘制、阴影效果和颜色渐变效果的设置等，学会了应用标签以及相关属性和方法进行网页图形绘制与游戏设计的方法。任务总结任务总结企业级卓越人才培养（信息类专业集群）谢谢观赏PPT模板下载： 行业PPT模板： 节日PPT模板： PP
69、T素材下载： PPT图表下载： 优秀PPT下载： PPT教程： Word教程： Excel教程： 资料下载： PPT课件下载： 范文下载： 试卷下载： 教案下载： PPT论坛： 项项 目目 八八开发开发迅腾国际集团首页迅腾国际集团首页企业级卓越人才培养（信息类专业集群）目目 录录 01 学习目标 02 学习路径 03 任务描述 04 任务技能 05 任务实施 06 任务总结01 01 学习目标学习目标学习目标学习目标了解网站的设计流程了解跨平台的新增属性掌握HTML5标签的使用学习目标 通过实现迅腾科技集团网站的界面设计，学习HTML5、CSS3新特性，了解HTML5新标签、掌握CSS3新
70、增属性以及响应式布局的应用。掌握CSS3新增属性企业级卓越人才培养（信息类专业集群）02 02 学习路径学习路径学习路径学习路径企业级卓越人才培养（信息类专业集群）03 03 任务描述任务描述 01情境导入任务描述任务描述企业级卓越人才培养（信息类专业集群）情境导入情境导入 随着HTML5的发展，目前很多APP应用和跨设备的网站开始使用HTML5开发，许多购物网站，商业网站也应用了HTML5的新特性，本项目从需求分析着手，讲解HTML5和CSS3网站的设计与制作。企业级卓越人才培养（信息类专业集群）功能描述功能描述 01 02 03主体包括轮播图，公司相关模块介绍，院校合作底部包括本站点的版权
71、信息企业级卓越人才培养（信息类专业集群）基本框架基本框架企业级卓越人才培养（信息类专业集群）系统环境Windows7系统及以上系统软件环境服务器浏览器SublimeTextTomcat7.0电脑端：火狐浏览器谷歌浏览器手机端：Webkit内核浏览器Android手机内置浏览器开发环境开发环境企业级卓越人才培养（信息类专业集群）04 04 任务技能任务技能任务技能 网站定位 需求分析任务技能任务技能 网站的风格设计企业级卓越人才培养（信息类专业集群）情境入01网站定位网站定位 网站定位就是网站在互联网上扮演什么样的角色，向目标访问者传达什么样的概念，通过网站我们可以获取那些信息。为了让公司的访问
72、者能够快速的了解公司的框架和文化，并能很好地体会“腾”精神，公司决定使用HTML5+CSS3设计一个响应式布局的网站。明确了网站的客户群体后，开始对网站进行需求分析。企业级卓越人才培养（信息类专业集群）1管理者需求2访问者的需求是通过该网站能快速了解公司由几大模块组成，公司相关的业务有哪些、公司的业绩怎么样以及公司的最新事件等信息在公司官网中，管理者主要负责新闻、用户信息和访问流量的管理需求分析需求分析消费者需求企业级卓越人才培养（信息类专业集群）情境入01网站的风格设计网站的风格设计 一个网站设计的好坏取决于网站使用的框架是否合理、网站的颜色是否和所要表达的主体贴近以及使用网站的社会群体。在
73、布局上，考虑大多数人的浏览习惯。因此布局采用横向版式，上中下的格局，并且将网站名称放入最佳视觉区域，通常为左上角。版面设计可以为多种元素的组合，版式设计简洁大方，并配合色彩风格形成独特的视觉效果。企业级卓越人才培养（信息类专业集群）05 05 任务实施任务实施第一步：头部为公司的logo和整个网站的导航栏，logo为图片，导航栏采用无序列表，采用标签和标签，无序列表嵌套在标签中第二步：主体轮播图的制作，公司图片在标签中，图片使用无序列表显示第三步：主体公司介绍制作，公司介绍分为三部分，第一部分为公司的相关信息介绍，第二部分为公司广告条，第三部分为公司的合作院校相关信息的介绍任任务务实施实施企业级卓越人才培养（信息类专业集群）06 06 任务总结任务总结任务技能任务技能任务实施任务实施任务拓展任务拓展任务描述任务描述 通过本项目的学习，掌握HTML5新标签、CSS3新增属性以及响应式布局的应用。任务总结任务总结企业级卓越人才培养（信息类专业集群）谢谢观赏PPT模板下载： 行业PPT模板： 节日PPT模板： PPT素材下载： PPT图表下载： 优秀PPT下载： PPT教程： Word教程： Excel教程： 资料下载： PPT课件下载： 范文下载： 试卷下载： 教案下载： PPT论坛：
