发表于: 2018-08-31 21:57:50

1 627


今天完成的事情:1.今天修改了昨天写完页面的一些细节问题:

1)自我介绍的部分用了两个span标签,右边内容太多,将左边挤成这样:

百度后找到解决方法,给span标签加

white-space: nowrap;

规定段落中的文本不进行换行

2)底下的button区域之前给设置的position:fixed;bottom:0,让其位于底部,调试后发现,由于设定了固定定位,导致button脱离标准流,位于标准流之上,解决方法:给中间内容部分添加属性:

 min-height: calc(100vh - (header的高度+footer的高度));

vh Viewport高度, 1vh 等于viewport高的的1% 

2.任务列表上需要做雪碧图

贴一个快速生成雪碧图并生成对应css代码的网站 
https://www.toptal.com/developers/css/sprite-generator

3.今天只做了任务六的头部和脚部,下拉列表需要用到bootstrap,所以需要好好看下文档

明天计划的事情: 继续做未完成的任务六
遇到的问题: 精灵图不能实现图片的缩放,打算还是使用多张小图来做,先看效果
收获:新学到了俩个属性能解决到的问题:1.white-space: nowrap;可以使行内元素不换行

2.min-height: calc(100vh - (header的高度+footer的高度)),这个属性加在content上可以实现:

    1.页面分三部分,header,content,footer,header一直紧贴浏览器的头部

    2.当页面内容不到浏览器的一屏时,footer紧贴浏览器的底部,content中的内容垂直居中

    3.当页面内容超过浏览器的一屏时,content的div高度自动拉伸,footer紧贴content的底部




返回列表 返回列表
评论

    分享到