百度前端学院--小薇学院--任务03

     第一篇前端技术博客，哈哈，紧张。废话少说，开始记录吧。

     这次的小任务是将给定的页面图，自己实现出来，页面图是这个样子的：

即三栏式布局，下面分条记录自己遇到的困难与解决的办法：

困难一：如何将团队logo与团队名称并排显示，并且使得团队名称在相应的位置上？

          解决：将团队logo左浮动，这样就会使得它脱离文档流，这时的团队名称已经与它重叠，我们只需要设置将团队名称设置为absolute，再调整其外边距即可。

困难二：中间的自适应宽度如何让它自适应，并且如何让他撑开最外层的div？

          解决：只需将其宽度设置为相对于它的父元素的百分比形式，即可实现自适应，至于撑开最外层的div，这里我采用的应该算是作弊的方式，调整外层div和它本身的height属性，这样就能使其看起来              与设计图类似

困难三：右边的个人logo图如何实现？

          解决：一开始我会尝试着设置外层白色的div，设置其margin属性，结果不如人意，最后发现，将下面的三个logo图的margin-top属性设置一下即可。

最后效果：

 

收获：position中的static不接受top、bottom等位置属性；relative其实与static类似，但它能够接受这些属性；

         绝对定位的参考点是其祖先元素设置了“relative”或者“absolute”；

         绝对定位元素需要至少一个父级元素设置了相对定位或者绝对定位，否则它会相对于页面的主体进行定位；

         给元素设置“z-index”属性，首先要在这个元素上设置了“position”属性值为“relatvie”、“absolute”或者“fixed”之一。同样的，你要使用盒子位移属性，你也要先确认元素设置了“positions”属性为其三者之一；

 

总结：很简单的设计图，但花的时间不少，感觉前端很多东西学了很容易遗忘，得不断实践才行，第一篇技术博客就这样吧，加油0.0！！