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;
}

结果:

页脚

亲自试一试

响应式网站布局

通过使用上面的这些 CSS 代码,我们创建了一个自适应的网站布局,会根据屏幕宽度切换两列与全宽列:

亲自试一试