CSS 网站布局

网站布局

网站通常分为标题，菜单，内容和页脚：

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

页眉（header）

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

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

尝试一下

导航栏

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

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

尝试一下

内容

本节中的布局通常取决于目标用户。最常见的布局是以下一个（或组合它们）：

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

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

/* 创建三个相互浮动的相等列 */
                        .column {
                          float: left;
                          width: 33.33%;
                        }

                        /* 清除列后的浮动 */
                        .row:after {
                          content: "";
                          display: table;
                          clear: both;
                        }

                        /* 响应式布局——让三列堆叠在一起，而不是在较小的屏幕上相邻(600px宽或更小) */
                        @media screen and (max-width: 600px) {
                          .column {
                            width: 100%;
                          }
                        }

尝试一下

提示：要创建2列布局，请将宽度更改为50％。要创建4列布局，请使用25％等。
提示：您是否想知道@media规则是如何工作的？在我们的CSS媒体查询章节中阅读更多相关信息。
提示：创建列布局的一种更现代的方法是使用CSS Flexbox。但是，Internet Explorer 10和早期版本不支持它。如果您需要IE6-10支持，请使用float（如上所示）。

不相等的列

主要内容是您网站中最重要和最重要的部分。通常具有不相等的列宽，因此大部分空间是为主要内容保留的。副内容（如果有的话）通常用作替代导航或指定与主要内容相关的信息。根据需要更改宽度，只记住它总共应加起来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%;
                          }
                        }

尝试一下

页脚

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

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

尝试一下

响应式网站布局

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

* {
                          box-sizing: border-box;
                        }

                        body {
                          font-family: Arial;
                          padding: 10px;
                          background: #f1f1f1;
                        }

尝试一下

网站布局

页眉（header）

导航栏

内容

不相等的列

页脚

响应式网站布局

相关页面