HTML+CSS+JavaScript网页设计 第10章 网页布局ppt课件.ppt

《HTML+CSS+JavaScript网页设计 第10章 网页布局ppt课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第10章　网页布局本章概述本章的学习目标主要内容1本章概述好的网页一定有一个好的布局，网页布局是指对页面中的标题、导航栏、主要内容、脚注、表单等各种构成元素进行合理地排版。使用CSS布局可以有很多方法，本章主要介绍了多列布局、盒子的浮动与定位，以及弹性盒布局。实际开发中，一些复杂的网页可能会用到不止一种布局，通常是先整体使用一种布局设计，在局部可以使用另一种布局方式。通过本章的学习读者应掌握使用CSS对网页进行布局的常用方法，深入了解盒子模型的设计思想和弹性盒布局的基本原理，能够对页面元素进行合理的排版布局。2本章的学习目标掌握多列布局相关的CSS属性的用法进一步了

2、解盒子模型的设计思想掌握position属性的设置几种定位方式理解z-index属性的作用掌握float属性的基本用法理解弹性盒布局中弹性容器和弹性子元素的关系掌握弹性盒子的常用属性掌握弹性子元素属性的用法3主要内容10.1多列布局10.2使用CSS定位与布局10.3弹性盒布局10.4本章小结10.5思考和练习410.1多列布局在CSS3多列布局功能出现之前，如果想让文本呈多列显示，要么使用绝对定位，手动给文本分段落，要么使用JavaScript脚本进行控制。CSS3中新增的多列功能是对传统网页中块状布局模式的有力扩充。顾名思义，多列布局功能可以方便开发人员将文本排

3、版成多列，实现报纸那样的多栏效果5设置列宽和列数column-width属性用于给列定义最小宽度。默认值为auto，表示将根据column-count属性指定的列数自动计算列宽。column-count属性用于指定文本显示的列数。在实际应用中，通常简写形式columns，一起指定这两个属性的值。6设置列间距默认情况下，浏览器根据列数和列宽来计算出列间距。但在实际项目中，默认列间距用得比较少，更多时候需要指定列间距。这就用到了column-gap属性，该属性的默认值为normal，相当于1em。需要注意的是，如果column-gap与column-width加起来大于

4、总宽度，就无法显示column-count指定的列数，会由浏览器自动调整列数和列宽。7设置列边框由于浏览器宽度有限，当列数过多时，列与列之间的间隔就会比较窄，不方便阅读。这时可以在列与列之间设置一条边框线，使版面看起来更清晰。column-rule用于设置列边框，类似于border属性，所不同的是这个列边框不占用任何空间，因此设置column-rule不会导致列宽的变化。它也包含3个子属性：column-rule-width、column-rule-style和column-rule-color，分别用来设置列之间边框的宽度、样式和颜色。边框的宽度通常需要小于col

5、umn-gap属性的值，否则可能会导致边框覆盖部分文字。8设置跨列标题很多时候，一篇文章需要以多栏的方式显示内容，但有共同的标题，而标题不属于任何一列，标题是所有内容的标题。因此，在排版时，需要将标题放在顶部并跨列显示。这可以通过跨列属性column-span来实现。column-span属性有两个取值：默认值none表示不跨列，all表示跨越所有列。例如，文章标题可以设成all来跨列。9统一列高column-fill属性用于统一列高。默认值为auto，各列的高度随内容自动调整；它还有另外一个值balance，当设置为balance时，所有列的高度都设为最高的列高。

6、10主要内容10.1多列布局10.2使用CSS定位与布局10.3弹性盒布局10.4本章小结10.5思考和练习1110.2使用CSS定位与布局在CSS中，一共有三种常用的“定位方案”(positioningscheme)用来布局页面中的元素：normal、float以及absolute。默认情况下，元素使用“正常流”(normal)或“静态流”(staticflow)在页面中进行布局。在正常流中，页面中的块级元素从顶部向底部流动(记住每个块级元素都以独占一个新行的形式出现)，而行内元素则从左向右流动(因为它们不会从新行开始显示)。12position属性positio

7、n的中文含义是位置、状态。该属性有如下4个可能的取值：static：与正常流相同，并且为默认值。因此实际使用该属性时，很少会指定此值。relative：盒子的位置可以相对其在正常流中的位置出现偏移，对象不可层叠，将根据left、right、top和bottom等属性的值在正常流这偏移。absolute：将盒子对象从正常流中拖出，完全使用width、height、left、right、top、bottom等属性进行绝对定位，绝对定位的元素可以有边界，但这些边界不压缩。其层叠通过z-index属性定义。fixed：固定在屏幕的某个位置，位置通过left、top、ri