当前位置：首页 > news >正文

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

news 2025/11/11 19:34:02

一、实现两列布局

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

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

1. 原理

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

2. 示例代码

<head>#div1{width: 1600px;height: 800px;background-color:#8caede;border: 3px solid #000;float: left;}#div2{width: 250px;height: 800px;background-color:#bce6d8;border: 3px solid #000;float:right;}section{width: 1900px;}footer{width: 1900px;height: 100px;background-color:#decece;border: 5px solid #000;}</style></head>
<body><section><div id="div1">主要区域</div><div id="div2">侧边栏</div><div style="clear: both;"></div></section><footer>网页页脚</footer></body>
</html>

运行结果如下：

二、实现三列布局

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

三列布局与两列布局非常相似，在处理方式上可以利用两列布局结构的方式处理，如下图所示的就可以是三个独立的列组合而成的三列布局。三列布局仅比两列布局多了一列内容，无论形式上怎么变化，最终还是基于两列布局结构演变出来。几列布局都是与此相似，大家可以试试多加几列。

1. 原理

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

2. 示例代码

<head><style>section{width: 1900px;}#div1{width: 825px;height: 800px;background-color:pink;border: 3px solid #000;float: left;text-align: center;}#div3{width: 807px;height: 800px;background-color: aqua;border: 3px solid #000;float:right;text-align: center;}#div2{width: 250px;height: 800px;background-color: aquamarine;border: 3px solid #000;float:right;text-align: center;}footer{width: 1900px;height: 100px;background-color:yellow;border: 5px solid #000;text-align: center;}</style></head>
<body><section><div id="div1">主要区域</div><div id="div2">中间区域</div><div id="div3">侧边栏</div><div style="clear: both;"></div></section><footer>网页页脚</footer></body>
</html>

运行结果如下：

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

三、百分比布局

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

1、百分比布局的优势

（1）响应式设计

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

（2）灵活性

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

（3）易于维护

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

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

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>博客网页</title><style>nav ul{height:30px;  /*给父盒设置高度，避免高度塌陷影响其他兄弟盒*/background-color: aquamarine;}nav ul li{margin-right: 20px;float:left;}section{width: 100%;}article{width: 70%;height: 800px;background-color:#e6b5b1;float: left;text-align: left;font-size: larger;}aside{width: 30%;height: 800px;background-color: #a3c6d8;float:right;text-align: left;font-size: 25px;}footer{width: 100%;height: 100px;background-color:#ffec8e;text-align: center;font-size: large;}</style></head>
<body><header><h1>欢迎观看我的博客</h1></header><nav><ul><a href="#">首页</a></li><a href="#">上一篇</a></li><a href="#">下一篇</a></li></ul></nav><section><article><h3>下面讲述HTNL5中的主要文档结构元素</h3><h4>意义</h4><p>header元素<br>nav元素<br>section元素</p><p>想了解更多博客：<a href="https://blog.csdn.net/2302_81659011?type=blog">点击这里</a></p></article><aside><h3>侧边栏</h3><p>侧边栏内容，如快速连接、广告等。</p></aside></section><div style="clear: both;"></div><footer>版权所有 &copy; 2024 Komorebi⁼</footer>
</body>
</html>

一、实现两列布局

1. 原理

2. 示例代码

二、 实现三列布局

1. 原理

2. 示例代码

三、百分比布局

1、百分比布局的优势

（1） 响应式设计

（2） 灵活性

（3）易于维护

相关文章：

二、实现三列布局

（1）响应式设计

（2）灵活性