CSS 网站布局

内容

使用哪种布局通常取决于您的目标用户。最常见的布局是以下布局之一（或将它们组合在一起）：

1-列布局（通常用于移动浏览器）

2-列布局（通常用于平板电脑和笔记本电脑）

3-列布局 （仅用于台式机）

1-列：

2-列：

3-列：

我们将创建 3 列布局，并在较小的屏幕上将其更改为 1 列布局：

实例

/* 创建三个相等的列，它们彼此相邻浮动 */

.column {

float: left;

width: 33.33%;

}

/* 在列后清除浮动 */

.row:after {

content: "";

display: table;

clear: both;

}

/* 响应式布局 - 使三列堆叠，而不是在较小的屏幕（宽度为 600 像素或更小）上并排 */

@media screen and (max-width: 600px) {

.column {

width: 100%;

}

}

结果：

完整的网站技术参考手册

我们的参考手册涵盖了网站技术的方方面面。

其中包括W3C标准技术：HTML、CSS、XML 。以及其他技术，诸如 JavaScript、PHP、SQL 等。

在线实例测试工具

在 W3School，我们提供上千个实例。

通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。

快捷易懂的学习方式

一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。

在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。

亲自试一试

提示：如需创建 2 列布局，请将宽度更改为 50％。如需创建 4 列布局，请使用 25％。

提示：您是否想知道 @media 规则如何工作？请在我们的 CSS 媒体查询 这一章中学习更多相关知识。

提示：创建列布局的一种更现代的方法是使用 CSS Flexbox。但是，Internet Explorer 10 和更早版本不支持它。如果需要 IE6-10 支持，请使用浮动（如上所示）。

如需了解有关 Flexible Box 布局模块的更多信息，请阅读我们的 CSS Flexbox 教程。