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;
                            }
    尝试一下
  • 相关页面

    HTML教程:HTML样式