CSDN自定义模块全攻略，DIY系统原有样式打造专属个性化主页

💯前言

• 本文是对2024.6.21发布的csdn自定义模块文章进行优化。

实现效果所需的前端知识 1.CSS选择器 2.CSS定位(绝对定位) 3.CSS三大特性(特殊性) 4.Chrom调试技巧(提高效率)

• 自定义模块生效前提：必须是VIP、博客专家、企业博客才可在个人详情页显示。 本文使用的系统皮肤是Age of Ai,如果使用代码块出现效果不一样,有可能是系统皮肤使用不一样导致。

💯自定义模块介绍

• 栏目内容支持HTML格式，不支持JS，最多添加1个自定义栏目，VIP、博客专家、企业博客才可在个人详情页显示。

自定义模块入口

1. 首先从右上角个人头像找到内容管理进入。

2. 从左侧栏下滑找到自定义模块

自定义模块使用前置条件

• 必须是VIP、博客专家、企业博客才可在个人详情页显示

自定义模块使用限制

• 只能使用基本的HTML格式，包括css样式，不能设置js，此外栏目内容长度也有限制。

实现效果原理

• 首先我们按F12打开调试工具到自定义模块的位置，可以看到自定义模块的内容实际是在一个<div>盒子。我们可以在<div>中放入一些新的HTML标签写我们想要的样式，以及一个<style>标签存放我们所要用到的CSS样式。

• 但是最奇妙的点在于，这个通过自定义模块中插入csdn主页的<div>标签是在CSDN个人主页<body>标签中！！这就意味着我们或许可以在这个<div>盒子中设置的<style>标签中的同样可以影响到整个CSDN主页的CSS样式！ 那我们来试试看！

1. 找到系统自己设置的class类

1. 在自定义模块中写入<style>标签并写和系统相同的类名，进行修改

• 虽然没有生效 但是我们发现在我们自定义模块中写入的<style>标签中的CSS属性确实在系统主页中出现了，只是因为选择器权重的问题被系统原有的样式覆盖了！等等，选择器权重？你肯定也想到了！

• 没错！！！只需再加一步我们的样式就可以在CSDN主页中显示！！(这是CSS3 三大特性中特殊性的内容）就是!important这个属性，可以让选择器的权重无限大，从而强制生效其中的CSS样式！那么，我们需要在设置样式的末尾加上!important就可以让他强制生效！

• 那我们来试试看！在自定义模块中样式末尾加入!important

• 真的生效了！！，字体变成我们所设置的红色！我们设置的样式成功通过!important覆盖了csdn原先设置的样式！

• 那么好玩的来了，我们只要可以知道CSDN中主页样式的选择器名，我们就可以通过自定义模块中设置<style>标签中定义与其同名的选择器，将CSDN同类名中原有样式进行覆盖，遇到权重低而不能生效的问题我们就可以通过!important 使其强制覆盖CSDN原有类中的样式。 那么就意味着理论上我们可以通过自定义来修改CSDN主页中存在任何样式！！DIV一个专属于自己的独特的CSDN个人主页（‐＾▽＾‐)>。

💯DIV系统自带CSS样式

• 接下来我将给出这两天根据控制台找到的csdn自带的css样式的选择器名，你可以根据我给的选择器加上!important使其强制生效去自定义其属性。没有提到的也可以按照类似方法去找到想修改的部分！

如何DIY主页背景

• 首先我们打开F12调试找到了主页背景图所在的位置，选择器名为#userSkin.skin-ai

这时候我们可以在自定义中设置

注意：选图尽量选择宽图。

url中可以填入自己所需要设置的背景图片

• 我们发现头部区域仍有图片，已经要如何将中心区域换成透明和自己喜欢的颜色呢？
• 首先我们打开F12调试找到了主页头部背景图所在的位置，选择器名为#userSkin.skin-ai .user-profile-headi

这时候我们可以在自定义中设置

• 当然你也可以设置background-image: url(“图片地址”); 在url中填入自己需要设置成头部背景的图片

• 可以看到我们的头部区域已经清除啦！

如何DIY主题区域颜色