发表于: 2018-11-26 23:07:37

1 810


今天完成的事情:

1.大致完成任务14.15的布局

2.修改师兄找到的bug

01.因为定高导致的布局变形

因为在页面进行自适应变形的时候整体会发生变化,当页面的高度会超出原本的高度就会导致整体压缩变形,所以改变固定高度就可以了

02.在固定hover效果页面时使用的绝对定位,但是没有对其父级设置相对定位,所以页面的覆盖面积与实际的页面宽度不一致,因为是以栅格系统的相对定位来实现的所以是以栅格的盒子大小为基准来改变大小的,只要将其父级来设置相对定位就可以了

3.字符的兼容问题,在谷歌浏览器使用5个空格字符可以达到与其他汉字的宽度一致的效果,但是用到别的浏览器就会改变布局,后来使用占据一个汉字的空格字符 就可以处理兼容问题了

谷歌:

uc:

        渐进增强(progressive enhancement):针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。(从被所有浏览器支持的基本功能开始,逐步地添加那些只有新式浏览器才支持的功能,向页面添加无害于基础浏览器的额外样式和功能。当浏览器支持时,它们会自动地呈现出来并发挥作用。

        优雅降级(graceful degradation):一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。(Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题,针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案,使之在旧式浏览器上以某种形式降级体验却不至于完全失效。)

          区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的、能够起作用的版本开始,并不断扩充,以适应未来环境的需要。

4.CSS3阴影box-shadow

  1. 1、CSS3单词:
          box-shadow

    2、语法结构

    1. div{box-shadow:5px 2px 6px #000;} 

    设置div盒子里文字阴影效果距离左5px和距离上2px开始显示阴影效果,同时阴影大小范围为6px,阴影颜色为黑色(#000)。

    文字阴影语法结构图
    文字阴影语法结构分析图


明天计划的事情:修改完14.15的bug,并提交

遇到的问题: 除掉介绍栏的定高后出现在媒体查询在第一次变换的时候出现第二排错位的情况,


收获:提交任务时多做检查,细心!细心!细心!!!对自己要求严格一点



返回列表 返回列表
评论

    分享到