只用html5与CSS做一个简单的页面,HTML+CSS基础训练之做一个简单页面的布局

下面进入正题：布局是网页设计的基础中的基础，一个好的布局可以让人一目了然，一个失败的布局会让协同人员抓狂。所以前端开发，从布局开始。

首先分析一下图片的布局 ，分析各个色块之间的嵌套关系

如图所示：红色的框包含的是整个页面的内容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发生了偏移 ，所以使用绝对定位成功解决。

以上主要是对完成任务过程的一个记录以及总结，文章比较浅显，希望随着以后的深入学习不断进步，如有错误尽请指正。