当前位置:首页 > 哔哩哔哩 > 正文内容

玩转QQ空间技术,我的代码美化与模块定制手记

admin2个月前 (08-06)哔哩哔哩50

最近半个月,我一直在折腾QQ空间,起因是老同学发了一个链接,点进去看到他的空间背景是动态的,音乐播放器还带频谱效果,我心想这不就是CSS和JS堆出来的吗?于是重新打开那个很久没碰的QQ空间,开始试着用以前做网页的那套东西来改造它。

玩转QQ空间技术,我的代码美化与模块定制手记

先说模块,QQ空间的默认布局是有固定网格的,但每个模块其实都能拖动,不过手动拖位置太粗,想要精确到像素,就得靠代码,在“装扮空间”里,有一个“自定义”按钮,点进去可以调整模块的宽高,但没法输入数值,这时候按F12打开浏览器开发者工具,找到那个模块的DOM元素,直接修改style里的left和top值,我记得第一次这么做的时候,把标题栏和正文区域叠在一起,整个空间看起来像拼贴画,后来发现每个模块外面包裹着一层div,class名字里带“module”,只要改那层的transform属性,连旋转都能玩。

很多人在网上找所谓的一键美化代码,其实原理很简单,就是给某个自定义模块插入HTML+CSS,QQ空间允许你在“自定义模块”里添加文本内容,那其实就是一个Iframe或者富文本区域,可以塞进去一段外部CSS,不过要注意,空间对代码有一定过滤,比如script标签经常被吃掉,但style和div这些没问题,我试过在模块里直接放一个