进入正题吧。 布局是网页设计基础中的基础，好的布局一目了然。 失败的布局会让合作者烦躁。 所以前端开发从布局开始。
首先，分析图像布局，分析各颜色块之间的嵌套关系
如图所示，红色框包含整个页面的内容容器，其中包含三大部分(绿色框):header、main和footer
header部分包含徽标部分
main在一边有sider部分
根据以上划分，发现该页面的大致布局和该页面由container、header、main、footer、徽标、sider六个要素构成。 接下来是html代码实现或——
这里使用的是div要素标签。
div定义文档中的分区或分区(division/section )。
div标签可以将文档拆分为独立的不同部分。 它可以用作严格的组织工具，并且可以在不使用格式的情况下进行关联。
html代码如下：
代码如下。
1 .其中，使用margin属性调整徽标位置，使容器水平居中
边距清除周围的“边框”元素区域。 margin没有背景色，完全透明。
边距可以分别更改元素的上、下、左、右间距，也可以一次更改所有属性。
例如，margin:auto
p
{
margin:2cm 4cm 3cm 4cm；
}
2 .绝对定位和相对定位
您打算使用margin将徽标与header的垂直中心或header的上边界保持一定距离。 我用的第一个magrin-top :30px不像预想的那样。 使用谷歌开发人员工具，此时的margin-top :30px看到了从徽标到页面顶部的距离为30px。
解决方法：使用绝对定位。
相对位置：该要素相对于自己原来的位置，偏移一定的距离。 相对的是自己。
绝对位置：此元素相对于父元素偏移了一定的距离。 对于父元素，此父元素也必须设置position属性。 从最近的父元素中查找，直到找到body的位置。
我的想法正好标志要素相对于他的父要素header有偏差，所以使用绝对定位成功解决了。
以上主要是完成任务过程的一个记录和总结，文章比较浅显，希望随着今后深入的学习不断进步，有错误请指正。