《HTML CSS JavaScript网页制作三合一案例教程》教学课件 10第十章.pptxVIP

主编：徐照兴、谭鸿健、郑宁健;第十章 CSS浮动布局 ——制作企业网站新闻列表页面;;案例一 对页面进行整体布局 ——浮动布局概念;案例一 对页面进行整体布局 ——浮动布局概念;案例一 对页面进行整体布局 ——浮动布局概念;一、float和clear属性;clear是一个与float相反的属性，它定义了在元素的哪边不允许出现浮动元素。如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。clear属性的值及其意义如表10-2所示。;二、浮动布局的原理;再请看图10-12左图所示，当框1向左浮动时，它脱离标准流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于标准流中，所以它不占据空间，实际上覆盖住了框2，使框2从视图中消失。如果把所有三个框都向左浮动，那么框1向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框，如图10-12右图所示。;如果包含框太窄，无法容纳水平排列的3个浮动元素，那么其他浮动块向下移动，直到有足够的空间，如图10-13左图所示。如果浮动元素的高度不同，那么当它们向下移动时可能被其他浮动元素“卡住”，如图10-13右图所示。;三、常用的浮动布局方法;在网页的style标签对中加入以下样式，效果如图10-15所示。;将网页的css样式设置为一个左浮动，一个右浮动，效果如图10-17所示。;将网页的css样式设置如下，效果如图10-18所示。;将网页css样式设置如下，效果如图10-19所示。;四、清除浮动对布局的不良影响;当两个div都同时向左浮动后，我们发现段落p自动跑到同一行中，效果如图10-20所示。;五、浮动布局应用技巧;要想阻止行框围绕浮动框，需要对该行框应用clear属性，如图10-23左图所示。此外，还可在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面，如图10-23右图所示。;案例二 制作有哪些信誉好的足球投注网站栏目;案例二 制作有哪些信誉好的足球投注网站栏目;案例三 制作新闻菜单;案例三 制作新闻菜单;案例四 制作新闻列表;案例四 ???作新闻列表;Thank you！