HTML5+CSS开发 CSS3多列布局 CH7-1 CSS3多列布局.pptVIP

HTML5应用开发 CSS3多列布局 第*页 设置列宽和列数 设置列间距 设置列边框 设置跨列标题 统一列高 用CSS对网页进行布局的基本步骤如下： ① 将页面用div分块（页面标题和栏目标题也可用h1或h2元素）； ② 通过CSS设置各块的大小 （利用width和height属性） 和位置 （利用padding和margin属性）， 以及相互关系（是否浮动或定位） ③如果该块中有图像，则通过设置该块的背景图像实现，如果还有背景颜色，也通过背景设置 ④ 在网页的各大div块中插入作为各个栏目框的小块 网页布局可分为 固定宽度布局 可变宽度布局 三列 固定宽度 可变宽度 单列变宽 等比例 单列固定 中列固定 侧列固定 中列变宽 侧列变宽 第*页 column-width子属性用于给列定义一个最小的宽度。默认值为auto，表示将根据column-count子属性指定的数目计算列宽。column-count子属性用于指定文本显示的列数。 实际应用中，通常将这两个参数放在columns中一起指定。例如，columns: auto 4;就是图17-1所示的4栏效果，这行代码将div中的内容分成4列显示，根据div的宽度640px，均分列宽为160px（包括列间距的宽度）。 第*页 默认情况下，浏览器根据列数和列宽来计算出列间距。但在实际项目中，默认列间距用得比较少，更多时候需要指定列间距。 CSS3的多栏布局中，column-gap子属性用来指定列间距，默认值为normal，相当于1em。需要注意的是，如果column-gap与column-width加起来大于总宽度，就无法显示column-count指定的列数，会被浏览器自动调整列数和列宽。 第*页 由于浏览器宽度有限，当列数过多时，列与列之间的间隔会比较窄，密密麻麻的，不方便阅读。这时候可以在列与列之间设置一条边框线，使版面看起来更清晰。 column-rule用于设置列的边框，类似于border，区别是不占用任何空间，因此设了column-rule不会导致列宽的变化。另外如果边框宽度大于column-gap列间距，将不会显示边框。column-rule的语法和border类似，例如，column-rule: 1px solid #000;。 第*页 在CSS3的多栏布局中，跨列显示通过column-span子属性来实现。column-span子属性有两个取值：默认值none表示不跨列，all表示跨越所有列。例如，文章标题可以设成all来跨列。 第*页 column-fill子属性用于统一列高。默认值为auto，各列的高度随内容自动调整；当设置为balance时，所有列的高度都设为最高的列高。 header nav Content title intro copyright h1 #header h1 #container #nav #banner #copyright #title #intr #intro #content div id=headerh1光普太阳能网站/h1/div #header{ background-color:#99cc00; width:852px; } #header h1 { text-indent: -9999px; /*隐藏h1中的文本*/ width: 691px; height: 104px; background: #fff url(img/logo.jpg) no-repeat 64px 0; /*logo图像左侧有64px空白*/ margin: 0 0 0 161px; /*向右移动161px*/ } div id=container div id=nav … /div div id=content … /div /div #container { background-color:#9c0; width:852px; } #container #content { width:690px; background-color: White; float:left; border-right: #daeda3 1px solid;/*主体右边框*/} #container #nav { float:left; width:152px; height:166px; background-color:#00801b; padding:15px 0 0 9px; } div id=nav a href=#首 页/aa href=#关于我们/aa href=#产品与服务/a a href=#新闻中心/aa href