从这张图中我们可以看到首页大致分为如下的几个部分：
CSS初始化
确定版心的大小
可以使用PS的矩阵选框工具确定
如图所示版心的宽为1200px
导航栏的大小为1366px
可以分为四部分来做：logo、navbar、search、personal
页面结构部分：
CSS的样式部分
其中需要注意的几个点是：
结构
css样式为：
注意点：
结构
CSS样式：
需要注意的是
结构
样式
注意：
结构
样式css
注意
《css高效开发实战》百度网盘pdf最新全集下载:
链接：https://pan.baidu.com/s/18V4g27rIjqVeKKmuJtyWfQ
?pwd=xn7r 提取码：xn7r简介：想象一下，一个网页只有HTML，没有Css，那就是素颜和上妆的区别。而一个网页只有Css，没用Css 3，那就是马车和汽车的区别！汽车代表的是高效、美观，Css 3的意图也是如此。移动设备的流行导致了响应式设计的流行，而CSS 3正是实现这种设计的精髓。本书围绕的就是如何跨浏览器、跨设备进行高效率的CSS开发。
本书分为3部分：第1部分是HTML/CSS基础和CSS 3新特性演示，涵盖盒子模型、浮动布局、属性前缀、选择器、字体、边框、背景、颜色、变换、动画、弹性盒子、媒介查询和响应式设计等多个方面；第2部分介绍Bootstrap，Foundation、Pure等当前流行的Css框架及LESS.SASS等生产力工具；第3部分是实战案例，包括DIV+CSS案例、HTML 5+CsS 3案例、Bootstrap案例和Foundation案例。
项目中，移动端要自适应，由于有时候数据不够，所以导致了有的区域空白
要求：没有数据的时候能够充满屏幕，数据超出屏幕就出现滚动条
做法
1-让容器高度充满这个屏幕
在容器内容很少的情况下，要想让这个容器充满整个屏幕：
`.container{
}`
2-让容器高度充满剩余屏幕高度
要让容器充满屏幕的剩余高度，用 vh 结合 flex 布局就可以实现。
`.content{
}
.header{
}
.content{
}
.footer{
}`
