HTML5+CSS3 Web前端开发项目化教程 课件 项目5 网页版块布局

《HTML5+CSS3Web前端开发项目化教程》

项目5网页版块布局任务5.3制作“公益行动”二级页面03目录Contents任务5.2制作“低碳环保网”轮播图02任务5.1制作“低碳环保网”绿水青山模块01教学目标理解浮动特性掌握清除浮动影响的方法掌握元素的四种定位模式熟悉常见的网页布局及命名规范1.知识目标能够对块元素进行横排

能够清除浮动影响

能够为元素设置常见的定位模式

能够制作各种banner轮播图2.技能目标 倡导文明出行、孝敬长辈

培养自主学习和独立解决问题的能力

强调界面美观，提升审美意识3.素养目标1任务5.1制作“低碳环保网”绿水青山模块效果展示知识储备清除浮动影响2overflow属性3float属性1目录ContentsFontAwesome图标4知识储备1.float属性在标准文档流中，标签元素的默认排列方式为：块元素上下垂直排列，行内元素左右并行排列。知识储备1.float属性通过元素的浮动（float）属性可以进行多样化的布局，将各部分模块有序排列，整个网页的排版也变得丰富、美观。知识储备1.float属性基本语法格式选择器{float:属性值;}属性值描述left元素向左浮动right元素向右浮动none元素不浮动（默认值）使用浮动（float）属性可以让某个元素脱离标准流向左或向右移动，直到它的外边缘碰到包含框或另一个浮动元素的边框为止。知识储备1.float属性（1）浮动的盒子会具有行内块元素特性，其默认宽度为容纳内容的最小宽度，可以设置宽度、高度属性。（2）浮动的盒子已经脱离标准流，不再保留原来的位置，它原来的位置由后面的标准流内容填补。代码#box1{float:left;}第一种情况：box1左浮动浮动特性知识储备1.float属性第二种情况：将box2设置为向左浮动，box1、box3不浮动。浮动特性设置了浮动的块元素对前面不浮动的元素不会产生影响，对后面不浮动的元素会产生影响。思政点：文明礼貌是社会的基石，我们每个人都应该从自身做起，以身作则，倡导文明礼貌的行为。代码#box2{float:left;}知识储备1.float属性第三种情况：将box1、box2都设置为向左浮动，box3不浮动。浮动特性如果多个盒子都设置了浮动，则它们会在一行内显示、顶端对齐排列，并且中间没有缝隙，紧挨在一起。代码#box1,#box2{float:left;}知识储备1.float属性第四种情况：将box1、box2、box3都设置为向左浮动。浮动特性（1）盒子内的子元素全部浮动之后，父元素的高度会受到影响，即高度会塌陷。（2）一般情况下，若要对若干个块元素通过设置浮动属性使其同行显示，必须对所有的块都设置浮动。代码#box1,#box2,#box3{float:left;}知识储备1.float属性第五种情况：将box1、box2、box3都设置为向左浮动，并设置宽度。浮动特性若包含的容器太窄，无法容纳水平排列的三个浮动元素，那么其他浮动元素向下移动（掉下来），直到有足够的空间。代码#box1,#box2,#box3{float:left;width:200px;}知识储备1.float属性第六种情况：给box1单独设置高度。浮动特性如果浮动元素的高度不同，那当它们向下移动时可能会被其他浮动元素“卡住”。代码#box1,#box2,#box3{float:left;width:200px;}#box1{height:150px;}知识储备1.float属性浮动元素会脱离标准文档流(脱标)；浮动的元素会具有行内块元素的特性；多个元素都设置了浮动，他们会在一行内显示并且元素顶部对齐；若父元素容器太窄，无法容纳水平排列的三个浮动元素，那么其他浮动元素向下移动（掉下来）。浮动特性知识储备1.float属性浮动元素会脱离标准文档流(脱标)浮动元素会脱离标准文档流的控制（浮）移动到指定位置（动），浮动元素不再保留原来的位置，会对后面不浮动的元素产生影响。浮动特性知识储备1.float属性2.浮动的元素会具有行内块元素特性任何元素都可以浮动，不管原先是什么类型的元素，添加浮动之后具有行内块元素相似的特性。box1、box2两个块元素，默认和父元素一样宽。box1浮动，未设置宽度，宽度由其内容决定。span为行内元素，添加浮动后具有行内块元素特性，宽度起作用。浮动特性知识储备1.float属性浮动的元素是互相贴靠在一起的（不会有缝隙）若父元素容器太窄，无法容纳多个浮动元素，多出的元素会另起一行，直到有足够的空间。如果浮动元素的高度不同，那当它们向下移动时可能会被其他浮动元素“卡住”。3.

