CSS 网站布局

网站布局

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

css_website_layout.htm

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

页眉

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

实例

  1. .header {
  2.   background-color: #F1F1F1;
  3.   text-align: center;
  4.   padding: 20px;
  5. }

结果：

css_website_layout_header.htm

导航栏

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

实例

  1. /* navbar 容器 */
  2. .topnav {
  3.   overflow: hidden;
  4.   background-color: #333;
  5. }
  7. /* Navbar 链接 */
  8. .topnav a {
  9.   float: left;
  10.   display: block;
  11.   color: #f2f2f2;
  12.   text-align: center;
  13.   padding: 14px 16px;
  14.   text-decoration: none;
  15. }
  17. /* 链接 - 悬停时改变颜色 */
  18. .topnav a:hover {
  19.   background-color: #ddd;
  20.   color: black;
  21. }

结果：

css_website_layout_navbar.htm

内容

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

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

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

实例

  1. /* 创建三个相等的列，它们彼此相邻浮动 */
  2. .column {
  3.   float: left;
  4.   width: 33.33%;
  5. }
  7. /* 在列后清除浮动 */
  8. .row:after {
  9.   content: "";
  10.   display: table;
  11.   clear: both;
  12. }
  14. /* 响应式布局 - 使三列堆叠，而不是在较小的屏幕（宽度为 600 像素或更小）上并排 */
  15. @media screen and (max-width: 600px) {
  16.   .column {
  17.     width: 100%;
  18.   }
  19. }

结果：

css_website_layout_grid_1.htm

提示：如需创建 2 列布局，请将宽度更改为 50％。如需创建 4 列布局，请使用 25％。

提示：您是否想知道 @media 规则如何工作？请在我们的 CSS 媒体查询 这一章中学习更多相关知识。

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

如需了解有关 Flexible Box 布局模块的更多信息，请阅读我们的 CSS Flexbox 教程。

不相等的栏

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

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

实例

  1. .column {
  2.   float: left;
  3. }
  5. /* 左和右列 */
  6. .column.side {
  7.   width: 25%;
  8. }
  10. /* Middle column */
  11. .column.middle {
  12.   width: 50%;
  13. }
  15. /* 响应式布局 - 使三列堆叠，而不是并排 */
  16. @media screen and (max-width: 600px) {
  17.   .column.side, .column.middle {
  18.     width: 100%;
  19.   }
  20. }

结果：

css_website_layout_grid_2.htm

页脚

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

实例

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

结果：

css_website_layout_footer.htm

响应式网站布局

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

css_website_layout_blog.htm