下载文档原格式
网页设计基础浮动及定位教学案例-网页设计论文-设计论文——文章均为WORD文档，下载后可直接编辑使用亦可打印——摘要：浮动与定位是《网页设计基础》课程中一个教学难点，为此，笔者以任务为导向，将任务层层分解，化繁为简，从而更好地让学生理解并掌握知识点。
关键词：HTML；浮动；定位1背景本教学单元的教学模式为项目导入、任务驱动和过程管理。
以网项目，贯穿到整个教学过程中，然后将整个项目进行分解，以任务为驱动，并在教学过程中，借鉴IT企业项目管理模式，对整个教学过程进行监控，确保完成教学目标。
2教学案例呈现2.1教学目标本次教学的知识目标要求学生掌握浮动、浮动塌陷、定位和浮动与定位的综合运用，重点是浮动与定位，难点是浮动塌陷以及浮动与定位的综合运用；能力目标要求学生具备相应的专业能力、方法能力和社会能力：在专业能力方面，具备web前端静态页面开发能力；在方法能力方面，具备对知识归纳的能力；在社会能力方面，具备有效地时间管理和准确的自我评价的能力。
素质目标要求学生具备积极的工作态度、团队合作能力。
从学生认知、能力结构和心理特征来看，当前大多数学生理解盒子模型和默认标准文档流，并能熟练运用，整体学习信心高昂，团体意识较强。
因此，为了实现本次教学目标，制定了课前预习作业；课中上机任务，并按学生水平采用分层教学；课后，布置课后作业，巩固知识。
2.2教学内容《网页设计基础》属于软件技术专业大一阶段的核心职业技术基础课程，是后续Web开发课程的基础前导课程。
本教学单元的学习任务是在前次教学单元完成的网页面的基础上，运用浮动和定位制作网商品详情页面。
地位：浮动与定位是本次教学单元重点与难点，是后期进行网页布局的核心基础知识点。
作用：浮动实现块级元素横向布局，定位实现页面元素精确定位。
前后联系：浮动与定位是对前驱知识的提升，后驱网页布局知识的核心。
选取理由：本次学习任务是浮动和定位综合运用，以任务驱动，让学生边做边学。
浮动布局和定位布局一、网页元素的三种位置方式普通流：不浮动、定位，前面做的那些网页浮动：用float样式的网页定位相对定位绝对定位固定定位二、浮动布局浮动现象的特点（1）浮动元素只能水平地向左或向右浮动，不可能斜向上或斜向下浮动。
（2）浮动元素离开了普通流。
浮动元素之后的块状元素将忽略它并占据它原来的空间。
行内元素（文字）会围绕在浮动元素周围。
（3）如果不希望浮动元素对后面的元素产生影响，可以为后面的元素应用“clear”属性，如果为清理元素设置“margin-top”属性，该属性不起作用。
因此应避免为清理元素设置“margin-top”属性（4）如果让一个元素浮动，它会向左或者向右浮动直至遇到父元素的边缘。
如果向同一方向再浮动一个元素，它会浮动直至遇到前一个浮动元素的边缘（5）如果向同一方向浮动多个元素，它们将一个挨一个排列，当水平空间无法容纳更多的浮动元素时，浮动元素会换行排列（6）应该为浮动元素设定宽度。
如果不设定宽度，浮动元素有宽度最小化的趋势，在不同的浏览器中会有不同的显示效果（自适应）（7）浮动元素的边距（如margin-top、margin-bottom）不会重叠，而普通流中的元素会出现重叠父元素不能包含浮动的子元素的处理办法迫使父元素包含子元素的方法：方法一：为父元素设置overflow：hidden: 。
对于IE6浏览器需要为父元素设置zoom: 1 方法二：利用一个子元素清除浮动（clear方法）二、定位布局定义：定位是指通过选取适合的参照物，并设置left 或right、top 或bottom 属性，来确定元素在网页中的位置（1）相对定位①position: relative;②相对定位是指元素相对于它的原始位置定位③相对定位元素仍然保留它在文档流中的原始位置④如果不设置宽度，相对定位元素的宽度保持原来大小⑤绝对定位是指元素相对于最近的已定位的祖先元素定位。
如果不存在已定位的祖先元素，则相对于浏览器视口定位（2）绝对定位①绝对定位是指元素相对于最近的已定位的祖先元素定位。
《HTML5+CSS3 网站设计基础教程》课程教学大纲（课程英文名称）课程编号：201601210011学分：5 学分学时：76 学时（其中：讲课学时：47 学时上机学时：26 学时）先修课程：计算机基础、计算机网络、计算机应用后续课程：UI 设计、 JavaScript 网页特效适用专业：信息技术及其计算机相关专业开课部门：计算机系一、课程的性质与目标《HTML5+CSS3 网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML 标记、CSS 样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页 web 发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。
二、课程设计理念与思路课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。
单纯的技能训练不是提高高等职业教育的理想课程。
以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。
课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。
教学整体设计“以职业技能培养为目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。
三、教学条件要求开发工具：Dreamweaver CS6四、课程的主要内容及基本要求第一章初识 HTML5第二章HTML5 页面元素及属性第三章CSS3 入门第四章CSS3 选择器第五章CSS 盒子模型第六章浮动与定位第七章表单的应用第八章多媒体技术第九章CSS3 高级应用第十章实战开发—制作电商网站首页面…………………………………………………………………五、学时分配六、考核模式与成绩评定办法本课程为考试课程，期末考试采用百分制的闭卷考试模式。
目录第1章 (4)Web前端开发入门实训案例一 (4)双列布局 (4)•一、要求 (4)•二、案例背景 (4)•三、预备知识 (4)•四、实现过程 (5)•五、项目实训案例评分标准 (6)第2章 (7)Web前端开发入门实训案例二 (7)滑动门与css精灵综合应用 (7)•一、要求 (7)•二、案例背景 (7)•三、预备知识 (7)•四、实现过程 (8)•五、项目实训案例评分标准 (9)第3章 (10)Web前端开发入门实训案例三 (10)Css下拉弹出菜单 (10)•一、要求 (10)•二、案例背景 (10)•三、预备知识 (10)•四、实现过程 (11)•五、项目实训案例评分标准 (12)第4章 (13)Web前端开发入门实训案例四 (13)脚本入门学习之下拉菜单 (13)•一、要求 (13)•二、案例背景 (13)•三、预备知识 (14)•四、实现过程 (14)•五、项目实训案例评分标准 (15)第5章 (16)Web前端开发入门实训案例五 (16)选项卡效果解析 (16)•一、要求 (16)•二、案例背景 (16)•三、预备知识 (16)•四、实现过程 (17)•五、项目实训案例评分标准 (19)第6章 (20)Web前端开发入门实训案例六 (20)弹窗和表单布局与校验 (20)•一、要求 (20)•二、案例背景 (21)•三、预备知识 (21)•四、实现过程 (21)•五、项目实训案例评分标准 (24)第七章 (25)Web前端开发入门实训案例七 (25)Jquery跑马灯插件效果解析 (25)•一、要求 (25)•二、案例背景 (25)•三、预备知识 (25)•四、实现过程 (25)•五、项目实训案例评分标准 (28)第八章 (29)Web前端开发入门实训案例八 (29)QQ相册图片切换及其扩展 (29)•一、要求 (29)•二、案例背景 (29)•三、预备知识 (30)•四、实现过程 (30)•五、项目实训案例评分标准 (34)第9章 (35)Web前端开发入门实训案例九 (35)图文排版特效 (35)•一、要求 (35)•二、案例背景 (35)•三、预备知识 (35)•四、实现过程 (36)•五、项目实训案例评分标准 (39)第10章 (40)2Web前端开发入门综合实训案例八 (40)综合整站 (40)•一、要求 (40)•二、案例背景 (40)•三、预备知识 (40)•四、开发过程 (40)•五、项目实训案例评分标准 (49)Web前端开发入门参考手册 (50)常用html标签基本格式 (51)选择符 (53)标签规范 (55)样式引用及其常见样式 (56)常用结构样式 (56)盒模型所有元素都可以看成一个盒子 (57)常用文本样式： (57)css高级......................................................................................................................................4第1章Web 前端开发入门实训案例一双列布局一、要求在页面上创建一个居中并且带有外部边框的双列布局，左侧宽度200px,右侧宽度780px ， 请认真分析题目要求完成实例。
CSS浮动与定位的高级知识点CSS中的浮动（float）和定位（position）是布局和定位元素的两种重要技术，掌握它们的高级知识点能够更好地运用它们实现网页设计中的各种效果和布局。
本文将介绍CSS浮动与定位的高级知识点，包括浮动和定位的基本原理、常见的使用场景以及注意事项。
通过学习本文，读者将更好地理解和运用CSS中浮动和定位的技术。
一、浮动（float）技术1. 基本原理浮动是CSS中一种布局方式，可以实现元素（通常是块级元素）的水平排列。
元素通过设置float属性为left或right来进行浮动。
浮动元素不再占据正常文档流的位置，而是根据其浮动方向向父元素的左侧或右侧靠拢。
2. 清除浮动在使用浮动布局时，经常会遇到浮动元素引起的父元素高度塌陷的问题。
为了解决这个问题，可以使用清除浮动的技术。
其中，常用的清除浮动的方法包括：使用空元素清除浮动、使用伪元素清除浮动和使用clear属性清除浮动。
3. 浮动与文本流浮动元素通过浮动脱离正常文档流，但仍然会影响周围的文本流。
为了控制文字绕排的方式，可以使用CSS中的clear属性，通过设置clear属性，使得元素在浮动元素下方开始。
4. 浮动与宽度当浮动元素宽度超过其父元素宽度时，会自动换行显示，而不会超出父元素的范围。
这是因为浮动元素会尽量占据自身所需的宽度，并自动溢出到下一行。
二、定位（position）技术1. 定位的基本原理定位是CSS中一种精确布局元素的方式。
通过设置元素的position 属性以及top、right、bottom和left属性，可以将元素定位到指定的位置。
常用的position属性值包括：static、relative、absolute和fixed。
2. 相对定位（relative）相对定位是相对于元素在文档流中的原始位置进行定位，即在正常文档流中占据原来的空间。
通过设置top、right、bottom和left属性的值来调整元素的位置。
web浮动与定位实验总结Web浮动与定位是前端开发中非常重要的概念，它们可以帮助我们实现页面布局的灵活性和多样性。
本文将对Web浮动与定位进行实验总结，并探讨它们的应用场景和使用技巧。
一、浮动（float）的使用浮动是CSS中常用的布局方式之一，它可以使元素脱离文档流并向左或向右移动，其他元素会围绕它进行排列。
在实际开发中，我们经常使用浮动来实现多栏布局、图文混排等效果。
1. 浮动的基本语法在CSS中，我们可以通过设置元素的float属性来实现浮动效果。
float属性的值可以是left、right或none。
当设置为left时，元素会向左浮动；当设置为right时，元素会向右浮动；当设置为none 时，元素不会浮动。
2. 浮动的应用场景浮动常用于实现多栏布局。
我们可以将页面分为多个栏目，每个栏目使用浮动来进行布局。
通过设置不同的浮动方向和宽度，可以实现不同栏目的排列效果。
3. 浮动的注意事项在使用浮动时，需要注意以下几点：（1）浮动元素会脱离文档流，可能会影响其他元素的布局，需要通过清除浮动来解决这个问题。
（2）浮动元素的父元素的高度会塌陷，可以通过触发BFC（块级格式化上下文）来解决这个问题。
（3）浮动元素的宽度默认为其内容的宽度，可以通过设置宽度来改变浮动元素的宽度。
二、定位（position）的使用定位是CSS中控制元素位置的一种方式，通过设置元素的position 属性和top、bottom、left、right属性，可以精确地控制元素的位置。
1. 定位的基本语法在CSS中，我们可以通过设置元素的position属性来实现定位效果。
position属性的值可以是static、relative、absolute或fixed。
其中，static为默认值，表示元素的位置由正常文档流决定；relative表示相对定位，元素相对于其正常位置进行定位；absolute表示绝对定位，元素相对于其最近的非static定位的父元素进行定位；fixed表示固定定位，元素相对于浏览器窗口进行定位。
css浮动，⽹页练习显⽰、定位
1、浮动
浮动框可以向左或向右移动，直到外边缘碰到包含框或另⼀个浮动框边框为⽌。
float:left; float:right; clear:both;
img{float:right}
清除浮动⽅法：
1》⽗级元素后加元素：<div style=”clear:both”></div>
2》⽗级元素加::after{display:block;content:” ”;clear:both}
3》overflow:hidden
练习⽹页：
2、显⽰：display:规定元素应该⽣成的框的类型
display:block;块级元素显⽰div
display:inline;内联元素显⽰span
display:inline-block;⾏内块元素
display:flex;弹性盒⼦
display:none元素隐藏
3、定位（难点）
position: static(默认，没有定位); fixed（绝对定位，相对浏览器）; relative（相对定位，相对正常位置）; absolute（绝对定位，相对不是static的⽗元素定位）;
fixed和absolute是不占据空间的，fixed不设置top，是相对于原来位置显⽰
top:
left:
right:
bottom:
z-index:设置元素的堆叠顺序。
教师学科教案[ 20 – 20 学年度第__学期]任教学科：_____________任教年级：_____________任教老师：_____________xx市实验学校传智播客《HTML5+CSS3网站设计基础教程》教学设计课程名称：HTML5+CSS3网站设计基础教程授课年级：2016年级授课学期：2016学年第一学期教师姓名：某某老师201 年月日教学过程第一课时（讲解元素的浮动属性float、清除浮动）复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习第五章“CSS盒子模型”的相关知识。
1、一个盒子的宽（width）和高（height）均为300px，左内边距为30px，同时盒子有3px的边框，请问这个盒子的总宽度是多少？（）A、333pxB、366pxC、336pxD、363px答案：C●盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和；●所以，盒子的总宽度= width（300px）+左内边距（30px）+左右边框宽度之和（3px*2）=336px；说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。
本课时内容学习✧分组讨论对新课进行讲解前，先让学生分组讨论以下问题：初学者在设计一个页面时，通常会按照默认的排版方式，将页面中的元素从上到下一一罗列，这样的布局制作出来的页面看起来呆板、不美观。
其实，通过元素“浮动”可以使页面中的元素按照左、中、右的结构进行排版。
那么，什么是“元素的浮动”，以及如何设置元素的浮动呢？请小组代表对以上问题发表见解。
教师对上述问题进行解释：●所谓元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中相应位置的过程。
在CSS中，通过float属性来定义浮动，其基本语法格式如下：选择器{float:属性值;}●在上面的语法中，常用的float属性值有三个：left、right、none。
