下面进入正题：布局是网页设计的基础中的基础，一个好的布局可以让人一目了然，一个失败的布局会让协同人员抓狂。所以前端开发，从布局开始。
首先分析一下图片的布局 ，分析各个色块之间的嵌套关系
如图所示：红色的框包含的是整个页面的内容container，其中包含header、main 、footer 这三大部分(绿框)
header部分里包含logo部分
main在侧边有sider部分
根据以上的划分，我们已经知道这个页面的大概布局以及这个页面由 container、header 、main、footer、logo、sider六个元素构成。接下来就是html代码实现啦——
在这里我用的是div元素标签。
div可定义文档中的分区或节(division/section)。
div 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
html代码如下：
代码如下：
1.其中用到了margin这一属性调整logo的位置并使container水平居中
margin 清除周围的(外边框)元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
例如：margin：auto
p
{
margin:2cm 4cm 3cm 4cm;
}
2.绝对定位和相对定位
在使用margin想让 logo在 header 垂直居中或者和header的上边界有一定距离，我一开始使用的magrin-top ：30px 但是并没有达到预想的样子，使用谷歌开发者工具，看到了此时的margin-top ：30px指的是logo到整个页面顶端的距离为30px，而不是我想要的到header顶端的距离。
解决方法：使用绝对定位。
相对定位：该元素相对于自己原有位置，偏移一定距离。相对的是自己。
绝对定位：该元素相对于其父元素，偏移一定距离。相对的是父元素，重点是这个父元素也需要是设置了position属性。从最近的父元素开始找，直到找到body位置为止。
而我的想法正好是logo元素相对于他的父元素header发生了偏移 ，所以使用绝对定位成功解决。
以上主要是对完成任务过程的一个记录以及总结，文章比较浅显，希望随着以后的深入学习不断进步，如有错误尽请指正。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
HTML5