[武汉|结业弟子]JS-徐恒|2017年03月30日的日报-技能树.IT修真院

发表于： 2017-03-30 20:26:39

1 602

今天完成的事情：

1、重新做了task5，分成header，main，footer三块，用PS的标尺量出header和footer的高度，转换成rem。

2、对于header的做法，就是先用position:fixed;top0；固定在顶部，然后设置下min-width320px，height是8.1rem。背景蓝，margin居中以及内容text-align居中。

对于居中了的“个人主页”因为只有一行，只要设置下height和line-height都是8.1rem就垂直居中了，完成。

对于我用a包上的img，就不能用float来定位，先设垂直高度，也“我的主页”一样，设置height和line-height为8.1rem。然后设个图片的height3.5rem。这个a的靠左对齐用的是position:absolute;然后设置top0，left3rem。这样就和PSD上的顶部一样了。

3.footer的固定和header的固定方式一样，都是用fixed。两个button的height在PSD中用标尺量出来是7rem。总的footerheight是9rem；然后对两个button设置上下左右的距离，我用的margin。字体边框圆角以及颜色对齐方式（可以通过PSD中量出来font-size多少rem，吸管color用rgb，圆角就直接放大看有几个px）。总算是做出来了，关于width:45%;我是一点点试出来的，我也不知道怎么定这个。

4.main中我分为上面一个图片的main-top和下面用列表做的main-content

可以在main-top和main-content中设置margin额top和bottom值来防止header和footer遮住main中内容。

main-top中的内容就是一个背景图，加上上面的头像和名字。先在PS中国量出height为8.1rem；然后就用background设置背景图片，然后用padding设置中间头像和名字内容的内边距用来居中。

头像白色的背景用一个height和width16rem；的正方形加上border-radius50%来设置为圆形。然后在上面加入头像当背景img，这里background-color颜色只会覆盖没有图片的区域或这透明区域。用vertical-align设置下垂直居中。

名字和年龄一行和地址一行用p来换行。然后设置字体font-size。用padding-left来设置和左边头像的距离，对于第二行的定位图片和文字，设置图片高度height和字体font-size一样大2.4rem就行居中了。

问题还是屏幕变小字就换行，然后排版。

main-content的话，也是用PS标尺量字体，还要就是间距，确定了每个li中的height，以及li中内容要多少个margin，方便设置第一列的border-right。这里margin和padding都要用到。问题就是最后一行的自我介绍，我在320px的屏幕下看就是直接换了一行，没有显示在第二列。

5.task6的话header和footer也都固定好了，background-color设置好了，顶部的两个button重叠没做出来。底部的三个对齐问题，用了flex的 justify-content: space-between; /*两端对齐，垂直居中*/align-items: center;结果出现了不明白的情况。