Web前端技术项目式教程电子教案 第3章 使用DIV+CSS实现中国传统文化网站首页布局 任务三教案-2_第1页
Web前端技术项目式教程电子教案 第3章 使用DIV+CSS实现中国传统文化网站首页布局 任务三教案-2_第2页
Web前端技术项目式教程电子教案 第3章 使用DIV+CSS实现中国传统文化网站首页布局 任务三教案-2_第3页
Web前端技术项目式教程电子教案 第3章 使用DIV+CSS实现中国传统文化网站首页布局 任务三教案-2_第4页
Web前端技术项目式教程电子教案 第3章 使用DIV+CSS实现中国传统文化网站首页布局 任务三教案-2_第5页
已阅读5页，还剩1页未读， 继续免费阅读

下载本文档

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

文档简介

PAGE6PAGE第3章使用DIV+CSS实现中国传统文化网站首页布局课程名称网页设计项目名称CSS盒模型和定位机制任务名称CSS盒模型和定位机制课时2项目性质□演示性□验证性□设计性√综合性授课班级授课日期授课地点教学目标能力目标：1.掌握使用CSS选择器获取网页元素。2.掌握使用CSS的盒模型、区块、浮动、定位等设计网页布局。知识目标：1.熟悉CSS的基本语法规则。2.熟悉盒模型的基本原理。3.了解CSS的层叠和继承。素质目标：1.培养学生对中华优秀传统文化的深刻理解和认同。2.培养学生良好的职业道德，根据《中华人民共和国网络安全法》制作和发布网页信息。教学内容1.任务描述2.任务展示与实现（1）利用CSS盒模型和CSS样式定位网页（2）利用CSS定位机制精确控制网页元素位置（3）学生动手操作3.教师讲解本任务涉及的知识点教学重点1.CSS盒模型2.CSS定位机制教学难点1.CSS盒模型2.CSS定位机制教学准备1.装有VScode的电脑2.教学课件PPT3.教材：《Web前端技术项目式教程（HTML5+CSS3+Flex+Bootstrap）》作业设计1．综合运用CSS盒模型和CSS定位机制精确定位网页教学过程教学内容与过程（教学内容、教学方法、组织形式、教学手段）做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。【课前说明】分别介绍CSS盒子模型、CSS浮动定位，CSS相对定位，CSS绝对定位，以及如何运用CSS盒子模型和定位机制精确定位网页。【目的】使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习知识的要求和目标。盒子模型CSS控制网页样式是通过盒子模型实现的，网页中的所有标签都可以视为一个盒子。所有网页内容都是放在盒子里面的。每一个盒子都有一个内容区域（如文本、图片等）和可选的环绕着内容的内边距（padding）、边框（border）和外边距（margin）。padding、border和margin都是有4个方向的。4个方向的顺序分别是上、右、下、左，CSS盒子的定位机制CSS中有3种基本定位机制：普通文档流、浮动和定位。所有的盒子默认都是在普通文档流中定位的。（1）普通文档流普通文档流中框的位置由其在HTML中的位置决定。块级盒子从上到下依次排列，行内盒子在一行中水平排列。（2）浮动浮动的盒子不在文档的普通流中，可以向左或向右移动，直到它的外边缘碰到包含它的盒子或另一个浮动盒子的边框为止。因为它不再处于普通文档流中，所以它不占据空间。（3）定位position属性的取值范围是：static|relative|absolute|fixed。每个取值的含义如下。=1\*GB3①static：默认的属性值，该盒子按照标准流（包括浮动方式）进行布局。=2\*GB3②relative：相对定位，使用相对定位的盒子，会相对于它原本的位置，通过偏移指定的距离到达新的位置。它原来占据的位置仍然保留。三、DIV+CSS布局剖析（1）两列固定宽度居中固定宽度的布局一般使用浮动实现，只需将中间左右两列均设置为浮动即可。（2）自适应宽度布局自适应宽度布局的核心是在宽度的设置上使用百分比，浮动和定位都可以用于实现自适应宽度布局。=1\*GB3①使用浮动进行3列自适应布局（实现效果：左侧列和右侧列固定宽度，中间列宽度自适应）。基本思路：左侧列固定宽度并设置浮动float:left;，右侧列固定宽度设置浮动float:right，中间列不设置宽度，只设置margin-left为左侧列的宽度，margin-right为右侧列的宽度。=2\*GB3②使用定位进行3列自适应布局。基本思路：原理与浮动定位相同，只是左右两列都使用绝对定位相对于中间区域最外层的父框进行定位。一、两列固定宽度布局 <styletype="text/css"> body{ margin:0; } .container{ width:1200px; margin:0auto; } .left{ background-color:#aadddd; float:left; width:500px; height:500px; } .right{ background-color:#f08844; float:right; width:700px; height:500px; } header{ height:100px; background-color:pink; } footer{ height:60px; background-color:green; clear:both; } </style></head><body> <divclass="container"> <header></header> <divclass="left"></div> <divclass="right"></div> <footer></footer> </div></body>二、自适应3列布局 <styletype="text/css"> body{ margin:0; } header{ height:100px; background-color:pink; } .leftbox{ width:300px; height:500px; background-color:#aadddd; float:left; } .midbox{ height:500px; margin:0300px; background-color:#aa11dd; } .rightbox{ width:300px; height:500px; background-color:#f08844; float:right; } footer{ height:60px; background-color:green; } </style> <body> <header></header> <divclass="leftbox"></div> <divclass="rightbox"></div> <divclass="midbox"></div> <footer></footer> </body>通过学习，学生能够掌握CSS盒子模型、CSS定位机制，以及如何使用CSS盒子模型和定位机制精确定位网页。本节课主要运用案例教学法，通过对CSS盒子模型的深入理解，掌握使用CSS盒子模型和定位机制

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

温馨提示

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

最新文档

评论

0/150

提交评论