第20讲CSS浮动布局原理_第1页
第20讲CSS浮动布局原理_第2页
第20讲CSS浮动布局原理_第3页
第20讲CSS浮动布局原理_第4页
第20讲CSS浮动布局原理_第5页
已阅读5页，还剩10页未读， 继续免费阅读

下载本文档

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

文档简介

1、第20讲 CSS排版基础知识点版权所有陕西新华电脑软件学校-电子商务教研组课前回顾：标准流布局CSSCSS排版排版基础基础教学重难点教学重难点2任务二 浮动布局的原理（重点）任务一 float和clear属性（重点）任务三 常用的浮动布局方法（重点）版权所有陕西新华电脑软件学校-电子商务教研组课前回顾：标准流布局课前回顾：标准流布局u博客网站主页制作版权所有陕西新华电脑软件学校-电子商务教研组任务一任务一 floatfloat和和clearclear属性属性ufloat属性pfloat属性用于定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在CSS中，任何元素都可以

2、浮动。浮动元素会生成一个块级框，而不论它本身是行内元素还是块元素。版权所有陕西新华电脑软件学校-电子商务教研组任务一任务一 floatfloat和和clearclear属性属性ufloat属性版权所有陕西新华电脑软件学校-电子商务教研组任务一任务一 floatfloat和和clearclear属性属性u2clear属性pclear属性是与float属性相反的一个属性，它定义了在元素的哪边不允许出现浮动元素。如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。版权所有陕西新华电脑软件学校-电子商务教研组任务一任务一 floatfloat和和clearclear

3、属性属性uclear属性版权所有陕西新华电脑软件学校-电子商务教研组任务二任务二 浮动布局的原理浮动布局的原理u请看下图，当把框1向右浮动时，它脱离标准流并且向右移动，直到它的右边缘碰到包含框的右边缘。10-1.html版权所有陕西新华电脑软件学校-电子商务教研组任务二任务二 浮动布局的原理浮动布局的原理u空间不足，会出现卡槽现象10-2.htmlp如下图版权所有陕西新华电脑软件学校-电子商务教研组任务三任务三 常用的浮动布局方法常用的浮动布局方法u使用浮动方式进行网页布局是网页制作者常用到的方法。下面，我们将常用到的浮动布局方法进行归纳总结，读者在使用过程中可灵活运用。p方法一：两个元素都左

4、浮动或都右浮动10-f1.htmlp方法二：第一个左浮动，第二个右浮动10-f2.html版权所有陕西新华电脑软件学校-电子商务教研组任务三任务三 常用的浮动布局方法常用的浮动布局方法p方法三：第一个左浮动，第二个设置左边距（这时左边的需要设置宽度）10-f3.htmlp方法四：第一个右浮动，第二个设置右边距 10-f4.html版权所有陕西新华电脑软件学校-电子商务教研组任务三任务三 常用的浮动布局方法常用的浮动布局方法u自动“图文混排效果10-3.htmlu去掉“图文混排效果10-4.html版权所有陕西新华电脑软件学校-电子商务教研组本讲总结本讲总结13 本讲主要讲解浮动布局的概念、原理、设置方法和技巧。版权所有陕西新华电脑软件学校-电子商务教研组本讲作业本讲作业u必

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

温馨提示

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

最新文档

评论

0/150

提交评论