DIV CSS常见布局1.ppt

DIV+CSS常见布局 主要内容 1 单列版式 2 双列版式 3 三列版式 DIV+CSS常见布局 DIV+CSS布局看起来像是把页面划分成若干个区域，如果还划分区域，根据内容的排列方式，常见的页面布局有如下三个： 1、单列版式 2、双列版式 3、三列版式 单列版式是最简单的布局版式，网页内容在一栏中显示，如下图： 1、单列版式 标题 网页内容 页脚 单列版式分为： 单列固定宽度版式 各个区域宽度是固定的 单列自适应宽度版式 各个区域宽度会随着包含框的宽度自适应（将宽度设置为百分比） 网页内容部分源代码，如下图： 1、单列版式 1、单列版式 CSS部分源代码，如下图： 双列版式是网页中最常用的布局版式，如下图： 2、双列版式 标题 副栏 主栏 页脚 双列版式分为： 双列固定宽度版式 各个区域宽度是固定的 双列自适应宽度版式 各个区域宽度会随着包含框的宽度自适应（将宽度设置为百分比） 双列兼容宽度版式 一栏宽度固定，一栏宽度自适应 2、双列版式（双列固定宽度版式） 双列固定宽度版式 网页内容部分源代码，如下图： 2、双列版式（双列固定宽度版式） CSS部分源代码，如下图： 2、双列版式（双列自适应宽度版式） 双列自适应宽度版式 网页内容部分源代码，如下图： CSS部分源代码，如下图： 2、双列版式（双列自适应宽度版式） 双列兼容宽度版式 网页内容部分源代码，如下图： 2、双列版式（双列兼容宽度版式） CSS部分源代码，如下图： 左侧浮动，右侧采用margin-left 2、双列版式（双列兼容宽度版式） 三列版式是企业网站和商用网站中最常用的布局版式，如下图： 3、三列版式 标题 副栏 主栏 次栏 页脚 三列版式分为： 三列固定宽度版式 各个区域宽度是固定的 三列自适应宽度版式 各个区域宽度会随着包含框的宽度自适应（将宽度设置为百分比） 三列兼容宽度版式 ①双列固定，一列宽度自适应 ②一列固定，双列宽度自适应 3、三列版式（三列固定宽度版式） 三列固定宽度版式 网页内容部分源代码，如下图： CSS部分源代码，如下图： 3、三列版式（三列固定宽度版式） 三列自适应宽度版式 网页内容部分源代码，如下图： 3、三列版式（三列自适应宽度版式） CSS部分源代码，如下图： 3、三列版式（三列自适应宽度版式） 三列兼容宽度版式 ①双列固定，一列宽度自适应（副栏、次栏固定宽度，主栏宽度自适应） 方法一：网页内容部分源代码，如下图： 3、三列版式（三列兼容宽度版式—双列固定，一列宽度自适应） CSS部分源代码，如下图： 左右两侧绝对定位，中间采用margin-left,margin-right 3、三列版式（三列兼容宽度版式—双列固定，一列宽度自适应） 三列兼容宽度版式 ①双列固定，一列宽度自适应（副栏、次栏固定宽度，主栏宽度自适应） 方法二：网页内容部分源代码，如下图： 3、三列版式（三列兼容宽度版式—双列固定，一列宽度自适应） CSS部分源代码，如下图： 左右两侧浮动，中间采用margin-left,margin-right 3、三列版式（三列兼容宽度版式—双列固定，一列宽度自适应） 三列兼容宽度版式 ②一列固定，双列宽度自适应（副栏固定宽度，次栏、栏宽度自适应） 方法一：网页内容部分源代码，如下图： 3、三列版式（三列兼容宽度版式—一列固定，双列宽度自适应） CSS部分源代码，如下图： 左右两侧绝对定位，中间采用margin-left,margin-right。 左侧宽度固定，右侧宽度百分比。 3、三列版式（三列兼容宽度版式—一列固定，双列宽度自适应） 三列兼容宽度版式 ②一列固定，双列宽度自适应（副栏固定宽度，次栏、栏宽度自适应） 方法二：网页内容部分源代码，如下图： 3、三列版式（三列兼容宽度版式—一列固定，双列宽度自适应） CSS部分源代码，如下图： 3、三列版式（三列兼容宽度版式—一列固定，双列宽度自适应） 左右两侧浮动，中间采用margin-left,margin-right。 左侧宽度固定，右侧宽度百分比。