前端项目1总结
1.关于字体
设置了字体为10px但却没有效果
因为浏览器默认展示的最小字体为12px,当设置的字体小于12px时,浏览器将按照12px的字体来展示。如果想要让字体变得更小一点,可以通过transform:scale()进行缩放来达到效果。但是要注意,如果文字是放在div标签中的,使用缩放功能div盒子也是会一起缩放的。如果div盒子有边框或者样式展示。可以在里面内嵌一个span或者其他标签,来专门控制文字的缩放。
2.设置背景图模糊
假设<div class="bg"></div>使用了背景图。如果直接.bg{filter:blur(5px)}可以达到背景图模糊的效果,但是会发现主页面也变得模糊,也就是说这种方法模糊的不仅是背景图,还有页面展示内容。如果只想要背景图模糊页面正常展示的话,可以借鉴下面的方法
.bg::before { content: ""; position: absolute; width: 100%; height: 44vw; background: url("../images/22.png") right top / calc(100% - 110px) no-repeat; filter: blur(20px); z-index: -1; }
3.侧边栏点击不刷新展示右边内容
可以通过vue,ajax和iframe来实现,本次项目采用iframe方法实现。