实现效果所需的前端知识
1.CSS选择器 2.CSS定位(绝对定位) 3.CSS三大特性(特殊性) 4.Chrom调试技巧(提高效率)
VIP
、博客专家
、企业博客
才可在个人详情页显示。
本文使用的系统皮肤是Age of Ai
,如果使用代码块出现效果不一样,有可能是系统皮肤使用不一样导致。
2. 从左侧栏下滑找到自定义模块
<div>
盒子。我们可以在<div>
中放入一些新的HTML标签写我们想要的样式,以及一个<style>
标签存放我们所要用到的CSS样式。
<div>
标签是在CSDN个人主页<body>
标签中!!这就意味着我们或许可以在这个<div>
盒子中设置的<style>
标签中的同样可以影响到整个CSDN主页的CSS样式!
那我们来试试看!<style>
标签并写和系统相同的类名,进行修改
<style>
标签中的CSS属性确实在系统主页中出现了,只是因为选择器权重的问题被系统原有的样式覆盖了!等等,选择器权重?你肯定也想到了!
!important
这个属性,可以让选择器的权重无限大,从而强制生效其中的CSS样式!那么,我们需要在设置样式的末尾加上!important
就可以让他强制生效!
!important
!important
覆盖了csdn原先设置的样式!
选择器
名,我们就可以通过自定义模块中设置<style>
标签中定义与其同名的选择器
,将CSDN同类名中原有样式进行覆盖,遇到权重低而不能生效的问题我们就可以通过!important
使其强制覆盖CSDN原有类中的样式。
那么就意味着理论上我们可以通过自定义来修改CSDN主页中存在任何样式!!DIV一个专属于自己的独特的CSDN个人主页(‐^▽^‐)>。#userSkin.skin-ai
这时候我们可以在自定义中设置
注意:
选图尽量选择宽图。
url中可以填入自己所需要设置的背景图片
#userSkin.skin-ai .user-profile-headi
这时候我们可以在自定义中设置