一、实现两列布局

许多网站有一些特点，如页面顶部放置一个大的导航或广告条，右侧是链接或图片，左侧放置主要内容，页面底部放置版权信息等。

一般情况，此类网页布局的两列都有固定的宽度，而且从内容上很容易区分主要内容区域和侧边栏。页面布局整体分为上、中、下3个部分，即header区域、container区域和footer区域。其中，container又包含mainBox（主要内容区域）和sideBox（侧边栏），布局示意图如下

1. 原理

利用 CSS 的浮动属性float，将一个元素向左或向右浮动，另一个元素则自动环绕在其周围，从而实现两列布局。

2. 示例代码

CSS网页布局（重塑网页布局）

欢迎来到：Komorebi⁼的博客

一、两列布局

许多网站有一些特点，如页面顶部放置一个大的导航或广告条，右侧是链接或图片，左侧放置主要内容，页面底部放置版权信息等。

一般情况，此类网页布局的两列都有固定的宽度，而且从内容上很容易区分主要内容区域和侧边栏。页面布局整体分为上、中、下3个部分，

即header区域、container区域和footer区域。其中，container又包含mainBox（主要内容区域）和sideBox（侧边栏），布局示意图如下

运行结果如下：

二、 实现三列布局

对于三列布局，浏览者的注意力最容易集中在中间栏的信息区域，其次才是左、右两侧的信息。

三列布局与两列布局非常相似，在处理方式上可以利用两列布局结构的方式处理，如下图所示的就可以是三个独立的列组合而成的三列布局。

1. 原理

将三个元素分别向左浮动，通过设置合适的宽度和外边距，使它们在同一行上排列，实现三列布局。

2. 示例代码

CSS网页布局（重塑网页布局）

欢迎来到：Komorebi⁼的博客

目录

1. 两列布局

   1. 原理
   2. 实例代码

2. 三列布局

   1. 1原理
   2. 2实例代码

一、两列布局

许多网站有一些特点，如页面顶部放置一个大的导航或广告条，右侧是链接或图片，左侧放置主要内容，页面底部放置版权信息等。

一般情况，此类网页布局的两列都有固定的宽度，而且从内容上很容易区分主要内容区域和侧边栏。页面布局整体分为上、中、下3个部分，

即header区域、container区域和footer区域。其中，container又包含mainBox（主要内容区域）和sideBox（侧边栏），布局示意图如下

运行结果如下：

上面我们是将三个盒子都设置了浮层，还有一个办法是，将左右两边的盒子设置左右浮层，而中间的盒子不设置，为它加入左右外边距，使外边距占据左右边栏的底部

代码如下：

#div1{

width: 15%;

height: 800px;

background-color:pink;

float: left;

text-align: center;

}

#div2{

width: 15%;

height: 800px;

background-color: aquamarine;

float:right;

text-align: center;

}

#div3{

width: 60%;

height: 800px;

background-color: aqua;

/* 加入左右外边距，使替补使外边距占据左右边栏的底部 */

margin-left: 20%;

margin-right: 20%;

float:none;

text-align: center;

}

section{

width: 100%;

}

footer{

width: 100%;

height: 100px;

background-color:yellow;

border: 5px solid #000;

text-align: center;

}

左边栏

右边栏

中间区域

运行结果如下：

从上面可以看出，三列布局仅比两列布局多了一列内容，无论形式上怎么变化，最终还是基于两列布局结构演变出来。

而我们还可以在使网页同时存在两列布局和多列布局。如我们常见的购物网站就是如此。

其代码与前面的两列、三列差不多。

运行结果如下：

几列布局都是与此相似，大家可以试试多加几列。

在写上面的布局时我们会发现，设置盒子的宽度很难使其与旁边的盒子无缝隙连接，此时我们可以使用百分比布局

三、百分比布局

在网页设计中，百分比布局是一种非常灵活的布局方式。它可以让网页元素根据浏览器窗口的大小自动调整尺寸，从而适应不同的屏幕尺寸和设备。在这篇博客中，我们将深入探讨 CSS 中的百分比布局。

1、百分比布局的优势

（1） 响应式设计

百分比布局能够使网页在不同尺寸的屏幕上都能良好地显示，无需为每个设备单独设计布局。

（2） 灵活性

可以轻松地调整元素的大小和位置，以适应不同的布局需求。

（3）易于维护

当需要修改网页布局时，只需要调整百分比值，而不需要修改每个元素的固定尺寸。

使用上次的博客—网页布局中的网页，设置下面的网页

代码如下：

欢迎观看我的博客

下面讲述HTNL5中的主要文档结构元素

意义

header元素

nav元素

section元素

想了解更多博客：点击这里

四、综合练习

大家可以根据上面的知识制作一个网页布局，如下图

其代码如下

看HTML、CSS相关博客就搜索Komorebi⁼

文章

联系我们

姓名:

邮箱: