CSDN自定义模块全攻略，DIY系统原有样式打造专属个性化主页
💯前言
- 本文是对2024.6.21发布的csdn自定义模块文章进行优化。
实现效果所需的前端知识1.CSS选择器 2.CSS定位(绝对定位) 3.CSS三大特性(特殊性) 4.Chrom调试技巧(提高效率)
- 自定义模块生效前提：必须是
VIP、博客专家、企业博客才可在个人详情页显示。 本文使用的系统皮肤是Age of Ai,如果使用代码块出现效果不一样,有可能是系统皮肤使用不一样导致。
💯自定义模块介绍
- 栏目内容支持HTML格式，不支持JS，最多添加1个自定义栏目，VIP、博客专家、企业博客才可在个人详情页显示。
自定义模块入口
- 首先从右上角个人头像找到内容管理进入。
2. 从左侧栏下滑找到自定义模块
自定义模块使用前置条件
- 必须是VIP、博客专家、企业博客才可在个人详情页显示
自定义模块使用限制
- 只能使用基本的HTML格式，包括css样式，不能设置js，此外栏目内容长度也有限制。
实现效果原理
- 首先我们按F12打开调试工具到自定义模块的位置，可以看到自定义模块的内容实际是在一个
<div>盒子。我们可以在<div>中放入一些新的HTML标签写我们想要的样式，以及一个<style>标签存放我们所要用到的CSS样式。
- 但是最奇妙的点在于，这个通过自定义模块中插入csdn主页的
<div>标签是在CSDN个人主页<body>标签中！！这就意味着我们或许可以在这个<div>盒子中设置的<style>标签中的同样可以影响到整个CSDN主页的CSS样式！ 那我们来试试看！
- 找到系统自己设置的class类
- 在自定义模块中写入
<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主题区域颜色
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2024-10-16，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
