CSS 网站布局

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 代码,我们创建了一个自适应的网站布局,会根据屏幕宽度切换两列与全宽列:

亲自试一试