AitSchool

页面布局

给小猪快递的公共头尾及内容进行布局。希望展示的效果是，头部和底部都紧贴屏幕上下两端，中间内容随着高度自适应撑开，如果内容过多时候，将会自动的把底部挤压下去。内容不足以挤压底部的时候，底部将紧贴屏幕底部。

app.css

  1. 设置 html，body 元素高度为至少 100%，如果不设置的话，html 和 body的高度将随内容的增大而增大。
html{
    height: 100%;
}

body{
    min-height: 100%;
}
  1. 设置公共部分 Flex 布局。以 body 为容器，page-header、page-body、page-footer 为子容器垂直向下布局。
html{
    height: 100%;
}

body{
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
  1. 设置 page-body 为自动占用所有多余的空间部分。
html{
    height: 100%;
}

body{
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.page-body{
    flex: 1;
}
  1. 设置公共头部内边距，让内容不要太贴近边边。同时设置阴影以和下部分内容相区分。
.page-header{
    padding: 5px 10px;
    box-shadow: 2px 2px 2px #ccc;
}
  1. 设置用户信息为行内块级元素，因为div为块级元素会充满整行。设置头像大小为 40 * 40 同时与昵称居中对齐。
.user-info{
    display: inline-block;
}

.user-info .user-avatar{
    width: 40px;
    height: 40px;
    vertical-align: middle;
    border-radius: 50%;
}

.user-info .user-nickName{
    vertical-align: middle;
}
  1. 让导航内容浮动到右侧，并设置行高与左侧个人信息高度相等，这样视觉效果看起来就居中了。
.page-nav{
    float: right;
    font-size: 16px;
    line-height: 40px;
}
  1. 设置公共内容宽度为 750 局中，并设置一些内边距。
.container{
    max-width: 750px;
    margin: 0 auto;
    padding: 30px;
}
  1. 返回body选择器设置公共字体类型和颜色
body{
    min-height: 100%;
    display: flex;
    flex-direction: column;
    font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif;
    color: #333;
}
  1. 设置脚步文字样式，大小、颜色、对齐方式。
.page-footer{
    font-size: 12px;
    line-height: 40px;
    text-align: center;
    color: #999;
    letter-spacing: .5px;
}

← 表单样式 →