1、任务介绍
如图所示：一个比较基础的居中布局。Body指的是窗口，contianer（红色线框）是真正页面的内容，让container保持在页面的居中的位置，能够伪装在大屏幕和小屏幕保持一致，是目前页面布局的一种方法，目前还有使用这种布局方式有，腾讯网，新浪首页等。
前端
2、分析布局
首先分析一下图片的布局 ，分析各个色块之间的嵌套关系
如图所示：红色的框包含的是整个页面的内容container，其中包含header、main 、footer 这三大部分（绿框）
header部分里包含logo部分
main在侧边有sider部分web
3、HTML代码实现
根据以上的划分，咱们已经知道这个页面的大概布局以及这个页面由 container、header 、main、footer、logo、sider六个元素构成。接下来就是html代码实现啦——
在这里我用的是div元素标签。ide
div可定义文档中的分区或节（division/section）。
div 标签能够把文档分割为独立的、不一样的部分。它能够用做严格的组织工具，而且不使用任何格式与其关联。svg
html代码以下：工具
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery