第章 CSS浮动布局.pptxVIP

网页设计案例教程案例说明 本案例主要完成整个新闻列表页面的布局，包括构建HTML结构和设置CSS样式，并对浮动的基本原理有初步认识。案例步骤 下面开始构建新闻列表页面的整体布局。该页面可分为3部分：头部header、主体content和尾部footer。其中主体content又可分为2大部分：新闻菜单（左）leftlist和新闻列表（右）rightlist。案例步骤构建HTML结构1.将第8章制作的xinwen.html网页另存在bljt站点根文件夹中，命名为xwlist.html，然后调整xwlist.html网页的结构，删除其id名为content的div中的内容（不删除该div），以及“集团要闻”超链接（注意不要将后面的/section结束标签删除了）。步骤 01案例步骤在id为content的div中新建两个平行的div，id名分别为leftlist和rightlist。步骤 02设置CSS样式案例步骤2.步骤 01设置新闻菜单样式，包括设置宽度和左浮动。#content #leftlist{ width: 208px; /*这里盒子的宽度大小根据“新闻中心”背景图像确定*/ float: left; /*设置左边盒子左浮动*/ background-color:#0099FF; /*此背景只作为讲解知识时用，最后需要去除*/}案例步骤设置新闻列表背景。设置背景颜色后，观察效果，会发现当新闻列表的内容超出一行时，会从盒子的最左侧开始排列，这说明新闻列表盒子的宽度依然是100%。#content #rightlist { background-color: #FFFF66; /*此背景只作为讲解知识时用，最后需要去除*/}步骤 02案例步骤接上步操作，为右边新闻列表的盒子加上一个左外边距（大于或等于左边盒子大小）。步骤 03#content #rightlist{ background-color: #FFFF66; margin-left: 208px; /*设置右边盒子的左外边距*/}案例步骤对于步骤3的另一种方案，是为右边的盒子设置宽度并让其也浮动起来。为此，将#content #rightlist选择器的代码作如下更改。为了使左右两个盒子中间产生一定的空隙，可以为左边或右边的盒子设置20px的间距，此处设置右边盒子左边界。步骤 04#content #rightlist { background-color: #FFFF66; float: left; /*设置右边盒子左浮动*/ width: 652px; /*设置右边盒子宽度*/ margin-left: 20px; /*设置右边盒子左外边距*/}案例步骤 此处将右边盒子的宽度设为652px，这个宽度是怎么确定的呢？页面宽度（960px）减content的左右内边距（各40px，共计80px），再减去左边盒子的大小（208px）及两个盒子的间距（20px），即960px-80px-208px-20px=652px。案例步骤 步骤4方案的缺点是对后面标准流的元素位置产生了影响。解决办法是在浮动对象的相邻位置清除浮动元素对标准流元素的影响，此处在右边盒子rightlist后面增加一个空白盒子，并在该盒子的css样式中设置clear属性即可。案例步骤在HTML中id为rightlist的div后面插入一个class名为clear的空div，然后为其设置clear属性，从而清除浮动的影响。此时页面主体content部分的HTML代码如下。步骤 05div id=content div id=leftlist新闻菜单（左）/div div id=rightlist新闻列表（右）/div div class=clear/div/divfloat属性支撑知识点1.一、float和clear属性 float属性用于定义元素浮动的方向。表9-1 float属性的值及其意义值描 述left元素向左浮动right元素向右浮动none默认值。元素不浮动，会显示在文档中出现的位置inherit规定应该从父元素继承float属性的值。IE不支持该属性clear属性2. clear是一个与float相反的属性，它定义了在元素的哪边不允许出现浮动元素。假设声明为左边清除，会使元素的上外边框边界刚好在左边上浮动元素的下外边距边界之下。表9-2 clear属性的值及其意义属性值描 述left在左侧不允许浮动元素right在右侧不允许浮动元素both在左右两侧均不允许浮动元素none默认值。允许浮动元素出现在两侧inherit规定应该从父元素继承 clear 属性的值。IE不支持该属性二、浮动布局的原理 float属性可用于任何HTML元素。设置了浮动属性的元素遵循如下