CSS 网站布局
网站布局
一个网站通常被划分为头部、菜单、内容和页脚
有大量不同的布局设计可供选择。然而，上面的结构是最常见的之一，我们将在本教程中仔细研究它。
Header
头部通常位于网站的顶部（或在顶部导航菜单的正下方）。它通常包含一个徽标或网站名称。
导航栏
导航栏包含一个链接列表，以帮助访问者浏览您的网站。
示例
/* 导航栏容器 */
.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;
}
结果
内容
本节中的布局通常取决于目标用户。最常见的布局是以下一种（或组合）
- 1 列（通常用于移动浏览器）
- 2 列（通常用于平板电脑和笔记本电脑）
- 3 列布局（仅用于桌面）
1 列
2 列
3 列
我们将创建一个 3 列布局，并在较小的屏幕上将其更改为 1 列布局。
示例
/* 创建三个相等宽度的列，使它们浮动并排 */
.column {
float: left;
width: 33.33%;
}
/* 清除列后的浮动 */
.row:after {
content: "";
display: table;
clear: both;
}
/* 响应式布局 - 使三列在较小的屏幕（600px 宽或更窄）上堆叠而不是并排显示 */
@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.
提示：要创建 2 列布局，请将宽度更改为 50%。要创建 4 列布局，请使用 25% 等。
提示：您是否想知道 @media 规则是如何工作的？ 在我们的 CSS 媒体查询章节中了解更多信息。
提示：创建列布局的更现代方法是使用 CSS Flexbox。但是，它不支持 Internet Explorer 10 及更早版本。如果您需要 IE6-10 支持，请使用浮动（如上所示）。
要了解有关 Flexbox 布局模块的更多信息，请阅读我们的 CSS Flexbox 章节。
不等宽的列
主内容是您网站中最大、最重要的部分。
不等宽的列是很常见的，这样大部分空间就留给了主内容。侧边内容（如果有）通常用作替代导航或指定与主内容相关的信息。随意更改宽度，只需记住它们总和应为 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 代码，我们创建了一个响应式网站布局，它根据屏幕宽度在两列和全宽列之间变化。