多个浮动的元素会一行内显示并且顶部对齐box1高度最大，box3被“卡住”父元素宽度不够，box3另起一行浮动的元素互相贴在一起浮动特性知识储备1.float属性图像浮动后，其后相邻文本元素只会环绕盒子排列，并不会到盒子的下方和上方。img{

float:left;}imgp图文混排浮动应用知识储备1.float属性中国新闻网：/photo/图文卡片横排党史学习教育网：/浮动应用知识储备1.float属性一行内两列显示浮动应用知识储备1.float属性浮动布局需要细心调整。我们无论从事什么劳动，只要具有“择一事终一生”的执着专注、“干一行钻一行”的精益求精、以勤学长知识、以苦练精技术、以创新求突破，就能在平凡岗位上干出不平凡的业绩。思政点知识储备2.清除浮动影响left、right两块浮动后，bottom被“卡住”box、box2、box3全部浮动，父元素高度塌陷元素浮动之后会对其他元素产生影响，有两种情况，一种是浮动元素对后面不浮动的元素产生影响，另外一种就是子元素全部浮动对父元素产生影响，即父元素高度会塌陷。浮动会产生排版错乱问题，这时候就要清除浮动影响。知识储备2.清除浮动影响怎么清除浮动影响？两种情况：兄弟元素受到影响，在受影响的块里添加clear父元素受到影响：解决父级元素因为子级浮动引起内部高度为0（高度塌陷）

的问题。知识储备2.清除浮动影响运用clear属性清除浮动基本语法格式选择器{clear:属性值;}属性值描述left不允许左侧有浮动元素（清除左侧浮动的影响）right不允许右侧有浮动元素（清除右侧浮动的影响）both同时清除左右两侧浮动的影响常用属性值1.清除浮动的元素对后面不浮动的元素所产生的影响。运用clear属性能清除元素浮动后对其后兄弟元素浮动的影响。使用方法：在受影响的元素里加clear。知识储备2.清除浮动影响例如：2.清除子元素全部浮动对父元素的影响盒子内的子元素全部浮动之后，父元素的高度会受到影响，即高度会塌陷。知识储备2.清除浮动影响01020304设置父元素的高度优点：简单缺点：要给出精确的高度，只适合高度固定的布局，高度不固定（瀑布流）不适合。父元素添加overflow：hidden属性优点：代码简洁缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。使用空标记清除浮动在浮动元素之后添加空标签，并对该标签应用“clear:both”样式。优点：通俗易懂，书写方便；缺点：添加许多无意义的标签，结构化较差。父元素添加伪类after优点：符合闭合浮动思想结构语义化正确，推荐缺点：由于IE6-7不支持:after解决父元素高度塌陷的方法知识储备3.overflow属性overflow属性的常用值有四个，具体如下表所示。属性值描述visible内容不会被修剪，会呈现在元素框之外（默认值）hidden溢出内容会被修剪，并且被修剪的内容是不可见的auto在需要时产生滚动条，即自适应所要显示的内容scroll溢出内容会被修剪，且浏览器会始终显示滚动条overflow属性可以解决溢出问题，其基本语法格式如下：overflow属性选择器{overflow:属性值;}FontAwesome是一套绝佳的图标字体库和CSS框架，它是可缩放的矢量图标，用户可以可以对图标的特性进行更改，比如大小、颜色、阴影等并且可以组合不同的图标创造自己喜欢的图标。FontAwesome的产生，为网页设计和Web前端开发人员带来极大的方便。网址：/使用方法网络教程：/article/948f5924ff894cd80ef5f943.html4.FontAwesome图标知识储备（2）下载好安装包后，解压缩，找到CSS文件夹里面的font-awesome.css或者font-awesome.min.css（表示压缩过的）复制到自己项目里面的CSS文件夹中，并把安装包文件夹中的fonts文件夹整个文件夹复制到自己项目中。

