项目11 浮动布局网页设计与制作_第1页
项目11 浮动布局网页设计与制作_第2页
项目11 浮动布局网页设计与制作_第3页
项目11 浮动布局网页设计与制作_第4页
项目11 浮动布局网页设计与制作_第5页
已阅读5页，还剩27页未读， 继续免费阅读

下载本文档

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

文档简介

项目11浮动布局网页设计与制作211.1基础任务：制作“UI设计院”网站首页11.2前端修炼手册：浮动布局的原理及应用技巧11.3能力提升：制作“学校网站新闻列表”网页11.4能力挑战：制作“咔嚓摄影网”网页目录11.1基础任务：制作“UI设计院”网站首页311.1基础任务：制作“UI设计院”网站首页4页面整体布局11.1基础任务：制作“UI设计院”网站首页5页头和今日特讯部分11.1基础任务：制作“UI设计院”网站首页6学员活动板块11.1基础任务：制作“UI设计院”网站首页7新闻中心、热门活动和就业信息板块11.1基础任务：制作“UI设计院”网站首页8新闻中心、热门活动和就业信息板块结构911.2前端修炼手册：浮动布局的原理及应用技巧浮动是在进行网页布局时常用的一种技术，能够方便地进行布局，通过设置元素的浮动属性可以使当前元素脱离标准流，改变元素的位置，相当于浮动起来一样。[!]10float属性的用途用途float属性用来定义元素在哪个方向浮动，这个属性在定义之初是为了使文本环绕在图像周围，不过在CSS中，任何元素都可以浮动。不论浮动元素本身是块元素还是行内元素，浮动都会使其生成一个块级框。11.2.1float属性11Float的属性值值描述left元素向左浮动right元素向右浮动none默认值。元素不浮动，会显示在文档中出现的位置。inherit规定应该从父元素继承float属性的值。11.2.1float属性float属性值及含义1211.2.2浮动布局的原理网页HTML文档重要原则：被设置为浮动的元素会脱离文档流，不占空间，就像浮动起来一样。

