发表于: 2017-03-27 21:24:07
1 625
今天完成的事情:
1、今天就是把原来的task5.html重新做了下,真是好气啊。不过做出来的效果还行,能看。
首先把底部用position:fixed;再加上bottom:0;固定,然后修改了button按钮的边框,字体大小颜色 位置。不过我简写的代码不成功,所以分开写了。子的button高度line-height设置和父元素footer的height一样实现垂直居中。父和子都设置margin:0 auto;子还要设置text-align:center;
关于footer中三条缝间距一样大。这里我用一个大的footer左右设置margin1%,然后里面小的2个div也设置margin1%,宽47%。这样左中右三条缝就一样大了。也可以继续调整。
header和footer这个挡住了main中的内容。因为main中上部有图片,这里可以设置图片的margin-top来防止header挡住。还要就是对header设置一个z-index放在最上面。
改进在header中用h2代替了p个人主页。
div和span区别。一个会换行,一个不会。一开始我在从业,工作时间这里都用div,后来调整不好最后一个自我介绍的内容,换行出问题。然后我用table解决了这个。不过又出现新的问题。竖的那条短线的问题。
对table设置边框,td设置方法和设置div边框一样,都是用border,但这里我只是对底下的border设置,对于左右的那条短线,我特意设置了一个span来调整。直接用td的就全封起来了。
明天计划的事情:重点看看task6中要用的bootstrap,顺便切图,布局。
遇到的问题:现在就是能不能不用表格做出这个效果。尤其是换行问题,第二列的内容换行后会跑去第一列。
收获:header和footer固定,和滚动条的设置,用table设置表格可以使里面的内容换行不出问题,不会跑到第一列去
评论