CSS 网站布局
网站布局
网站通常分为页眉、菜单、内容和页脚:
有很多不同的布局设计可供选择。但是，以上结构是最常见的结构之一，我们将在本教程中对其进行仔细研究。
页眉
页眉（header）通常位于网站顶部（或顶部导航菜单的正下方）。它通常包含徽标（logo）或网站名称:
导航栏
导航栏包含链接列表，以帮助访问者浏览您的网站:
实例
/* 导航栏容器 */
.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;
}
Result
内容
使用哪种布局通常取决于您的目标用户。最常见的布局是以下布局之一（或将它们组合在一起）:
- 1-列布局（通常用于移动浏览器）
- 2-列布局（通常用于平板电脑和笔记本电脑）
- 3-列布局 （仅用于台式机）
1-column:
2-column:
3-column:
我们将创建 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%;
}
}
结果:
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
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 支持，请使用浮动（如上所示）。
如需了解有关 Flexible Box 布局模块的更多信息，请阅读我们的 CSS Flexbox 教程。
不相等的栏
主要内容（main content）是您网站上最大、最重要的部分。
列宽不相等的情况很常见，因为大部分空间都为主内容保留。附属内容（如果有）通常用作替代导航或指定与主要内容有关的信息。您可以随意更改宽度，只要记住它的总和应为 100％:
实例
.column {
float: left;
}
/* 左右列 */
.column.side {
width: 25%;
}
/* 中间列 */
.column.middle {
width: 50%;
}
/* 响应式布局 - 使三列堆叠在一起而不是彼此相邻 */
@media screen and (max-width: 600px) {
.column.side, .column.middle
{
width: 100%;
}
}
结果:
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Main Content
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.
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
页脚
页脚位于页面底部。它通常包含诸如版权和联系方式之类的信息:
响应式网站布局
通过使用上面的这些 CSS 代码，我们创建了一个自适应的网站布局，会根据屏幕宽度切换两列与全宽列:
