CSS 网站布局
网站布局
网站通常分为页眉、菜单、内容和页脚。
有大量的不同布局设计可供选择。然而，上面的结构是最常见的结构之一，在本教程中，我们将对此进行更深入的了解。
页眉
页眉通常位于网站的顶部（或顶部导航菜单的下方）。它通常包含一个徽标或网站名称。
导航栏
导航栏包含一系列链接，以帮助访问者浏览您的网站。
示例
/* 导航栏容器 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* 导航栏链接 */
.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;
}
结果
内容
本节中的布局通常取决于目标用户。最常见的布局是以下布局之一（或组合）：
- 单列（常用于移动浏览器）
- 双列（常用于平板电脑和笔记本电脑）
- 三列布局（仅用于台式电脑）
单列
双列
三列
我们将创建一个三列布局，并在较小的屏幕上将其更改为单列布局（宽度为 600 像素或更小）。
示例
/* 创建三个相等宽度的列，它们彼此浮动 */
.column {
float: left;
width: 33.33%;
}
/* 在列之后清除浮动 */
.row:after {
content: "";
display: table;
clear: both;
}
/* 响应式布局 - 在较小的屏幕上（宽度为 600 像素或更小），使三个列堆叠在一起，而不是并排显示 */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
结果
列
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
列
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
列
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
提示：要创建双列布局，将宽度更改为 50%。要创建四列布局，使用 25% 等等。
提示：您是否想知道 @media 规则是如何工作的？在我们的 CSS 媒体查询章节中了解更多信息。
提示：创建列布局的更现代方法是使用 CSS 弹性盒子。但是，它在 Internet Explorer 10 及更早版本中不受支持。如果您需要 IE6-10 支持，请使用浮动（如上所示）。
要了解有关弹性盒子布局模块的更多信息，请阅读我们的 CSS 弹性盒子章节。
不等宽列
主要内容是您网站中最大且最重要的部分。
使用不等宽列很常见，这样大部分空间就保留给了主要内容。侧边内容（如果有）通常用作备用导航或指定与主要内容相关的的信息。随意更改宽度，只需要记住总宽度应该加起来为 100%。
示例
.column {
float: left;
}
/* 左侧和右侧列 */
.column.side {
width: 25%;
}
/* 中间列 */
.column.middle {
width: 50%;
}
/* 响应式布局 - 使三个列在较小的屏幕上垂直堆叠，而不是并排显示 */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
结果
侧边栏
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
主要内容
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
侧边栏
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
页脚
页脚位于页面底部。 它通常包含版权和联系信息等信息
响应式网站布局
通过使用上面的一些 CSS 代码，我们创建了一个响应式网站布局，它根据屏幕宽度在两列和全宽列之间变化
