发表于： 2018-05-29 23:26:18
3 653
今天完成的事情：
改了任务十四的诸多bug，
比如，页面一的的轮播图是背景，下拉导航栏时，会覆盖轮播图。
还有一个就是页面三的居中，最后使用flex布局居中了。
页面二的动画效果是会出现滚动条。等。
写了jstask1的HTML页面。引用一个样式。
看了和打了一些js的资料。
明天计划的事情：
js的资料。主要是看
遇到的问题：
主要是轮播图的效果，看了一下，纯CSS，主要是分为自动轮播，主要是用动画效果做。还有一个是手动切换，没有轮播效果。
主要是做了动画效果，但是跟任务要求有差距、
收获：
深度思考
2.经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？
不同的浏览器的默认样式会不同，解决办法是，统一清除样式或者使用normalizing 来做默认样式。
：IE5-IE8不支持css属性opacity解决方法：这时可以另外添加ie滤镜alpha,如下：Opacity:0.8;Filter:alpha(opacity=80);
Firefox点击链接出现的虚线框：Firfox浏览器问题描述：Firefox浏览器在点击链接时，会自动在元素周围添加一个虚线边框。解决方法：我们为了和其他浏览器保持一致，需要去掉虚线框
3.Quirks模式是什么？它和Standards模式有什么区别？
Quirks就是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式
现代浏览器在Quirks Mode下，页面会发生哪些变化，怎么样去避免 1.在Quirks Mode下，为body设置一个margin是无效的。 2.默认情况下，IE有一个垂直滚动条，尽管当没有东西可以滚动的时候，它是非活动状态（迟钝状态），在Quirks Mode下，你可以通过设置body { overflow: auto;}删除它（当不需要它的时候），但是在标准模式下，你仍然需要增加html { overflow: auto;}。 3.默认的浮动图片的水平margin是3像素（而不是0）。 4.在CSS中，使用margin: 0 auto使一个块居中是无效的。； 5.字体属性不会从body或其他封闭元素继承到table中。特别是font-size。字体，颜色，行高也都有可能。
Standards模式，就是我们平常写代码使用的标准模式，
“!DOCTYPE html”
浏览器会安装标准模式来解析。
渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
渐进增强是指，写的样式向上兼容，优雅降级是指写的样式向下兼容。
采用哪种模式主要取决你的用户，要是大部分是年轻的，优雅降级，用户多，年龄比较大，渐进增强。
返回列表
评论