CSS 网站布局

网站布局

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

内容

主目录

内容

有很多不同的布局设计可供选择。但是，以上结构是最常见的结构之一，我们将在本教程中对其进行仔细研究。

页眉

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

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS 网站布局</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
}
/* Style the header */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}
</style>
</head>
<body>
<div class="header">
  <h1>页眉</h1>
</div>
</body>
</html>

运行一下

导航栏

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

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS 网站布局</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
/* 标题样式 */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}
/* 顶部导航条样式 */
.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;
}
</style>
</head>
<body>
<div class="header">
  <h1>页眉</h1>
</div>
<div class="topnav">
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#">链接</a>
</div>
</body>
</html>

运行一下

链接链接链接

内容

使用哪种布局通常取决于您的目标用户。最常见的布局是以下布局之一（或将它们组合在一起）：

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

结果如下：

列

这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。

列

这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。

列

这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
/* 标题样式 */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}
/* 导航条样式 */
.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;
}
/* 创建平行的3个列 */
.column {
  float: left;
  width: 33.33%;
  padding: 15px;
}
/* 在列的后面清除列的浮动效果 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* 响应式布局-使三列堆叠在一起，而不是相邻 */
@media screen and (max-width:600px) {
  .column {
    width: 100%;
  }
}
</style>
</head>
<body>
<div class="header">
  <h1>标题</h1>
  <p>调整浏览器窗口的大小以查看响应效果。</p>
</div>
<div class="topnav">
  <a href="#">链接 1</a>
  <a href="#">链接 2</a>
  <a href="#">链接 3</a>
</div>
<div class="row">
  <div class="column">
    <h2>列 1</h2>
    <p>这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。</p>
  </div>
  <div class="column">
    <h2>列 2</h2>
    <p>这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。</p>
  </div>
  <div class="column">
    <h2>列 3</h2>
    <p>这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。</p>
  </div>
</div>
</body>
</html>

运行一下

提示：要创建两列布局，请将宽度更改为50%。要创建4列布局，请使用25%等。

提示：你想知道@media规则是如何工作的吗？阅读更多关于它在我们的CSS媒体查询一章。

提示：创建列布局的一种更现代的方法是使用 CSS Flexbox。但是，Internet Explorer 10和早期版本不支持此功能。如果您需要IE6-10支持，请使用float（如上所示）。

要了解更多关于 flexiblebox 布局模块的信息，请访问本站的 CSS Flexbox 章节。

不相等的栏

主要内容（main content）是您网站上最大、最重要的部分。

列宽不相等的情况很常见，因为大部分空间都为主内容保留。附属内容（如果有）通常用作替代导航或指定与主要内容有关的信息。您可以随意更改宽度，只要记住它的总和应为 100％：

<!DOCTYPE html>
<html>
<head>
<title>CSS 网站布局</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}
.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;
}
.column {
  float: left;
  padding: 10px;
}
.column.side {
  width: 25%;
}
.column.middle {
  width: 50%;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}
</style>
</head>
<body>
<div class="header">
  <h1>标题</h1>
  <p>调整浏览器窗口的大小以查看响应效果。</p>
</div>
<div class="topnav">
  <a href="#">链接 1</a>
  <a href="#">链接 2</a>
  <a href="#">链接 3</a>
</div>
<div class="row">
  <div class="column side">
    <h2>边栏</h2>
    <p>这里是边栏的内容。这里是边栏的内容。这里是边栏的内容。这里是边栏的内容。这里是边栏的内容。这里是边栏的内容。</p>
  </div>
  <div class="column middle">
    <h2>主要内容</h2>
    <p>这里是正文的内容。这里是正文的内容。这里是正文的内容。这里是正文的内容。这里是正文的内容。这里是正文的内容。这里是正文的内容。这里是正文的内容。</p>
    <p>这里是正文的内容。这里是正文的内容。这里是正文的内容。这里是正文的内容。这里是正文的内容。这里是正文的内容。这里是正文的内容。</p>
  </div>
  <div class="column side">
    <h2>边栏</h2>
    <p>这里是边栏的内容。这里是边栏的内容。这里是边栏的内容。这里是边栏的内容。这里是边栏的内容。这里是边栏的内容。</p>
  </div>
</div>
</body>
</html>

运行一下

结果如下：

边栏

这里是一些边栏的内容。这里是一些边栏的内容。这里是一些边栏的内容。

主要内容

这里是正文内容。这里是正文内容。这里是正文内容。这里是正文内容。这里是正文内容。这里是正文内容。这里是正文内容。这里是正文内容。这里是正文内容。

边栏

这里是一些边栏的内容。这里是一些边栏的内容。这里是一些边栏的内容。

页脚

页脚位于页面底部。它通常包含诸如版权和联系方式之类的信息：

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

结果：

页脚

CSS 网站布局

网站布局

页眉

导航栏

内容

列

列

列

不相等的栏

边栏

主要内容

边栏

页脚

分类导航