（1）下载：/4.FontAwesome图标知识储备（3）打开HTML页面，在head头部中引入font-awesome.css或者font-awesome.min.css。<linkrel="stylesheet"href="css/font-awesome.min.css">如果没有下载安装包的，可以引入在线css。比如：<linkrel="stylesheet"href="/font-awesome/4.7.0/css/font-awesome.css">4.FontAwesome图标知识储备（4）使用图标点击官网图标库，会看到很多图标，选择一个你喜欢的图标，点击开，出现该图标的代码，把该段代码复制，粘贴到你的页面中。4.FontAwesome图标知识储备总结浮动属性；float:left;浮动特性（重点）；脱标；浮动元素行内块元素特性；多个浮动的元素会进行横排、顶端对齐、没有间隙，如果一行排不下，会另起一行。浮动应用（难点）图文混排块元素横排浮动元素浮动对后面元素产生影响，在受影响的元素里添加clear；子元素全部浮动使父元素高度塌陷；给父元素设置高度;给父元素添加overflow:hidden;使用空标记清除浮动;父元素添加伪类after。清除浮动影响总结任务分析根据浮动特性：——如果多个盒子都设置了浮动，则它们会在一行内显示、顶端对齐排列，并且中间没有缝隙，紧挨在一起。若父元素容器太窄，无法容纳水平排列的浮动元素，那么其他浮动元素向下移动（掉下来），直到有足够的空间。如果浮动元素的高度不同，那当它们向下移动时可能会被其他浮动元素“卡住”。可以对<a>设置float:left;<a>会顶端对齐，由于宽度不够，第5个<a>会掉下来重新在一行排列，但是第1个<a>高度比较高，第5个<a>会被卡住，在第1个<a>之后排列。如何让<a>在一行内显示并且顶端对齐？图标<h1>div.photodiv#photoa>img任务实施任务实施2任务5.2制作“低碳环保网”轮播图效果展示轮播图就是通过一定的时间间隔和动画特效，让多张图片或视频在同一个位置上轮流播放的一种显示形式。知识储备边偏移2z-index属性3定位模式1目录Contents知识储备1.定位模式那实现网页中元素的位置的精确控制使用什么方法呢？定位/知识储备1.定位模式值描述static静态定位（默认定位方式）fixed固定定位，相对于浏览器窗口进行定位relative相对定位，相对于其原文档流的位置进行定位absolute绝对定位，相对于其上一个已经定位的父元素进行定位在CSS中，position属性用于设置元素的定位模式。语法格式选择器{position:属性值；}知识储备1.定位模式静态定位是元素的默认定位方式，就是各个元素在HTML文档流中默认的位置。注意：静态定位不能使用边偏移控制元素位置。1.静态定位(static）知识储备1.定位模式定位前定位后1.设置背景颜色距离左边150px距离上边100pxposition:relative;left:150px;top:100px;在文档流中的位置仍然保留着相对定位是将元素相对于它在标准文档流中的位置进行定位。2.相对定位（relative）知识储备1.定位模式定位前定位后距离左边150px距离顶部100px在文档流中的位置不保留position:absolute;left:150px;top:100px;绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素进行定位，若所有父元素都没有定位，则依据body根元素（浏览器窗口）进行定位。3.绝对定位(absolute）知识储备1.定位模式/固定定位是以浏览器窗口作为参照物来定义网页元素。4.固定定位（fixed）知识储备1.定位模式固定定位是相对于浏览器窗口作为参照物来进行定位。绝对定位父元素没有定位的时候也是相对于浏览器窗口进行定位，两种的区别在哪里呢？区别就在于是否随浏览器窗口滚动而滚动。固定定位不随浏览器窗口滚动而滚动，始终定位于页面中的某个位置，经常用来制作浮动广告、回到顶部等。知识储备2.边偏移边偏移属性描述top顶端偏移量，定义元素相对于其父元素上边线的距离bottom底部偏移量，定义元素相对于其父元素下边线的距离left左侧偏移量，定义元素相对于其父元素左边线的距离Right右侧偏移量，定义元素相对于其父元素右边线的距离边偏移来精确定义定位元素的位置，属性有top、bottom、left或right，其取值为不同单位的数值或百分比。知识储备3.z-index属性当对多个元素同时设置定位时，定位元素之间有可能会发生重叠定位导致重叠z-index可以调整重叠定位元素的堆叠顺序，其取值可为正整数、负整数和0。z-index的默认值是0。解决重叠问题总结所以在一个固定区域内部有元素需要定位，特别是子元素位于父元素的上浮一层，我们一般让父元素使用相对定位，子元素使用绝对定位，即“子绝父相”。总结定位模式（重点）：static、fixed、relative、absolute；边偏移：left、right、top、bottom；z-index属性：整数，值越大越在上方。知识应用轮播图：就是通过一定的时间间隔和动画特效，让多张图片或视频在同一个位置上轮流播放的一种显示形式。在很多网站或是应用程序中，我们都能够看到轮播的身影，例如各种广告、产品宣传、新闻资讯等。知识应用知识应用/中国新闻网知识应用马蜂窝旅游网/知识应用知识应用知识应用/拓展应用/任务分析可以用定位，那用什么定位模式呢？如果让子元素位于父元素的某一个位置，即子元素相对于父元素进行定位，那就可以给子元素p、左右箭头采用绝对定位，父元素swiper采用相对定位。轮播图就是通过一定的时间间隔和动画特效，让多张图片或视频在同一个位置上轮流播放的一种显示形式。怎样让文字p位于该模块的底部，图像的上方，又怎样让左右箭头分别位于左右两侧？div.swiper<img>a.preva.next<p>任务实施任务实施3任务5.3制作“公益行动”二级页面效果展示知识储备网页布局的本质就是用CSS来摆放盒子。一个模块是一个盒子，是一个局部，把这些盒子摆在一起就是一个整体。网页就是由一个个小盒子通过排列组合形成的。为了约束浮动元素位置，网页布局一般采取的策略是先用标准流的父元素排列上下位置，之后内部子元素采取浮动属性排列左右位置，这也是网页布局的一个准则。网页布局知识储备1.常见网页布局最简单的页面布局主要由头部（header）、焦点图（banner）、主要内容

main）、页面底部（footer）等部分组成。

两列布局组合布局单列布局知识储备（1）避免使用中文字符命名。例如：id="导航栏"。（2）不能以数字开头命名。例如：id="1nav"。（3）不能占用关键字。例如：id="h3"。（4）用最少的字母达到最容易理解的意义。命名原则2.网页模块命名规范知识储备2.网页模块命名规范驼峰式命名除了第一个单词外，其余单词的首字母都要大写。例如：partOne。帕斯卡命名每一个单词之间用“_”连接。例如：con