中职 网页设计与制作案例教程第11章 .pptx

《中职 网页设计与制作案例教程第11章 .pptx》由会员分享，可在线阅读，更多相关《中职 网页设计与制作案例教程第11章 .pptx（32页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、中职 网页设计与制作案例教程第11章 工信版第11章 浮动布局WEB311.1基础项目：制作“创优翼网站首页”11.2知识库：浮动布局的原理及应用技巧11.3提高项目：制作“学校网站新闻列表页”11.4拓展项目：制作“咔嚓摄影网”主页目录WEB11.1基础项目：制作“创优翼网站首页”4WEB11.1基础项目：制作“创优翼网站首页”5页面整体布局WEB11.1基础项目：制作“创优翼网站首页”6页头和今日特讯部分WEB11.1基础项目：制作“创优翼网站首页”7学员活动版块WEB11.1基础项目：制作“创优翼网站首页”8新闻中心、热门活动和就业信息版块WEB11.1基础项目：制作“创优翼网站首页”9

2、新闻中心、热门活动和就业信息版块WEB1011.2知识库：浮动布局的原理及应用技巧浮动是在进行网页布局时常用的一种技术，能够方便地进行布局，通过设置元素的浮动属性可以使当前元素脱离标准流，改变元素的位置，相当于浮动起来一样。!11float属性的用途用途float属性用来定义元素在哪个方向浮动，这个属性在定义之初是为了使文本环绕在图像周围，不过在 CSS 中，任何元素都可以浮动。不论浮动元素本身是块级元素还是行内元素，浮动都会使其生成一个块级框。11.2.1float属性12Float的属性值值值描述描述left元素向左浮动right元素向右浮动none默认值。元素不浮动，会显示在文档中出现的

3、位置。inherit规定应该从父元素继承 float 属性的值。11.2.1float属性WEB1311.2.2浮动布局的原理网页HTML文档重要原则：被设置为浮动的元素会脱离文档流，不占空间，就像浮动起来一样。在上图中，一个包含框DIV中包含了4个子DIV，包含框DIV只设置了宽度，没有设置高度，4个子DIV分别设置了宽度和高度。可以看出包含框的高度是由被包含元素的高度决定的，被包含元素的大小“撑开”了包含框。因为DIV是块元素要各占一行，所以即使外层DIV宽度足够，div2也不会和div1在同一行出现，这符合标准流布局原理，元素出现在它该出现的地方。网页效果11.2.2浮动布局的原理15这

4、是div1这是div2这是div3这是div4结构代码11.2.2浮动布局的原理16.boxwidth:800px;border:#0001pxsolid;.div1width:200px;height:100px;background:#f00;border:#0001pxsolid;.div2width:400px;height:50px;background:#FF0;border:#0001pxsolid;样式代码样式代码.div3width:100px;height:150px;background:#6CF;border:#0001pxsolid;.div4width:200px;

5、height:50px;background:#0F0;border:#0001pxsolid;11.2.2浮动布局的原理当设置div1为左浮动时，效果如上图所示。div1脱离了标准流向左移动，直到碰到包含框，div2、div3、div4重新组成了标准流向上移动，div1处于浮动状态，所以在水平方向上挡住了div2的一部分，在垂直方向上挡住了div3的一部分。网页效果11.2.2浮动布局的原理如果将div1和div2都设置为左浮动，效果如上图所示，div1脱离标准流向左移动，直到碰到包含框，div2也脱离标准流向左移动，直到碰到前一个浮动框div1，因此可以看到这一次div2没有被div1挡住

6、，而是紧随其后，div3和div4重新组成标准流向上移动，直到碰到包含框，但因为div1和div2处于浮动状态，所以在垂直方向上div1挡住了div3的一部分。网页效果11.2.2浮动布局的原理上图所展示的是将div1、div2、div3都设置为左浮动的效果，div1、div2、div3都脱离了标准流向左移动，只有div4自己重新组成标准流向上移动，而div4的位置也说明另一个浮动原则：就是使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。因此可以看到div4的边框和背景受前面DIV浮动的影响向上移动，只是因为被div1挡住从视图中“消

