CSS 网站布局

网站布局

网站通常分为页眉、菜单、内容和页脚：

内容

主要内容

内容

有大量不同的布局设计可供选择。然而，上面的结构是最常见的结构之一，我们将在本教程中仔细研究它。

标头

标题通常位于网站的顶部（或顶部导航菜单的正下方）。它通常包含徽标或网站名称：

示例

.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
}

结果

Header

亲自试一试 »

导航栏

导航栏包含一系列链接，可帮助访问者浏览您的网站：

示例

/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}

/* Navbar links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* Links - change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}

结果

Link Link Link

亲自试一试 »

内容

此部分的布局通常取决于目标用户。最常见的布局是以下之一（或组合）：

1 列（常用于移动浏览器）
2 列（通常用于平板电脑和笔记本电脑）
3 列布局（仅用于台式机）

1 列：

2 列：

3 列：

我们将创建一个 3 列布局，并在较小的屏幕上将其更改为 1 列布局：

示例

/* Create three equal columns that float next to each other */
.column {
float: left;
width: 33.33%;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */
@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 支持，请使用浮动（如上所示）。

要了解有关灵活框布局模块的更多信息，阅读我们的 CSS Flexbox 章节。

不等柱

主要内容是网站最大且最重要的部分。

常见于不等列宽，以便为主要内容保留大部分空间。辅助内容（如果有）通常用作替代导航或指定与主要内容相关的信息。根据需要更改宽度，只需记住它的总和应为 100%：

示例

.column {
float: left;
}

/* Left and right column */
.column.side {
  width: 25%;
}

/* Middle column */
.column.middle {
  width: 50%;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@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...

亲自试一试 »

页脚

页脚位于页面底部。它通常包含版权和联系信息等信息：

示例

.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}

结果

Footer

亲自试一试 »

响应式网站布局

通过使用上面的一些 CSS 代码，我们创建了一个响应式网站布局，该布局根据屏幕宽度在两列和全宽列之间变化：

亲自试一试 »

曾经听说过91xjr 空间？在这里，您可以从头开始创建您的网站或使用模板，并免费托管它。

免费开始❯

* 无需信用卡