CSS 网站布局
网站布局
网站通常分为页眉、菜单、内容和页脚：
有很多不同的布局设计可供选择。但是，以上结构是最常见的结构之一，我们将在本教程中对其进行仔细研究。
页眉
页眉（header）通常位于网站顶部（或顶部导航菜单的正下方）。它通常包含徽标（logo）或网站名称：
实例
.header { background-color: #F1F1F1; text-align: center; padding: 20px;}结果：
导航栏
导航栏包含链接列表，以帮助访问者浏览您的网站：
实例
/* navbar 容器 */.topnav { overflow: hidden; background-color: #333;}/* Navbar 链接 */.topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none;}/* 链接 - 悬停时改变颜色 */.topnav a:hover { background-color: #ddd; color: black;}结果：
内容
使用哪种布局通常取决于您的目标用户。最常见的布局是以下布局之一（或将它们组合在一起）：
- 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 教程。
不相等的栏
主要内容（main content）是您网站上最大、最重要的部分。
列宽不相等的情况很常见，因为大部分空间都为主内容保留。附属内容（如果有）通常用作替代导航或指定与主要内容有关的信息。您可以随意更改宽度，只要记住它的总和应为 100％：
实例
.column { float: left;}/* 左和右列 */.column.side { width: 25%;}/* Middle column */.column.middle { width: 50%;}/* 响应式布局 - 使三列堆叠，而不是并排 */@media screen and (max-width: 600px) { .column.side, .column.middle { width: 100%; }}结果：
完整的网站技术参考手册
我们的参考手册涵盖了网站技术的方方面面。
其中包括W3C标准技术：HTML、CSS、XML 。以及其他技术，诸如 JavaScript、PHP、SQL 等。
在线实例测试工具
在 W3School，我们提供上千个实例。
通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。
快捷易懂的学习方式
一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。
在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。
页脚
页脚位于页面底部。它通常包含诸如版权和联系方式之类的信息：
实例
.footer { background-color: #F1F1F1; text-align: center; padding: 10px;}结果：