html开发中遇到的问题

我的博客主题基于yilia,但是浏览了很多人的博客,似乎用的都是这个主题,于是决定对其进行一定的个性化,没想到实现起来还是遇到了各种各样的问题…

元素属性无法定位

起初修改背景时都是参照CSDN论坛中的教程,精准定位大型css文件位置,而在进行进一步个性化时便遇到了元素css无法定位的问题。第一想法是跟着作者的命名法在文件中查找,很显然这种做法是低效的。而我们可以采用浏览器的检查功能(右键选择检查/F12),检查功能不管对于后端程序员还是前端开发都是非常友好,因其功能强大(哈哈,虽然我只在爬虫的时候才用过)。可以现在浏览器中调试好效果,再将代码复制进资源文件中。

移动端不兼容

在进行多设备调试的时候惊奇的发现,Android/IOSiPhone/IOSiPad/PC-mini/PC-max展现出的效果都不尽相同,其中只有IOSiPad/PC-mini/PC-max有完美效果。而Android表现出背景闪烁,IOSiPhone表现出背景随屏幕滚动,而我的属性:
body{
background: url('url') center 0 cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
通过搜索得知是移动端Safari不支持background-attachment: fixed;,则需要通过设置:before来达到相同效果:
body:before {
content: '';
position: fixed;
background: url('url') center 0 no-repeat cover;
}
一试便可解决问题 哦耶!

页面加载速度慢

当部署在学生机或者git(国外服务器)上时,往往会出现页面加载过慢的问题,这时候可以先去百度统计检查一下页面各个资源加载所需的时间,将加载时间过长的资源进行CDN加速,我的博客选择的是又拍云,这也是经大佬介绍的一款国内外都可以加速的服务器,并且加入又拍云联盟还可以获得每月10G的CDN加速和云存储,只需要在你网站的页脚加入又拍云的logo。在通过加速后,我页面的加载速度明显变快。