网页布局

网页一般被分为headers（页首）、menus（菜单导航）、content（内容部分）、footers（页脚）这几部分：

Header 页首

Header页首部分一般是在页面的最上面，这一部分里一般放置页面的标题、logo等。

.header {
    background: #eef8f8;
    text-align: center;
    padding: 40px;
}

运行一下

Nav Menu 菜单导航栏

菜单导航栏是根据站点结构和用户使用逻辑而设计的一组链接，帮助用户更快捷地到达站点的各个页面。

/* Style the top navigation bar */
.topnav {
    overflow: hidden;
    background-color: #46acb6;
}

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

/* Change color on hover */
.topnav a:hover {
    background-color: #eef8f8;
    color: black;
}

运行一下

Content内容部分

内容部分可以做成不只一栏，但常用的有三种：一栏、两栏、三栏，其中两栏和三栏用的居多。内容部分，可以做成自适应的，也可以做成固定宽度的。移动端优先使用自适应，PC端建议使用固定宽度（因具体项目需求而定）。如下，所示，演示利用float浮动元素而实现的三栏，不过这只是示例而已，并非推荐的最佳实践方式。

#left_box {
    padding: 120px 0;
    width: 25%;
    float: left;
    text-align: center;
}

#middle_box {
    padding: 120px 0;
    width: calc(50% - 12px);
    float: left;
    text-align: center;
    padding:120px 0;
    margin:0 6px;
}

#right_box {
    padding: 120px 0;
    width: 25%;
    float: left;
    text-align: center;
}

运行一下

Footer 页脚部分

所谓的页脚部分就是页面的底部，这里一般会放置一些附加信息，诸如：版权声明、联系信息、组织介绍、ICP备案号等。

.footer {
    background-color: #eef8f8;
    text-align: center;
    padding: 20px 0;
}

运行一下

最终就达到如下这种布局：