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代码以下：工具