在上图中，一个包含框div中包含了4个子div，包含框div只设置了宽度，没有设置高度，4个子div分别设置了宽度和高度。可以看出包含框的高度是由被包含元素的高度决定的，被包含元素的大小“撑开”了包含框。因为div是块元素，要各占一行，所以即使外层div宽度足够，div2也不会和div1在同一行出现，这符合标准流布局原理，元素出现在它该出现的地方。网页效果11.2.2浮动布局的原理14<body><divclass="box"><divclass="div1">这是div1</div><divclass="div2">这是div2</div><divclass="div3">这是div3</div><divclass="div4">这是div4</div></div></body>结构代码11.2.2浮动布局的原理15.box{ width:800px; border:#0001pxsolid;}.div1{ width:200px; height:100px; background:#f00; border:#0001pxsolid;}.div2{ width:400px; height:50px; background:#FF0; border:#0001pxsolid;}样式代码样式代码.div3{ width:100px; height:150px; background:#6CF; border:#0001pxsolid;}.div4{ width:200px; height:50px; background:#0F0; border:#0001pxsolid;}11.2.2浮动布局的原理

当设置div1为左浮动时，效果如上图所示。div1脱离了标准流向左移动，直到碰到包含框，div2、div3、div4重新组成了标准流向上移动，div1处于浮动状态，所以在水平方向上挡住了div2的一部分，在垂直方向上挡住了div3的一部分。网页效果11.2.2浮动布局的原理网页效果11.2.2浮动布局的原理

如果将div1和div2都设置为左浮动，效果如上图所示，div1脱离标准流向左移动，直到碰到包含框，div2也脱离标准流向左移动，直到碰到前一个浮动框div1。因此可以看到这一次div2没有被div1挡住，而是紧随其后，div3和div4重新组成标准流向上移动，直到碰到包含框，但因为div1和div2处于浮动状态，所以在垂直方向上div1挡住了div3的一部分。

上图所展示的是将div1、div2、div3都设置为左浮动的效果，div1、div2、div3都脱离了标准流向左移动，只有div4自己重新组成标准流向上移动，而div4的位置也说明另一个浮动原则，就是使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。因此可以看到div4的边框和背景受前面div浮动的影响向上移动，只是因为被div1挡住从视图中“消失”了，而div中的内容“这是div4”留在了下面，位置与div1、div2、div3三个div中高度最高的div3的底部对齐。

网页效果11.2.2浮动布局的原理

当4个div都设置为左浮动时效果如上图所示，因为包含框的宽度不够，因此div4自动转到下一行显示，而位置依然与div3的底部对齐。网页效果11.2.2浮动布局的原理

如果将div1的高度增加，让其高度超过div3，效果将如图11-26所示，div4被div1“卡住了”，即使只超出1px，效果也是如此。因为根据浮动原理，div4的顶端要与div3的底端对齐。另外，因为4个div都设置了左浮动，因而不占位置，所以包含框的高度成为0，边框就出现了“坍塌”的情况，在上图中表现为最上边的一条直线就是上下边框叠加在一起的结果。网页效果11.2.2浮动布局的原理Ⅰ.两个div都设置左浮动或都设置右浮动Ⅲ.第一个设置左浮动（需设置宽度），第二个设置左边距1234Ⅱ.一个div设置左浮动，另一个设置右浮动Ⅳ.第一个设置右浮动（需设置宽度），第二个设置右边距11.2.3浮动布局技巧

在网页中插入两个div，设置其class名分别为box1和box2，两个div各自独占一行，如果希望两个div在同一行显示就要用到浮动属性，可以使用以下几种方法进行布局：

浮动布局带来的不良影响11.2.4消除浮动布局带来的不良影响

在浮动布局中因为浮动元素脱离了标准流，因此会对附近的其他元素产生影响，使布局出现混乱。还有一种高度坍塌的现象：原来父容器高度是由被包含元素撑开的，但是当被包含元素浮动后，脱离标准流浮动起来，那父容器的高度就会坍塌，如下图所示。因此要想办法解决浮动带来的影响。

clear属性11.2.4消除浮动布局带来的不良影响clear属性定义了元素的某一侧不允许出现浮动元素，如果声明为左侧或右侧清除，会使元素的上外边框边界刚好在该位置浮动元素的下外边框边界之下。值描述left在左侧不允许浮动元素right在右侧不允许浮动元素both在左右两侧均不允许浮动元素none默认值。允许浮动元素出现在两侧。inherit规定应该从父元素继承clear属性的值。clear属性值及含义11.2.4消除浮动布局带来的不良影响在网页中插入两个div，分别设置class名为box1和box2，在box1中插入两个div，设置class名为child-box1和child-box2，<body><divclass="box1"><divclass="child-box1">child-box1</div><divclass="child-box2">child-box2</div></div><divclass="box2"></div></body>结构代码.box1{width:200px;border:2pxsolid#00f;}.box1.child-box1{ height:100px;width:100px;background:#f00;}.box1.child-box2{height:100px;width:100px;background:#0f0;}.box2{width: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设置了左浮动后效果如下图所示，可以看到box2受box1中子元素的浮动影响向上移动，而且box1也出现了高度坝塌的现象。11.2.4消除浮动布局带来的不良影响此时如果对box2使用clear:both;可以使box2回到原来的位置，但却不能解决box1高度坍塌的问题，效果如下图所示。11.2.4消除浮动布局带来的不良影响另一种方法是在浮动元素的后面添加一个空div标签，并在样式表中设置其clear属性为both，代码如下：.clear{clear:both;}样式代码<body><divclass="box1"> <divclass="child-box1">child-box1</div> <divclass="child-box2">child-box2</div> <divclass="clear"></div></div><divclass="box2"></div></body>结构代码备注：因为添加了空元素会给后期维护带来麻烦，所以并不是一个好方法。11.2.4消除浮动布局带来的不良影响

现在比较常用的方法是给浮动元素添加一个类名clearfix，然后利用伪元素来清除浮动带来的影响。代码如下：.clearfix:after{display:block;content:"";height:0;visibility:hidden;clear:both;}.clear

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

温馨提示

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

最新文档

评论

0/150

提交评论