Web前端开发项目教程配套教材电子课件（完整版）.pptx

下载文档

279
0
约6.98千字
约 421页
2022-07-06 发布于辽宁
举报
版权申诉
保障服务

Web前端开发项目教程配套教材电子课件（完整版）.pptx

1、本文档共421页，可阅读全部内容。
2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击这里二次下载。
4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。

Web前端开发项目教程;项目01 认识网站和网页;任务01-1：网站设计与开发起步;一、基本概念-网页;基本概念-网页;基本概念-网站;基本概念-网站;基本概念-网站;二、Web标准;Web标准;Web标准——结构标准;Web标准——表现标准;Web标准——行为标准;实训任务;实训任务;任务01-2 制作第一个网页;任务01-2：制作第一个网页;一、常用HTML编辑器;一、常用HTML编辑器;一、常用HTML编辑器;二、在Hbuilder中新建网页;三、HTML5的文档结构;标签;<!DOCTYPE>声明;HTML文档头部标记<head></head>;<title></title>;<meta />;<meta />;<link/>;HTML文档主体标记<body></body>;<h1>~<h6>标题标记;<p></p>段落标记;HTML的树形文档结构;实训任务;项目02 网页的蓝图--简单布局;任务02-1 使用CSS装饰网页;一、DIV+CSS网页布局流程;二、CSS样式表;1. CSS样式表简介—样式规则;1. CSS样式表简介—层叠;1. CSS样式表简介—样式表的优点;2. 样式表分类;2.1内嵌样式表;2.1内嵌样式表; 如果希望一个网站中多个页面的样式保持一致，如何解决？;2.2外部样式表;2.2外部样式表;2.2外部样式表;2.2外部样式表;2.3内联样式表（行内样式）;2.3内联样式表;实训任务;项目02 网页的蓝图—简单布局;任务02-2 巧用选择器调兵遣将;一、CSS选择器;二、基本选择器的用法——标记名选择器;二、基本选择器的用法——class类选择器; <body> <h2>静夜思</h2> <h3>作者：李白</h3> <p class="fir">床前明月光，</p> <p class="fir">疑是地上霜。</p> <p>举头望明月，</p> <p>低头思故乡。</p> </body> </html>;class类选择器; class类选择器的样式复用;二、基本选择器的用法——ID选择器; <body> <h2>静夜思</h2> <h3>作者：李白</h3> <p class="fir">床前明月光，</p> <p class="fir">疑是地上霜。</p> <p>举头望明月，</p> <p id="last">低头思故乡。</p> </body> </html>; ID选择器;结合元素选择器使用;三、扩展选择器的用法;3.1 后代选择器;3.1 后代选择器;3.2 子代选择器;3.2 子代选择器;3.3 交集选择器;3.3 交集选择器;3.4 并集选择器;3.5 通用选择器;实训任务;实训任务;项目02 网页的蓝图—简单布局;任务2-3 使用盒模型划分页面;一、页面元素的分类和转换;1.1 块级元素;1.2 行内元素;1.3 行内元素和块级元素的转换;二、块级元素的盒子模型;2.1 盒子的宽度和高度;宽度如何取值？;高度如何取值？;2.2 盒子的边框;2.2 盒子的边框;2.2 盒子的边框;圆角边框的设置;圆角边框的设置;;2.3 盒子的内填充属性;2.3 盒子的内填充属性;;2.4 盒子的外边距属性;盒子的居中;实训任务1;实训任务2;2.5 盒子的背景;设置背景颜色;设置背景图片;设置样式背景图片如何重复;设置样式背景图片位置;背景图片位置示例;背景图片位置示例;设置背景图片不随滚动条移动;设置背景图片的尺寸;设置背景图片的定位区域;实训任务3;2.6 盒子的阴影效果;2.6 盒子的阴影效果;多阴影效果;2.7 盒子的占位;默认模式：content-box;IE怪异模式：border-box;IE怪异模式：border-box;项目02 网页的蓝图—简单布局;任务2-4 BFC布局;一、垂直外边距的合并;一、垂直外边距的合并;二、BFC布局——规则;二、BFC布局——触发BFC;BFC解决外边距合并问题;解决方案1. 使用overflow属性触发BFC。;解决方案2.使用display属性值触发BFC。;实训任务;项目03 网页的蓝图—复杂布局;任务3-1 浮动布局两栏式页面;一、认识浮动;二、元素的浮动属性float;2.1 不设置浮动;2.2 设置浮动;三、清除浮动;三、清除浮动;四、盒子的高度塌陷及解决方法;四、盒子的高度塌陷及解决方法;4.1 使用空标记清除浮动;4.2 使用after伪对象清除浮动;4.3 使用overflow属性清除浮动;实训任务1 网页元素的水平排版;实训任务2;项目03 网页的蓝图—复杂布局;任务3-2 DIV+CSS布局网上商城首页;一、网页布局的流程;一、网页布局的