《网站建设与管理》课件 项目8 网页布局_第1页
《网站建设与管理》课件 项目8 网页布局_第2页
《网站建设与管理》课件 项目8 网页布局_第3页
《网站建设与管理》课件 项目8 网页布局_第4页
《网站建设与管理》课件 项目8 网页布局_第5页
已阅读5页，还剩11页未读， 继续免费阅读

下载本文档

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

文档简介

项目8网页布局网站建设与管理项目概述ontents目录学习目标核心知识任务实施进阶提高CPART1项目概述掌握几种常用的CSS+Div网页布局方法，包括浮动布局、定位布局和多列布局，用CSS+DIV实现“导航条”、“家常菜推荐页”和“汽车之家”的布局。8.1项目概述PART2学习目标知识目标技能目标8.2成果目标了解常见的几种网页布局方法掌握浮动、定位、多列布局用CSS+DIV实现“导航条”、“家常菜推荐页”和“汽车之家”技能目标知识目标PART3核心知识8.3.1浮动布局8.3核心知识

浮动主要是通过float属性实现的。浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。8.3.2定位布局8.3核心知识

定位布局包括绝对定位布局、相对定位布局和固定定位布局。定位布局主要由position属性决定，再根据上（top）、右（right）、下（bottom）、左（left）的值来判断元素的位置。position属性值的含义如表属性值描述staticHTML元素的默认值，即没有定位，元素框出现在正常的流中。Relative相对定位，以这个元素的本来应该在的初始位置为参照点，元素框相对参照点加或减一定的距离。Absolute绝对定位，元素框从文档流完全删除，有定位的祖先元素就是距离祖先元素的距离，没有就是距离浏览器的距离。Fixed固定定位，它是相对于整个浏览器视窗本身来定位的。相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。与文档流无关，不占据空间。8.3.3多列布局8.3核心知识·Columns：column-width设置列的宽度，该宽度为网页缩到最窄时的宽度，column-count设置元素应该被分隔的列数，默认为auto。column-rule：column-rule-color设置列规则的颜色；column-rule-style设置列规则的样式；column-rule-width设置列规则的宽度。column-span:设置元素横跨的列数，默认为1。column-gap:设置列与列之间的间隔。column-fill:设置如何填充列。PART4项目实施8.4项目实施PART5进阶提高8.5进阶提高在微信的通信录中直接进入企业号。也可以通过下载微信企业APP加入，一起体验课后延伸学习的过程进入“微加云学院”，选择课件内容再次学习、在线做练习题、考试。进入“企微云任务”，查看并完成本章学习任务，查看任务，领取任务，登记任务进展情况，方便教师随时查看学生任务的完成进度。进入“投票调研”“问卷星”，参与调查问卷互动，反馈教学效果。进入“教学论坛”，下载本章素材或对相关知识点发贴、回帖互动。进入“腾讯乐享”，通过知识库、问答、课堂、考试、活动、

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

温馨提示

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

最新文档

评论

0/150

提交评论