7、失”了，而DIV中的内容“这是div4”留在了下面，位置与div1、div2、div3三个DIV中高度最高的div3的底部对齐。网页效果11.2.2浮动布局的原理当4个DIV都设置为左浮动时效果如上图所示，因为包含框的宽度不够，因此div4自动转到下一行显示，而位置依然与div3的底部对齐。网页效果11.2.2浮动布局的原理.两个DIV都设置左浮动或都设置右浮动.第一个设置左浮动（需设置宽度），第二个设置左边距1234.一个DIV设置左浮动，另一个设置右浮动.第一个设置右浮动（需设置宽度），第二个设置右边距11.2.3浮动布局技巧在网页中插入两个DIV，设置其class名分别为box1和box

8、2，两个DIV各自独占一行，如果希望两个DIV在同一行显示就要用到浮动属性，可以使用以下几种方法进行布局：浮动布局带来的不良影响11.2.4消除浮动布局带来的不良影响在浮动布局中因为浮动元素脱离了标准流，因此会对附近的其他元素产生影响，使布局出现混乱。还会出现一种高度坍塌的现象：原来父容器高度是由被包含元素撑开的，但是当被包含元素浮动后，脱离标准流浮动起来，那父容器的高度就会坍塌，如下图所示。因此要想办法解决浮动带来的影响。clear属性11.2.4消除浮动布局带来的不良影响clear属性定义了元素的某一侧不允许出现浮动元素，如果声明为左侧或右侧清除，会使元素的上外边框边界刚好在该边上浮动元素

9、的下外边框边界之下。值值描述描述left在左侧不允许浮动元素right在右侧不允许浮动元素both在左右两侧均不允许浮动元素none默认值。允许浮动元素出现在两侧。inherit规定应该从父元素继承 clear 属性的值。11.2.4消除浮动布局带来的不良影响在网页中插入两个DIV，分别设置class名为box1和box2，在box1中插入两个DIV，设置class名为child-box1和child-box2，child-box1child-box2结构代码.box1width:200px;border:2pxsolid#00f;.box1.child-box1height:100px;wi

10、dth:100px;background:#f00;.box1.child-box2height:100px;width:100px;background:#0f0;.box2width:200px;height:150px;border:2pxsolid#000;样式代码11.2.4消除浮动布局带来的不良影响在网页中插入两个DIV，分别设置class名为box1和box2，在box1中插入两个DIV，设置class名为child-box1和child-box2，网页效果11.2.4消除浮动布局带来的不良影响当两个子元素child-box1和child-box2设置了左浮动后效果如下图所示，可

11、以看到box2受box1中子元素的浮动影响向上移动，而且box1也出现了高度坝塌的现象。11.2.4消除浮动布局带来的不良影响此时如果对box2使用clear:both;可以使box2回到原来的位置，但却不能解决box1高度坍塌的问题，效果如下图所示。11.2.4消除浮动布局带来的不良影响另一种方法是在浮动元素的后面添加一个空DIV标签，并在样式表中设置其clear属性为both，代码如下：.clearclear:both;样式代码child-box1child-box2结构代码备注：因为添加了空元素会给后期维护带来麻烦，所以并不是一个好方法。11.2.4消除浮动布局带来的不良影响现在比较常用的方法是给浮动元素添加一个类名clearfix，然后利用伪元素来清除浮动带来的影响。代码如下：.clearfix:afterdisplay:block;content:;height:0;visibility:hidden;clear:both;.clearfixzoom:1;样式代码child-box1child-box2结构代码3011.3提高项目：制作“学校网站新闻列表页”3111.4拓展项目：制作“咔嚓摄影网”主页