当前位置： 首页 > news >正文

如何通过自定义模块DIY出专属个性化的CSDN主页？一招教你搞定！

news 文章来源：https://blog.csdn.net/2201_75539691/article/details/139842601 2024/10/23 8:35:06

请添加图片描述


个人主页：学习前端的小z

个人专栏：HTML5和CSS3悦读

本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结，欢迎大家在评论区交流讨论！

在这里插入图片描述

文章目录

  • 💯如何通过HTML+CSS自定义模板diy出自己的个性化csdn主页？
    • 🎲1 最终效果展示
    • 🎲2 自定义模板介绍
      • 🎁2.1 自定义模块入口
      • 🎁2.2 自定义模块使用前置条件
      • 🎁2.3 自定义模块使用限制
    • 🎲3 实现效果所需的前置知识
    • 🎲4 实现效果原理
    • 🎲5 DIV系统自带CSS样式-应用CSS三大特性之特殊性
      • 🎁5.1 如何DIV主页背景
      • 🎁5.2 如何DIV主页头部背景，或者设置为透明
      • 🎁5.3 如何DIV主题区域颜色
      • 🎁5.4 如何DIY主页ID个性化样式
      • 🎁5.5 如何DIV左部栏颜色
      • 🎁5.6 如何DIV头部栏背景透明颜色
      • 🎁5.7 如何DIV个人简介样式
      • 🎁5.8 如何DIV主页文章展示字体
      • 🎁5.9 如何DIV个人信息和文章数据展示效果
      • 🎁5.10 如何DIV主页扩展信息
    • 🎲6 如何制作背景透明的免抠图标
    • 🎲7 如何DIV系统自带的认证图标
    • 🎲8 在系统原有基础上DIV新标签增加页面内容-应用CSS定位
      • 🎁8.1 如何给头像加上头像框(静态贴图)
      • 🎁8.2 如何在主页最上方加段醒目的欢迎语
    • 🎲5.10 如何DIV头部导航栏颜色？（补到第5点）
    • 🎲9 注意事项
    • 🎲10 小结

在这里插入图片描述

注意：该文章中出现的代码块都是可以复制粘贴进自定义模块直接使用的，样式是随着文章深入逐步累加的，本人亲测可以使用(●⁰౪⁰●)

💯如何通过HTML+CSS自定义模板diy出自己的个性化csdn主页？

🎲1 最终效果展示

前提：必须是VIP、博客专家、企业博客才可在个人详情页显示！！！
发这个是为了分享好玩的功能(●⁰౪⁰●)(//●⁰౪⁰●)//

在这里插入图片描述
在这里插入图片描述

🎲2 自定义模板介绍

🎁2.1 自定义模块入口

1.首先从右上角个人头像找到内容管理进入。
在这里插入图片描述>2.从左侧栏下滑找到自定义模块
在这里插入图片描述

🎁2.2 自定义模块使用前置条件

必须是VIP、博客专家、企业博客才可在个人详情页显示
在这里插入图片描述

🎁2.3 自定义模块使用限制

只能使用基本的HTML格式，包括css样式，不能设置js，此外栏目内容长度也有限制。
在这里插入图片描述

🎲3 实现效果所需的前置知识

1.CSS选择器
2.CSS定位(绝对定位)
3.CSS三大特性(特殊性)
4.Chrom调试技巧(提高效率)
可以参考之前我发过的文章:
CSS3 选择器
CSS3 复合选择器
CSS3 定位
CSS3 三大特性+Chrome 调试代码技巧

🎲4 实现效果原理

首先我们按F12打开调试工具到自定义模块的位置，可以看到自定义模块的内容实际是在一个<div>盒子。我们可以在<div>中放入一些新的HTML标签写我们想要的样式，以及一个<style>标签存放我们所要用到的CSS样式。
在这里插入图片描述
但是最奇妙的点在于，这个通过自定义模块中插入csdn主页的<div>标签是在CSDN个人主页<body>标签中！！这就意味着我们或许可以在这个<div>盒子中设置的<style>标签中的同样可以影响到整个CSDN主页的CSS样式！
那我们来试试看！
1.找到系统自己设置的class类
在这里插入图片描述

<div><style>.user-profile-statistics-num{color:red;}</style>
</div>

2.在自定义模块中写入<style>标签并写和系统相同的类名，进行修改
在这里插入图片描述

不出意外的话，肯定没有实现成功≥Ö‿Ö≤，难道真的要放弃了吗？
但是我们发现！在我们自定义模块中写入的<style>标签中的CSS属性确实在系统主页中出现了，只是因为选择器权重的问题被系统原有的样式覆盖了！等等，选择器权重？你肯定也想到了！
在这里插入图片描述

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

<div><style>.user-profile-statistics-num{color:red!important;}</style>
</div>

在这里插入图片描述

真的生效了！！，字体变成我们所设置的红色！我们设置的样式成功通过!important覆盖了csdn原先设置的样式！
在这里插入图片描述
那么好玩的来了，我们只要可以知道CSDN中主页样式的选择器名，我们就可以通过自定义模块中设置<style>标签中定义与其同名的选择器，将CSDN同类名中原有样式进行覆盖，遇到权重低而不能生效的问题我们就可以通过!important 使其强制覆盖CSDN原有类中的样式。
那么就意味着理论上我们可以通过自定义模板来修改CSDN主页中存在任何样式！！DIV一个专属于自己的独特的CSDN个人主页（‐＾▽＾‐)>。这也是CSDN设置这个模块的初衷吧！这就是程序员的浪漫吗☆*･゜ﾟ･(O)/･゜ﾟ･*☆ﾟ･✿ヾ╲(｡◕‿◕｡)╱✿･ﾟ＼（ ● ⌒ ∇ ⌒ ● ）／

🎲5 DIV系统自带CSS样式-应用CSS三大特性之特殊性

接下来我将这两天所做主页样式经验和总结分享给大家！
开始前要先掌握以下三个我们将用到的知识点：
CSS3 选择器
CSS3 复合选择器
CSS3 定位
CSS3 三大特性+Chrome 调试代码技巧
注意：由于个人定义模板有字数限制，所以我打在代码块上都是紧凑的没有格式化的代码，防止超出字数！

🎁5.1 如何DIV主页背景

首先我们打开F12调试找到了主页背景图所在的位置，选择器名为#userSkin.skin-ai
在这里插入图片描述
这时候我们可以在自定义模板中设置

<div><style>#userSkin.skin-ai{background:url(https://picweboss-app.gracg.com/2001697768_193a7c1ebf7da2261f26ef74aa348aa5oss.jpg_1200w.jpg) no-repeat;background-size: cover;background-attachment: fixed}</style></div>

在这里插入图片描述

来解释一下代码
1.background: url(“https://picweboss-app.gracg.com/2001697768_193a7c1ebf7da2261f26ef74aa348aa5oss.jpg_1200w.jpg”) no-repeat;
这个是设置背景图片,no-repeat表示背景图片不会重复，即只显示一次。
2.background-size: cover;
表示完全覆盖内容区域，但背景图像的长宽比会保持不变。
3.background-attachment: fixed
表示背景图像是固定的，不会随着页面的滚动而移动。
这里权重足够，所以不用!important
注意：选图尽量选择宽图。
在这里插入图片描述
url中可以填入自己所需要设置的背景图片

在这里插入图片描述
我们发现头部区域仍有图片，已经要如何将中心区域换成透明和自己喜欢的颜色呢？

🎁5.2 如何DIV主页头部背景，或者设置为透明

首先我们打开F12调试找到了主页头部背景图所在的位置，选择器名为##userSkin.skin-ai .user-profile-headi
在这里插入图片描述

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

<div><style>#userSkin.skin-ai{background:url(https://picweboss-app.gracg.com/2001697768_193a7c1ebf7da2261f26ef74aa348aa5oss.jpg_1200w.jpg) no-repeat;background-size: cover;background-attachment: fixed}#userSkin.skin-ai .user-profile-head{background-image:none;}</style></div>

在这里插入图片描述

来解释一下代码
background-image: none;
这里background-image设置是none，意思是不要背景图片，这里权重足够，所以不用!important
当然你也可以设置
background-image: url(“图片地址”);
在url中填入自己需要设置成头部背景的图片
在这里插入图片描述

可以看到我们的头部区域以及清除啦！
在这里插入图片描述

🎁5.3 如何DIV主题区域颜色

＼（ ● ⌒ ∇ ⌒ ● ）／

找到背景图所在选择器
#userSkin.skin-ai .user-profile-head{background-image:none;}.user-profile-aside .user-profile-aside-common-box,.blog_extension,.user-profile-aside .user-influence-list ul li,.user-profile-head .user-profile-head-info,.navList-box .navList,.navList-box .blog-second-list,.blog-list-box,.el-input__inner,.blink-list-box,.sub-people-list-box,.live-list-box,.resources-list-box,.answer-list-box,.navList-box .ask-second-list,.answer-list-box,.navList-box ,.sub-second-list

<div><style>#userSkin.skin-ai{background:url(https://picweboss-app.gracg.com/2001697768_193a7c1ebf7da2261f26ef74aa348aa5oss.jpg_1200w.jpg) no-repeat;background-size: cover;background-attachment: fixed}#userSkin.skin-ai .user-profile-head{background-image:none;}.user-profile-aside .user-profile-aside-common-box,.blog_extension,.user-profile-aside .user-influence-list ul li,.user-profile-head .user-profile-head-info,.navList-box .navList,.navList-box .blog-second-list,.blog-list-box,.el-input__inner,.blink-list-box,.sub-people-list-box,.live-list-box,.resources-list-box,.answer-list-box,.navList-box .ask-second-list,.answer-list-box,.navList-box ,.sub-second-list{background:rgba(187, 173, 217, 0.5) !important}</style></div>

在这里插入图片描述

解释代码：background设置背景颜色，这里可以选择自己喜欢的颜色，这里权重不够，!important是为了强制覆盖csdn原有的样式。
放入模板效果如下：
在这里插入图片描述

🎁5.4 如何DIY主页ID个性化样式

找到个人id所在选择器
.user-profile-head-name-vip

<div><style>#userSkin.skin-ai{background:url(https://picweboss-app.gracg.com/2001697768_193a7c1ebf7da2261f26ef74aa348aa5oss.jpg_1200w.jpg) no-repeat;background-size: cover;background-attachment: fixed}#userSkin.skin-ai .user-profile-head{background-image:none;}.user-profile-aside .user-profile-aside-common-box,.blog_extension,.user-profile-aside .user-influence-list ul li,.user-profile-head .user-profile-head-info,.navList-box .navList,.navList-box .blog-second-list,.blog-list-box,.el-input__inner,.blink-list-box,.sub-people-list-box,.live-list-box,.resources-list-box,.answer-list-box,.navList-box .ask-second-list,.answer-list-box,.navList-box ,.sub-second-list{background:rgba(187, 173, 217, 0.5) !important}.user-profile-head-name-vip[data-v-d1dbb6f8]{color:#00FFFD!important;font-family:华文行楷;font-size:1.8em}</style></div>

在这里插入图片描述

解释代码：
color是颜色；
font-family是字体；
font-size是字体大小；
这些都是可以自己变换的哦~
名字就有颜色啦
在这里插入图片描述

🎁5.5 如何DIV左部栏颜色

找到左部栏所在选择器
.navList-box .blog-second-list>ul>li .blog-time-filter .el-select .el-input .el-input__inner, .user-profile-aside .user-profile-aside-common-box
在这里插入图片描述

<div><style>#userSkin.skin-ai{background:url(https://picweboss-app.gracg.com/2001697768_193a7c1ebf7da2261f26ef74aa348aa5oss.jpg_1200w.jpg) no-repeat;background-size: cover;background-attachment: fixed}#userSkin.skin-ai .user-profile-head{background-image:none;}.user-profile-aside .user-profile-aside-common-box,.blog_extension,.user-profile-aside .user-influence-list ul li,.user-profile-head .user-profile-head-info,.navList-box .navList,.navList-box .blog-second-list,.blog-list-box,.el-input__inner,.blink-list-box,.sub-people-list-box,.live-list-box,.resources-list-box,.answer-list-box,.navList-box .ask-second-list,.answer-list-box,.navList-box ,.sub-second-list{background:rgba(187, 173, 217, 0.5) !important}.user-profile-head-name-vip[data-v-d1dbb6f8]{color:#00FFFD!important;font-family:华文行楷;font-size:1.8em}.navList-box .blog-second-list>ul>li .blog-time-filter .el-select .el-input .el-input__inner,.user-profile-aside .user-profile-aside-common-box{background: rgb(173, 255, 238, 0.5) !important}</style></div>

在这里插入图片描述
这里也是设置背景颜色，可以自己替换自己喜欢的
可以看到效果：
在这里插入图片描述

但是我们发现了不兼容的部分
在这里插入图片描述
找到对应的选择器：
#blogExtensionBox .blog_extension .navList-box .blog-second-list>ul>li .blog-time-filter .el-select .el-input .el-input__inner

更改代码：

<div><style>#userSkin.skin-ai{background:url(https://picweboss-app.gracg.com/2001697768_193a7c1ebf7da2261f26ef74aa348aa5oss.jpg_1200w.jpg) no-repeat;background-size: cover;background-attachment: fixed}#userSkin.skin-ai .user-profile-head{background-image:none;}.user-profile-aside .user-profile-aside-common-box,.blog_extension,.user-profile-aside .user-influence-list ul li,.user-profile-head .user-profile-head-info,.navList-box .navList,.navList-box .blog-second-list,.blog-list-box,.el-input__inner,.blink-list-box,.sub-people-list-box,.live-list-box,.resources-list-box,.answer-list-box,.navList-box .ask-second-list,.answer-list-box,.navList-box ,.sub-second-list{background:rgba(187, 173, 217, 0.5) !important}.user-profile-head-name-vip[data-v-d1dbb6f8]{color:#00FFFD!important;font-family:华文行楷;font-size:1.8em}.navList-box .blog-second-list>ul>li .blog-time-filter .el-select .el-input .el-input__inner,.user-profile-aside .user-profile-aside-common-box{background: rgb(173, 255, 238, 0.5) !important}#blogExtensionBox .blog_extension{background: #ffffff3b !important}.navList-box .blog-second-list>ul>li .blog-time-filter .el-select .el-input .el-input__inner{    background: #f9020200 !important}</style></div>

在这里插入图片描述

恢复正常啦

在这里插入图片描述

🎁5.6 如何DIV头部栏背景透明颜色

首先清空背景，确保设置颜色不会被影响
找到对应选择器：
#userSkin.skin-cookblue .user-profile-head
在这里插入图片描述

<div><style>#userSkin.skin-ai{background:url(https://picweboss-app.gracg.com/2001697768_193a7c1ebf7da2261f26ef74aa348aa5oss.jpg_1200w.jpg) no-repeat;background-size: cover;background-attachment: fixed}#userSkin.skin-ai .user-profile-head{background-image:none;}.user-profile-aside .user-profile-aside-common-box,.blog_extension,.user-profile-aside .user-influence-list ul li,.user-profile-head .user-profile-head-info,.navList-box .navList,.navList-box .blog-second-list,.blog-list-box,.el-input__inner,.blink-list-box,.sub-people-list-box,.live-list-box,.resources-list-box,.answer-list-box,.navList-box .ask-second-list,.answer-list-box,.navList-box ,.sub-second-list{background:rgba(187, 173, 217, 0.5) !important}.user-profile-head-name-vip[data-v-d1dbb6f8]{color:#00FFFD!important;font-family:华文行楷;font-size:1.8em}.navList-box .blog-second-list>ul>li .blog-time-filter .el-select .el-input .el-input__inner,.user-profile-aside .user-profile-aside-common-box{background: rgb(173, 255, 238, 0.5) !important}#blogExtensionBox .blog_extension{background: #ffffff3b !important}.navList-box .blog-second-list>ul>li .blog-time-filter .el-select .el-input .el-input__inner{    background: #f9020200 !important}#userSkin.skin-cookblue .user-profile-head{background:none;}</style></div>

在这里插入图片描述
将背景清空后，加入想要的背景色：

<div><style>#userSkin.skin-ai{background:url(https://picweboss-app.gracg.com/2001697768_193a7c1ebf7da2261f26ef74aa348aa5oss.jpg_1200w.jpg) no-repeat;background-size: cover;background-attachment: fixed}#userSkin.skin-ai .user-profile-head{background-image:none;}.user-profile-aside .user-profile-aside-common-box,.blog_extension,.user-profile-aside .user-influence-list ul li,.user-profile-head .user-profile-head-info,.navList-box .navList,.navList-box .blog-second-list,.blog-list-box,.el-input__inner,.blink-list-box,.sub-people-list-box,.live-list-box,.resources-list-box,.answer-list-box,.navList-box .ask-second-list,.answer-list-box,.navList-box ,.sub-second-list{background:rgba(187, 173, 217, 0.5) !important}.user-profile-head-name-vip[data-v-d1dbb6f8]{color:#00FFFD!important;font-family:华文行楷;font-size:1.8em}.navList-box .blog-second-list>ul>li .blog-time-filter .el-select .el-input .el-input__inner,.user-profile-aside .user-profile-aside-common-box{background: rgb(173, 255, 238, 0.5) !important}#blogExtensionBox .blog_extension{background: #ffffff3b !important}.navList-box .blog-second-list>ul>li .blog-time-filter .el-select .el-input .el-input__inner{    background: #f9020200 !important}#userSkin.skin-cookblue .user-profile-head{background:none;}#userSkin .user-profile-head .user-profile-head-info{ background: rgba(173, 216, 230, 0.5)!important}</style></div>

在这里插入图片描述

头部栏透明颜色设置好啦，也可以根据自己喜好更改颜色~
在这里插入图片描述

🎁5.7 如何DIV个人简介样式

找到对应的选择器:.introduction-fold[data-v-d1dbb6f8]
在这里插入图片描述

<div><style>#userSkin.skin-ai{background:url(https://picweboss-app.gracg.com/2001697768_193a7c1ebf7da2261f26ef74aa348aa5oss.jpg_1200w.jpg) no-repeat;background-size: cover;background-attachment: fixed}#userSkin.skin-ai .user-profile-head{background-image:none;}.user-profile-aside .user-profile-aside-common-box,.blog_extension,.user-profile-aside .user-influence-list ul li,.user-profile-head .user-profile-head-info,.navList-box .navList,.navList-box .blog-second-list,.blog-list-box,.el-input__inner,.blink-list-box,.sub-people-list-box,.live-list-box,.resources-list-box,.answer-list-box,.navList-box .ask-second-list,.answer-list-box,.navList-box ,.sub-second-list{background:rgba(187, 173, 217, 0.5) !important}.user-profile-head-name-vip[data-v-d1dbb6f8]{color:#00FFFD!important;font-family:华文行楷;font-size:1.8em}.navList-box .blog-second-list>ul>li .blog-time-filter .el-select .el-input .el-input__inner,.user-profile-aside .user-profile-aside-common-box{background: rgb(173, 255, 238, 0.5) !important}#blogExtensionBox .blog_extension{background: #ffffff3b !important}.navList-box .blog-second-list>ul>li .blog-time-filter .el-select .el-input .el-input__inner{    background: #f9020200 !important}#userSkin.skin-cookblue .user-profile-head{background:none;}#userSkin .user-profile-head .user-profile-head-info{ background: rgba(173, 216, 230, 0.5)!important}.introduction-fold[data-v-d1dbb6f8]{color:rgb(255, 0, 128, 1)!important;line-height: 20px!important;font-family:华文行楷;font-size:1.7em!important}</style></div>

在这里插入图片描述
uu可以根据自己的喜好更改样式~

效果如下：

在这里插入图片描述

我们发现个人简介这四个字样式没变，我们继续找对应的选择器
但是这个好像没有选择器，只是一个<span>标签，那我们在浏览器里修改一下看看!important可不可以,
什么？!important也不行，我想应该是继承的关系，不知道有没有大佬可以解释一下
在这里插入图片描述

那我们就用后代选择器试试可不可以

<div><style>#userSkin.skin-ai{background:url(https://picweboss-app.gracg.com/2001697768_193a7c1ebf7da2261f26ef74aa348aa5oss.jpg_1200w.jpg) no-repeat;background-size: cover;background-attachment: fixed}#userSkin.skin-ai .user-profile-head{background-image:none;}.user-profile-aside .user-profile-aside-common-box,.blog_extension,.user-profile-aside .user-influence-list ul li,.user-profile-head .user-profile-head-info,.navList-box .navList,.navList-box .blog-second-list,.blog-list-box,.el-input__inner,.blink-list-box,.sub-people-list-box,.live-list-box,.resources-list-box,.answer-list-box,.navList-box .ask-second-list,.answer-list-box,.navList-box ,.sub-second-list{background:rgba(187, 173, 217, 0.5) !important}.user-profile-head-name-vip[data-v-d1dbb6f8]{color:#00FFFD!important;font-family:华文行楷;font-size:1.8em}.navList-box .blog-second-list>ul>li .blog-time-filter .el-select .el-input .el-input__inner,.user-profile-aside .user-profile-aside-common-box{background: rgb(173, 255, 238, 0.5) !important}#blogExtensionBox .blog_extension{background: #ffffff3b !important}.navList-box .blog-second-list>ul>li .blog-time-filter .el-select .el-input .el-input__inner{    background: #f9020200 !important}#userSkin.skin-cookblue .user-profile-head{background:none;}#userSkin .user-profile-head .user-profile-head-info{ background: rgba(173, 216, 230, 0.5)!important}.introduction-fold[data-v-d1dbb6f8]{color:rgb(255, 0, 128, 1)!important;line-height: 20px!important;font-family:华文行楷;font-size:1.7em!important}.introduction-fold>span{font-family:FZYaoti;color:blue;font-weight: bold}</style></div>

在这里插入图片描述
成功啦o͡͡͡͡͡͡͡͡͡͡͡͡͡͡╮(^ ਊ ^)╭o͡͡͡͡͡͡͡͡͡͡͡͡͡͡
在这里插入图片描述

🎁5.8 如何DIV主页文章展示字体

找到对应选择器:
p[data-v-46274ba1],h4[data-v-6fe2b6a7], .blink-list-bottom, .user-profile-statistics-name
在这里插入图片描述

在这里插入图片描述

<div><style>#userSkin.skin-ai{background:url(https://picweboss-app.gracg.com/2001697768_193a7c1ebf7da2261f26ef74aa348aa5oss.jpg_1200w.jpg) no-repeat;background-size: cover;background-attachment: fixed}#userSkin.skin-ai .user-profile-head{background-image:none;}.user-profile-aside .user-profile-aside-common-box,.blog_extension,.user-profile-aside .user-influence-list ul li,.user-profile-head .user-profile-head-info,.navList-box .navList,.navList-box .blog-second-list,.blog-list-box,.el-input__inner,.blink-list-box,.sub-people-list-box,.live-list-box,.resources-list-box,.answer-list-box,.navList-box .ask-second-list,.answer-list-box,.navList-box ,.sub-second-list{background:rgba(187, 173, 217, 0.5) !important}.user-profile-head-name-vip[data-v-d1dbb6f8]{color:#00FFFD!important;font-family:华文行楷;font-size:1.8em}.navList-box .blog-second-list>ul>li .blog-time-filter .el-select .el-input .el-input__inner,.user-profile-aside .user-profile-aside-common-box{background: rgb(173, 255, 238, 0.5) !important}#blogExtensionBox .blog_extension{background: #ffffff3b !important}.navList-box .blog-second-list>ul>li .blog-time-filter .el-select .el-input .el-input__inner{    background: #f9020200 !important}#userSkin.skin-cookblue .user-profile-head{background:none;}#userSkin .user-profile-head .user-profile-head-info{ background: rgba(173, 216, 230, 0.5)!important}.introduction-fold[data-v-d1dbb6f8]{color:rgb(255, 0, 128, 1)!important;line-height: 20px!important;font-family:华文行楷;font-size:1.7em!important}.introduction-fold>span{font-family:FZYaoti;color:blue;font-weight: bold}p[data-v-46274ba1],h4[data-v-6fe2b6a7],.blink-list-bottom, .user-profile-statistics-name{ font-weight: bold!important; font-family:STXingkai!important;font-size:1.8em!important}</style></div>

在这里插入图片描述
成功啦在这里插入图片描述

在这里插入图片描述

🎁5.9 如何DIV个人信息和文章数据展示效果

找到个人信息的数字对应的选择器
.user-profile-statistics-num
在这里插入图片描述
找到文章数据数字对应的选择器:
.blog-list-box .view-time-box, .two-px
在这里插入图片描述

<div><style>#userSkin.skin-ai{background:url(https://picweboss-app.gracg.com/2001697768_193a7c1ebf7da2261f26ef74aa348aa5oss.jpg_1200w.jpg) no-repeat;background-size: cover;background-attachment: fixed}#userSkin.skin-ai .user-profile-head{background-image:none;}.user-profile-aside .user-profile-aside-common-box,.blog_extension,.user-profile-aside .user-influence-list ul li,.user-profile-head .user-profile-head-info,.navList-box .navList,.navList-box .blog-second-list,.blog-list-box,.el-input__inner,.blink-list-box,.sub-people-list-box,.live-list-box,.resources-list-box,.answer-list-box,.navList-box .ask-second-list,.answer-list-box,.navList-box ,.sub-second-list{background:rgba(187, 173, 217, 0.5) !important}.user-profile-head-name-vip[data-v-d1dbb6f8]{color:#00FFFD!important;font-family:华文行楷;font-size:1.8em}.navList-box .blog-second-list>ul>li .blog-time-filter .el-select .el-input .el-input__inner,.user-profile-aside .user-profile-aside-common-box{background: rgb(173, 255, 238, 0.5) !important}#blogExtensionBox .blog_extension{background: #ffffff3b !important}.navList-box .blog-second-list>ul>li .blog-time-filter .el-select .el-input .el-input__inner{    background: #f9020200 !important}#userSkin.skin-cookblue .user-profile-head{background:none;}#userSkin .user-profile-head .user-profile-head-info{ background: rgba(173, 216, 230, 0.5)!important}.introduction-fold[data-v-d1dbb6f8]{color:rgb(255, 0, 128, 1)!important;line-height: 20px!important;font-family:华文行楷;font-size:1.7em!important}.introduction-fold>span{font-family:FZYaoti;color:blue;font-weight: bold}p[data-v-46274ba1],h4[data-v-6fe2b6a7],.blink-list-bottom, .user-profile-statistics-name{ font-weight: bold!important; font-family:STXingkai!important;font-size:1.8em!important}.blog-list-box .view-time-box,.user-profile-statistics-num,.two-px{font-weight: bold;font-family:STCaiyun!important;font-size:1.2em!important}</style></div>

在这里插入图片描述
效果展示发现个人信息的字体太小了，我们调大一点
在这里插入图片描述

<div><style>#userSkin.skin-ai{background:url(https://picweboss-app.gracg.com/2001697768_193a7c1ebf7da2261f26ef74aa348aa5oss.jpg_1200w.jpg) no-repeat;background-size: cover;background-attachment: fixed}#userSkin.skin-ai .user-profile-head{background-image:none;}.user-profile-aside .user-profile-aside-common-box,.blog_extension,.user-profile-aside .user-influence-list ul li,.user-profile-head .user-profile-head-info,.navList-box .navList,.navList-box .blog-second-list,.blog-list-box,.el-input__inner,.blink-list-box,.sub-people-list-box,.live-list-box,.resources-list-box,.answer-list-box,.navList-box .ask-second-list,.answer-list-box,.navList-box ,.sub-second-list{background:rgba(187, 173, 217, 0.5) !important}.user-profile-head-name-vip[data-v-d1dbb6f8]{color:#00FFFD!important;font-family:华文行楷;font-size:1.8em}.navList-box .blog-second-list>ul>li .blog-time-filter .el-select .el-input .el-input__inner,.user-profile-aside .user-profile-aside-common-box{background: rgb(173, 255, 238, 0.5) !important}#blogExtensionBox .blog_extension{background: #ffffff3b !important}.navList-box .blog-second-list>ul>li .blog-time-filter .el-select .el-input .el-input__inner{    background: #f9020200 !important}#userSkin.skin-cookblue .user-profile-head{background:none;}#userSkin .user-profile-head .user-profile-head-info{ background: rgba(173, 216, 230, 0.5)!important}.introduction-fold[data-v-d1dbb6f8]{color:rgb(255, 0, 128, 1)!important;line-height: 20px!important;font-family:华文行楷;font-size:1.7em!important}.introduction-fold>span{font-family:FZYaoti;color:blue;font-weight: bold}p[data-v-46274ba1],h4[data-v-6fe2b6a7],.blink-list-bottom, .user-profile-statistics-name{ font-weight: bold!important; font-family:STXingkai!important;font-size:1.8em!important}.blog-list-box .view-time-box,.user-profile-statistics-num,.two-px{font-weight: bold;font-family:STCaiyun!important;font-size:1.2em!important}.user-profile-statistics-num{font-size:2em!important}</style></div>

在这里插入图片描述
可以可以，刚刚好☆ミヾ(∇≦((ヾ(≧∇≦)〃))≧∇)ノ彡☆

在这里插入图片描述

🎁5.10 如何DIV主页扩展信息

找到对应选择器
.show-more-introduction-fold,.address, .user-profile-head-name-vip,.blog-list-box .blog-list-content
在这里插入图片描述
在这里插入图片描述

<div><style>#userSkin.skin-ai{background:url(https://picweboss-app.gracg.com/2001697768_193a7c1ebf7da2261f26ef74aa348aa5oss.jpg_1200w.jpg) no-repeat;background-size: cover;background-attachment: fixed}#userSkin.skin-ai .user-profile-head{background-image:none;}.user-profile-aside .user-profile-aside-common-box,.blog_extension,.user-profile-aside .user-influence-list ul li,.user-profile-head .user-profile-head-info,.navList-box .navList,.navList-box .blog-second-list,.blog-list-box,.el-input__inner,.blink-list-box,.sub-people-list-box,.live-list-box,.resources-list-box,.answer-list-box,.navList-box .ask-second-list,.answer-list-box,.navList-box ,.sub-second-list{background:rgba(187, 173, 217, 0.5) !important}.user-profile-head-name-vip[data-v-d1dbb6f8]{color:#00FFFD!important;font-family:华文行楷;font-size:1.8em}.navList-box .blog-second-list>ul>li .blog-time-filter .el-select .el-input .el-input__inner,.user-profile-aside .user-profile-aside-common-box{background: rgb(173, 255, 238, 0.5) !important}#blogExtensionBox .blog_extension{background: #ffffff3b !important}.navList-box .blog-second-list>ul>li .blog-time-filter .el-select .el-input .el-input__inner{    background: #f9020200 !important}#userSkin.skin-cookblue .user-profile-head{background:none;}#userSkin .user-profile-head .user-profile-head-info{ background: rgba(173, 216, 230, 0.5)!important}.introduction-fold[data-v-d1dbb6f8]{color:rgb(255, 0, 128, 1)!important;line-height: 20px!important;font-family:华文行楷;font-size:1.7em!important}.introduction-fold>span{font-family:FZYaoti;color:blue;font-weight: bold}p[data-v-46274ba1],h4[data-v-6fe2b6a7],.blink-list-bottom, .user-profile-statistics-name{ font-weight: bold!important; font-family:STXingkai!important;font-size:1.8em!important}.blog-list-box .view-time-box,.user-profile-statistics-num,.two-px{font-weight: bold;font-family:STCaiyun!important;font-size:1.2em!important}.user-profile-statistics-num{font-size:2em!important}.show-more-introduction-fold,.address ,.user-profile-head-name-vip,.blog-list-box .blog-list-content{font-family:STXingkai!important;font-size:1.65em!important;color:#eeff00!important}</style></div>

在这里插入图片描述
效果展示：
在这里插入图片描述

🎲6 如何制作背景透明的免抠图标

我找的是快图网http://www.kuaipng.com/sucai/95734.html
搜索图标后有各种已经扣好的图片
但是好像只能下载一次，后面要开vip
没事，还有办法！
在这里插入图片描述
在浏览器扩展商店找到图片助手点击下载后
在这里插入图片描述
在页面找到图标点击提取本页图片
在这里插入图片描述
在这里插入图片描述
我们可以在这里下载以后截取的图片，但是这个是没有抠好的
在这里插入图片描述
我们去抠图网https://www.remove.bg/zh把图片抠出来
在这里插入图片描述
最后去生成一个图片在线链接
在线生成图片链接https://www.gptkong.com/tools/image_to_link
在这里插入图片描述
拿着这个链接就可以去做我们的图标啦

🎲7 如何DIV系统自带的认证图标

没错，系统自带的黄v也可以修改！
在这里插入图片描述
我们发现图标是内联样式，我们不能直接用li，因为主页中不止这一个li，那我们就使用后代选择器，使用一个有设置class的父级元素去绑定它的位置，这里我们选择了离i最近的<ul>，因此我们找到的选择器是.aside-common-box-achievement li
在这里插入图片描述

<div><style>#userSkin.skin-ai{background:url(https://picweboss-app.gracg.com/2001697768_193a7c1ebf7da2261f26ef74aa348aa5oss.jpg_1200w.jpg) no-repeat;background-size: cover;background-attachment: fixed}#userSkin.skin-ai .user-profile-head{background-image:none;}.user-profile-aside .user-profile-aside-common-box,.blog_extension,.user-profile-aside .user-influence-list ul li,.user-profile-head .user-profile-head-info,.navList-box .navList,.navList-box .blog-second-list,.blog-list-box,.el-input__inner,.blink-list-box,.sub-people-list-box,.live-list-box,.resources-list-box,.answer-list-box,.navList-box .ask-second-list,.answer-list-box,.navList-box ,.sub-second-list{background:rgba(187, 173, 217, 0.5) !important}.user-profile-head-name-vip[data-v-d1dbb6f8]{color:#00FFFD!important;font-family:华文行楷;font-size:1.8em}.navList-box .blog-second-list>ul>li .blog-time-filter .el-select .el-input .el-input__inner,.user-profile-aside .user-profile-aside-common-box{background: rgb(173, 255, 238, 0.5) !important}#blogExtensionBox .blog_extension{background: #ffffff3b !important}.navList-box .blog-second-list>ul>li .blog-time-filter .el-select .el-input .el-input__inner{    background: #f9020200 !important}#userSkin.skin-cookblue .user-profile-head{background:none;}#userSkin .user-profile-head .user-profile-head-info{ background: rgba(173, 216, 230, 0.5)!important}.introduction-fold[data-v-d1dbb6f8]{color:rgb(255, 0, 128, 1)!important;line-height: 20px!important;font-family:华文行楷;font-size:1.7em!important}.introduction-fold>span{font-family:FZYaoti;color:blue;font-weight: bold}p[data-v-46274ba1],h4[data-v-6fe2b6a7],.blink-list-bottom, .user-profile-statistics-name{ font-weight: bold!important; font-family:STXingkai!important;font-size:1.8em!important}.blog-list-box .view-time-box,.user-profile-statistics-num,.two-px{font-weight: bold;font-family:STCaiyun!important;font-size:1.2em!important}.user-profile-statistics-num{font-size:2em!important}.show-more-introduction-fold,.address ,.user-profile-head-name-vip,.blog-list-box .blog-list-content{font-family:STXingkai!important;font-size:1.65em!important;color:#eeff00!important}  .aside-common-box-content i {background-image: url(https://img-home.csdnimg.cn/images/20210114022826.png) !important}</style></div>

在这里插入图片描述

这里我使用的是一个博客专家的图标，选择的图片最好是抠图抠出来的底部是透明的比较适合，抠图方法在上面,以下是效果展示：
在这里插入图片描述

🎲8 在系统原有基础上DIV新标签增加页面内容-应用CSS定位

🎁8.1 如何给头像加上头像框(静态贴图)

CSDN页面绝对定位的x，y轴是这样子的：
在这里插入图片描述

<div><img class="a" src="https://picture.gptkong.com/20240619/23170053c526f04519aae1ebdb8538628e.png"><style>#userSkin.skin-ai{background:url(https://picweboss-app.gracg.com/2001697768_193a7c1ebf7da2261f26ef74aa348aa5oss.jpg_1200w.jpg) no-repeat;background-size: cover;background-attachment: fixed}#userSkin.skin-ai .user-profile-head{background-image:none;}.user-profile-aside .user-profile-aside-common-box,.blog_extension,.user-profile-aside .user-influence-list ul li,.user-profile-head .user-profile-head-info,.navList-box .navList,.navList-box .blog-second-list,.blog-list-box,.el-input__inner,.blink-list-box,.sub-people-list-box,.live-list-box,.resources-list-box,.answer-list-box,.navList-box .ask-second-list,.answer-list-box,.navList-box ,.sub-second-list{background:rgba(187, 173, 217, 0.5) !important}.user-profile-head-name-vip[data-v-d1dbb6f8]{color:#00FFFD!important;font-family:华文行楷;font-size:1.8em}.navList-box .blog-second-list>ul>li .blog-time-filter .el-select .el-input .el-input__inner,.user-profile-aside .user-profile-aside-common-box{background: rgb(173, 255, 238, 0.5) !important}#blogExtensionBox .blog_extension{background: #ffffff3b !important}.navList-box .blog-second-list>ul>li .blog-time-filter .el-select .el-input .el-input__inner{    background: #f9020200 !important}#userSkin.skin-cookblue .user-profile-head{background:none;}#userSkin .user-profile-head .user-profile-head-info{ background: rgba(173, 216, 230, 0.5)!important}.introduction-fold[data-v-d1dbb6f8]{color:rgb(255, 0, 128, 1)!important;line-height: 20px!important;font-family:华文行楷;font-size:1.7em!important}.introduction-fold>span{font-family:FZYaoti;color:blue;font-weight: bold}p[data-v-46274ba1],h4[data-v-6fe2b6a7],.blink-list-bottom, .user-profile-statistics-name{ font-weight: bold!important; font-family:STXingkai!important;font-size:1.8em!important}.blog-list-box .view-time-box,.user-profile-statistics-num,.two-px{font-weight: bold;font-family:STCaiyun!important;font-size:1.2em!important}.user-profile-statistics-num{font-size:2em!important}.show-more-introduction-fold,.address ,.user-profile-head-name-vip,.blog-list-box .blog-list-content{font-family:STXingkai!important;font-size:1.65em!important;color:#eeff00!important}  .aside-common-box-content i {background-image: url(https://picture.gptkong.com/20240620/1615443ae4ce9d407facabf2bd0557c45c.png) !important} .a,.b{position: absolute;height:165px;top: -260px; width:165px;left:-15px}</style></div>

这里只放了一个<img>标签，之所以class设置这么简短，是因为自定义模块有字数限制，代码能省则省呀
在这里插入图片描述
这里我用了一个绝对定位，对准了头像位置，参数直接用就好了
在这里插入图片描述
最终效果：
在这里插入图片描述
缺点：点开详情资料的时候页面被拉下来，这个位置也会被拉下来，不知道有没有大佬有更好的解决方法
在这里插入图片描述

🎁8.2 如何在主页最上方加段醒目的欢迎语

<div><p class="b">欢迎来到小Z的博客!</p><img class="a" src="https://picture.gptkong.com/20240619/23170053c526f04519aae1ebdb8538628e.png"><style>#userSkin.skin-ai{background:url(https://picweboss-app.gracg.com/2001697768_193a7c1ebf7da2261f26ef74aa348aa5oss.jpg_1200w.jpg) no-repeat;background-size: cover;background-attachment: fixed}#userSkin.skin-ai .user-profile-head{background-image:none;}.user-profile-aside .user-profile-aside-common-box,.blog_extension,.user-profile-aside .user-influence-list ul li,.user-profile-head .user-profile-head-info,.navList-box .navList,.navList-box .blog-second-list,.blog-list-box,.el-input__inner,.blink-list-box,.sub-people-list-box,.live-list-box,.resources-list-box,.answer-list-box,.navList-box .ask-second-list,.answer-list-box,.navList-box ,.sub-second-list{background:rgba(187, 173, 217, 0.5) !important}.user-profile-head-name-vip[data-v-d1dbb6f8]{color:#00FFFD!important;font-family:华文行楷;font-size:1.8em}.navList-box .blog-second-list>ul>li .blog-time-filter .el-select .el-input .el-input__inner,.user-profile-aside .user-profile-aside-common-box{background: rgb(173, 255, 238, 0.5) !important}#blogExtensionBox .blog_extension{background: #ffffff3b !important}.navList-box .blog-second-list>ul>li .blog-time-filter .el-select .el-input .el-input__inner{    background: #f9020200 !important}#userSkin.skin-cookblue .user-profile-head{background:none;}#userSkin .user-profile-head .user-profile-head-info{ background: rgba(173, 216, 230, 0.5)!important}.introduction-fold[data-v-d1dbb6f8]{color:rgb(255, 0, 128, 1)!important;line-height: 20px!important;font-family:华文行楷;font-size:1.7em!important}.introduction-fold>span{font-family:FZYaoti;color:blue;font-weight: bold}p[data-v-46274ba1],h4[data-v-6fe2b6a7],.blink-list-bottom, .user-profile-statistics-name{ font-weight: bold!important; font-family:STXingkai!important;font-size:1.8em!important}.blog-list-box .view-time-box,.user-profile-statistics-num,.two-px{font-weight: bold;font-family:STCaiyun!important;font-size:1.2em!important}.user-profile-statistics-num{font-size:2em!important}.show-more-introduction-fold,.address ,.user-profile-head-name-vip,.blog-list-box .blog-list-content{font-family:STXingkai!important;font-size:1.65em!important;color:#eeff00!important}  .aside-common-box-content i {background-image: url(https://picture.gptkong.com/20240620/1615443ae4ce9d407facabf2bd0557c45c.png) !important} .a,.b{position: absolute;height:165px;top: -260px; width:165px;left:-15px}.b{height:70px;width:900px;top: -276px;left: 231px;;font-family:华文行楷;font-size:100px;color:black}</style></div>

在这里插入图片描述
在这里插入图片描述

这里也是用到一个<p>标签，加上定位，定位的参数都找好了，可以直接用上去就好啦，注意行高不能设置太高，要不然会挡住一些按键从而按不了。

在这里插入图片描述

🎲5.10 如何DIV头部导航栏颜色？（补到第5点）

本来该在上面加的，现在刚想起来，一个一个加太麻烦了，就在这里加吧。
找到导航栏的选择器.toolbar-container

<div><p class="b">欢迎来到小Z的博客!</p><img class="a" src="https://picture.gptkong.com/20240619/23170053c526f04519aae1ebdb8538628e.png"><style>#userSkin.skin-ai{background:url(https://picweboss-app.gracg.com/2001697768_193a7c1ebf7da2261f26ef74aa348aa5oss.jpg_1200w.jpg) no-repeat;background-size: cover;background-attachment: fixed}#userSkin.skin-ai .user-profile-head{background-image:none;}.user-profile-aside .user-profile-aside-common-box,.blog_extension,.user-profile-aside .user-influence-list ul li,.user-profile-head .user-profile-head-info,.navList-box .navList,.navList-box .blog-second-list,.blog-list-box,.el-input__inner,.blink-list-box,.sub-people-list-box,.live-list-box,.resources-list-box,.answer-list-box,.navList-box .ask-second-list,.answer-list-box,.navList-box ,.sub-second-list{background:rgba(187, 173, 217, 0.5) !important}.user-profile-head-name-vip[data-v-d1dbb6f8]{color:#00FFFD!important;font-family:华文行楷;font-size:1.8em}.navList-box .blog-second-list>ul>li .blog-time-filter .el-select .el-input .el-input__inner,.user-profile-aside .user-profile-aside-common-box{background: rgb(173, 255, 238, 0.5) !important}#blogExtensionBox .blog_extension{background: #ffffff3b !important}.navList-box .blog-second-list>ul>li .blog-time-filter .el-select .el-input .el-input__inner{    background: #f9020200 !important}#userSkin.skin-cookblue .user-profile-head{background:none;}#userSkin .user-profile-head .user-profile-head-info{ background: rgba(173, 216, 230, 0.5)!important}.introduction-fold[data-v-d1dbb6f8]{color:rgb(255, 0, 128, 1)!important;line-height: 20px!important;font-family:华文行楷;font-size:1.7em!important}.introduction-fold>span{font-family:FZYaoti;color:blue;font-weight: bold}p[data-v-46274ba1],h4[data-v-6fe2b6a7],.blink-list-bottom, .user-profile-statistics-name{ font-weight: bold!important; font-family:STXingkai!important;font-size:1.8em!important}.blog-list-box .view-time-box,.user-profile-statistics-num,.two-px{font-weight: bold;font-family:STCaiyun!important;font-size:1.2em!important}.user-profile-statistics-num{font-size:2em!important}.show-more-introduction-fold,.address ,.user-profile-head-name-vip,.blog-list-box .blog-list-content{font-family:STXingkai!important;font-size:1.65em!important;color:#eeff00!important}  .aside-common-box-content i {background-image: url(https://picture.gptkong.com/20240620/1615443ae4ce9d407facabf2bd0557c45c.png) !important} .a,.b{position: absolute;height:165px;top: -260px; width:165px;left:-15px}.b{height:70px;width:900px;top: -276px;left: 231px;;font-family:华文行楷;font-size:100px;color:black}.toolbar-container {
background: pink;}</style></div>

最终效果：
在这里插入图片描述

🎲9 注意事项

1.如果只在自定义模块设置<style>，必须在<style>标签外加上 <div>，否则<style> 不能生效！
2.当!important不能生效的时候，大多数是因为继承的因素，因为继承无论权重多大，相对于其他的都是0，这时候我们需要找更近的class,如果我们想要的样式标签没有设置class或者是内联样式，我们可以通过后代选择器或者子代选择器进行间接选中。可参考： CSS3 复合选择器。
3.自己设置css定位以及调整属性的时候，可以直接在主页打开F12利用调试进行测试，找到自己想要设定的值，提高效率。可参考：CSS3 三大特性+Chrome 调试代码技巧
4.由于自定义模块有字数限制，所以我们设定的class名要尽可能简短，已经有相同属性的我们可以进行合并，多余的空格也可以删除。

🎲10 小结

阅读好这篇文章你一定了解了div个人主页的原理了吧！修改个人主页主要用到就是css选择器和css定位，要多加使用chrome调试简化修改过程，加强效率。同时自定义模块有字数限制，我们要尽可能简化我们的代码。自定义模块还有更多可以被挖掘出来的功能，现有的也还在被挖掘，uu们可以自己div专属自己的页面。昨天还想着怎么串灯笼，后面受到空白诗大佬的启发，知道了可以改系统的样式＼（ ● ⌒ ∇ ⌒ ● ）／非常感谢。本来期末打算好好复习了，一下子又过去了五个小时ෆු(˃ர்˂)ෆු
请添加图片描述

在这里插入图片描述

相关文章：

如何通过自定义模块DIY出专属个性化的CSDN主页？一招教你搞定！

个人主页&#xff1a;学习前端的小z 个人专栏&#xff1a;HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结&#xff0c;欢迎大家在评论区交流讨论&#xff01; 文章目录 &#x1f4af;如何通过HTMLCSS自定义模板diy出自己的个性化csdn主页&#x…...

编程日记 2024/6/21 11:02:17

[BSidesCF 2020]Had a bad day1

看到页面有两个按钮 先随便点一个试一下&#xff0c;当我们点击之后发现url是有变动的 感觉url是有点东西的&#xff0c;可能是某种注入&#xff0c;先尝试一下sql注入&#xff0c;发现给出了报错 通过报错我们可以确定是文件包含漏洞&#xff0c;那我们试试php伪协议去读取一下…...

编程日记 2024/6/21 10:59:13

从媒体网站的频道划分看媒体邀约的分类？

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 媒体宣传加速季&#xff0c;100万补贴享不停&#xff0c;一手媒体资源&#xff0c;全国100城线下落地执行。详情请联系胡老师。 在我们举行活动的时候&#xff0c;通常会邀请媒体到现场来…...

编程日记 2024/6/21 10:58:11

Day40

Day40 监听器 概念&#xff1a; 监听器用于监听web应用中某些对象信息的创建、销毁、增加&#xff0c;修改&#xff0c;删除等动作的 发生&#xff0c;然后作出相应的响应处理。当范围对象的状态发生变化的时候&#xff0c;服务器自动调用 监听器对象中的方法。 常用于统计在线…...

编程日记 2024/6/21 10:57:10

linux基础 - 内核的基础概念

目录 零. 前言 一. 源码简介 二. 存储管理 物理内存管理&#xff1a; 虚拟内存管理&#xff1a; 内存分配与回收&#xff1a; 三. CPU 和进程管理 进程管理&#xff1a; CPU 管理&#xff1a; 四. 文件系统 文件系统的概念 常见的 Linux 文件系统类型 文件系统的工…...

编程日记 2024/6/21 10:56:08

centos7系统使用docker-compose安装部署jenkins

CentOS7系统使用docker-compose安装部署jenkins&#xff0c;并实现前后端自动构建 记录一次工作中部署jenkins的真实经历&#xff0c;总结了相关经验 1.准备环境 1.java 由于最新的jenkins需要jdk11以上才能支持&#xff0c;而系统里的jdk是1.8的&#xff0c;因此等jenkins安…...

编程日记 2024/6/21 10:55:07

传染病报卡内容——丙型

--丙型 select a.morbiditdate 发病日期, diagnosedate 诊断日期, a.deathdate 死亡日期, a.casetypequality 病例分类,a.hcvrna "HCR_RNA定量" from zl_sdmb.t_报卡记录 t, c1_infectiousv1_6 a where t.id a.fileid and t.卡片种类 传…...

编程日记 2024/6/21 10:51:02

本地快速部署大语言模型开发平台Dify并实现远程访问保姆级教程

文章目录 前言1. Docker部署Dify2. 本地访问Dify3. Ubuntu安装Cpolar4. 配置公网地址5. 远程访问6. 固定Cpolar公网地址7. 固定地址访问 前言 本文主要介绍如何在Linux Ubuntu系统使用Docker快速部署大语言模型应用开发平台Dify,并结合cpolar内网穿透工具实现公网环境远程访问…...

编程日记 2024/6/21 10:50:00

《Cloud Native Data Center Networking》（云原生数据中心网络设计）读书笔记 -- 02 Clos拓扑

本章回答以下问题&#xff1a; 什么是 Clos 拓扑&#xff0c;它与“接入 - 汇聚 - 核心”拓扑有何不同?Clos 拓扑的特征是什么?Clos 拓扑对数据中心网络的影响是什么? Clos拓扑 云原生数据中心基础设施的先行者们想要构建一种支持大规模水平扩展网络。 基本的Clos拓扑如图…...

编程日记 2024/6/21 10:48:59

VUE3版本新特性

VUE3版本新特性 VUE3和VUE2的区别路由的使用vite安装项目新特性使用 1.VUE3和VUE2的区别 2020年9月18日&#xff0c;Vue.js发布版3.0版本&#xff0c;代号&#xff1a;One Piece 于 2022 年 2 月 7 日星期一成为新的默认版本! Vue3性能更高,初次渲染快55%, 更新渲染快133% 。…...

编程日记 2024/6/21 10:46:57

【Oracle篇】Oracle数据库坏块处理：rman修复坏块实践与案例分析（第七篇，总共八篇）

&#x1f4ab;《博主介绍》&#xff1a;✨又是一天没白过&#xff0c;我是奈斯&#xff0c;DBA一名✨ &#x1f4ab;《擅长领域》&#xff1a;✌️擅长Oracle、MySQL、SQLserver、阿里云AnalyticDB for MySQL(分布式数据仓库)、Linux&#xff0c;也在扩展大数据方向的知识面✌️…...

编程日记 2024/6/21 10:44:51

学懂C#编程：从一个简单的例子理解事件处理

在C#中&#xff0c;事件是一种特殊的委托类型&#xff0c;用于在对象上发生某些事情时通知订阅者。事件的处理通常包括定义事件&#xff0c;创建触发事件的条件&#xff0c;以及订阅该事件的事件处理程序。 以下是一个简单的C#事件处理示例&#xff1a; using System;// 定义…...

编程日记 2024/6/21 10:43:46

深入理解指针（2）

4. const 修饰指针 4.1 const修饰变量 变量是可以修改的&#xff0c;如果把变量的地址交给⼀个指针变量&#xff0c;通过指针变量的也可以修改这个变量。 但是如果我们希望⼀个变量加上⼀些限制&#xff0c;不能被修改&#xff0c;怎么做呢&#xff1f;这就是const的作⽤。 …...

编程日记 2024/6/21 10:42:45

C#.Net筑基-集合知识全解

01、集合基础知识 .Net 中提供了一系列的管理对象集合的类型&#xff0c;数组、可变列表、字典等。从类型安全上集合分为两类&#xff0c;泛型集合 和 非泛型集合&#xff0c;传统的非泛型集合存储为Object&#xff0c;需要类型转。而泛型集合提供了更好的性能、编译时类型安全…...

编程日记 2024/6/21 10:41:43

AI PPT生成器，一键在线智能生成PPT工具

PPT作为商业沟通和教育培训中的重要工具&#xff0c;PPT制作对于我们来说并不陌生。但是传统的PPT制作不仅耗时&#xff0c;而且想要做出精美的PPT&#xff0c;需要具备一定的设计技能。下面小编就来和大家分享几款AI PPT工具&#xff0c;只要输入主题&#xff0c;内容就可以在…...

编程日记 2024/6/21 10:40:42

stm32学习笔记---零基础入门介绍2

目录 STM32介绍 STM32家族系列 ARM介绍 ARM内核型号种类 我们学习用的STM32 片上资源/外设&#xff08;Peripheral&#xff09; 命名规则 系统结构 引脚定义 STM32的启动配置 STM32最小系统电路和其他部分电路 最小系统板的实物图 附&#xff1a;安装软件准备 声明…...

编程日记 2024/6/21 10:39:39

搭建取图系统app源码开发，满足广泛应用需求

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 前言 图片已成为信息传递的重要媒介&#xff0c;广泛应用于各个领域。为满足日益增长的图片需求&#xff0c;搭建一款高效的取图系统&#xff0c;可以为用户提供便捷、全面的…...

编程日记 2024/6/21 10:36:35

语音质量评价方法之MOS

引言 在语音增强、语音合成、语音转换、声音转换、语音克隆、语音修复等等领域&#xff0c;常常要对输出的语音进行评价。对语音的质量评价一般关注两个方面&#xff0c;即主观评价和客观评价。主观评价就是人凭借听觉感受对语音进行打分&#xff0c;客观评价比较广泛&#xf…...

编程日记 2024/6/21 10:34:31

gorm简介

【1】ORM: 即Object-Relational Mapping,它的作用是在关系型数据库和对象之间作一个映射&#xff0c;这样我们在具体的操作数据库的时候&#xff0c;就不需要再去和复杂的SQL语句打交道&#xff0c;只要像平时操作对象一样操作它们就可以了。 【2】GORM gorm是go语言的一个orm…...

编程日记 2024/6/21 10:33:29

MySQL：SELECT list is not in GROUP BY clause 报错 解决方案

一、前言 一大早上测试环境&#xff0c;发现测试环境的MySQL报错了。 SELECT list is not in GROUP BY clause and contains nonaggregated column二、解决方案 官方文档中提到&#xff1a; 大致意思&#xff1a; 用于GROUP BY的SQL / 92标准要求满足以下条件&#xff1a; SE…...

编程日记 2024/6/21 10:32:27

IPython的使用技巧

1、解释说明 IPython是一个强大的Python交互式shell&#xff0c;它提供了丰富的功能&#xff0c;如自动补全、历史记录、内置帮助等。IPython使得在命令行下编写和测试Python代码变得更加方便和高效。 2、使用示例 安装IPython&#xff1a; pip install ipython启动IPython…...

编程日记 2024/6/21 10:29:23

Spring Boot 多线程例子

在Spring Boot中&#xff0c;多线程可以通过Java的并发工具来实现。以下是一些常见的多线程实现方法&#xff1a; 1. 使用Async注解和CompletableFuture&#xff1a; 首先&#xff0c;需要在Spring Boot应用的主类上添加EnableAsync注解&#xff0c;以启用异步支持。 java Spr…...

编程日记 2024/6/21 10:28:21

java干货 线程池的分析和使用

文章目录 一、了解线程池1.1 什么是线程池1.2 为什么需要线程池 二、四种线程池的使用2.1 newFixedThreadPool2.2 newCachedThreadPool2.3 newSingleThreadExecutor2.4 newScheduledThreadPool 三、自定义线程池3.1 线程池七大核心参数3.2 线程池内部处理逻辑 一、了解线程池 …...

编程日记 2024/6/21 10:26:19

文本张量入门

张量&#xff0c;英文为Tensor&#xff0c;是机器学习的基本构建模块&#xff0c;是以数字方式表示数据的形式。 张量的基本类型: 创建一个标量&#xff08;0维张量&#xff09;&#xff0c;也就是一个单独的数字 scalar torch.tensor(7) scalar.ndim # 返回张量的维度 0 # …...

编程日记 2024/6/21 10:22:12

js文字如何轮播？

<div class"td-style"> <span class"td-text">内容1内容1内容1内容1内容1内容1</span> </div> css&#xff1a; <style> .td-style { width: 160px; height: 72px; overflow: hidden; white-…...

编程日记 2024/6/21 10:21:11

Linux 五种IO模型

注&#xff1a;还有一种信号驱动IO&#xff0c;使用较少暂不讨论&#xff1b; 一&#xff0c;区分阻塞、非阻塞和同步、异步 看了很多文章对这两组概念解释和对比&#xff0c;说的太复杂了&#xff0c;其实没必要&#xff0c;两句话就能说清楚。 首先&#xff0c;对于读数据rec…...

编程日记 2024/6/21 10:19:08

深度解析响应式异步编程模型

上一篇文章中我们聊了一下线程池，基于线程池的多线程编程是我们在高并发场景下提升系统处理效率的有效手段，但却不是唯一的。今天我们来看一下另一种异步开发的常用手段-响应式编程模型 传统多线程模型的缺陷 多线程模型是目前应用最为广泛的并发编程手段，但凡遇到什么性能…...

编程日记 2024/6/21 10:18:07

一个软件是如何开发出来的呢？

一、前言 如今&#xff0c;AI大爆发的时代&#xff0c;作为一名IT从业者&#xff0c;你是否也想尝试开发一套自己的系统&#xff0c;实现那些看似有可能实现的天马行空的想法&#xff0c;变成一个优秀甚至伟大的产品&#xff0c;甚至带来某个行业的革新&#xff0c;那作为一名…...

编程日记 2024/6/21 10:16:04

宝塔板面有哪些优势

哈喽呀&#xff0c;大家好呀&#xff0c;淼淼又来和大家见面啦&#xff0c;在当今数字化时代&#xff0c;随着云计算和互联网技术的飞速发展&#xff0c;服务器管理成为了许多企业和个人开发者不可或缺的一部分。然而&#xff0c;传统服务器管理方式的复杂性和技术门槛往往令初…...

编程日记 2024/6/21 10:15:03

Mybatis中BaseEntity作用

新建各种对象的时候&#xff0c;一般来说&#xff0c;有几个属性是所有对象共有的&#xff0c;比如说id,is_del&#xff0c;is_enable这些&#xff0c;然后设置一个基础对象&#xff0c;以后新建所有对象的时候都继承它&#xff0c;就省的每次都要写这些共有的属性了...

编程日记 2024/6/21 10:14:01

自己做旅游攻略的网站/软文代写兼职

线程的同步 如果线程不同步&#xff0c;会发生两个线程抢占资源的问题&#xff1b;例如火车票出售时&#xff0c;只有最后一张票&#xff0c;但两个人一起买就会出现系统问题。所以为了避免资源抢占的问题&#xff0c;在使用线程的同步时应该考虑线程的安全 1.不安全的线程&a…...

编程日记 2024/10/23 6:32:10

注册公司需要什么条件和手续/seo还有哪些方面的优化

C语言中 malloc、calloc、realloc的区别(1)C语言跟内存分配方式<1>从静态存储区域分配.内存在程序编译的时候就已经分配好&#xff0c;这块内存在程序的整个运行期间都存在.例如全局变量、static变量.<2>在栈上创建在执行函数时&#xff0c;函数内局部变量的存储单…...

编程日记 2024/10/23 4:46:14

徐州网站平台/原创文章代写

转自&#xff1a;http://www.pinlue.com/article/2019/09/1413/469615040316.html...

编程日记 2024/10/23 2:01:22

南通网站公司网站/网盟推广

1、Windows XP虚拟机内部重启不能正确获取IP&#xff0c;windows xp iso建立VM&#xff0c;重启VM无法正确获取IP地址&#xff0c;原因是没有加入域&#xff0c;可以通过修改注册表来解决此问题。设置组策略 计算机配置--管理模板--网络--DNS客户端里的DNS后缀搜索列表&#xf…...

编程日记 2024/10/22 23:44:34

深圳做网站佰达科技三十/免费网站生成器

本文实例为大家分享了js实现select二级联动下拉菜单&#xff0c;供大家参考&#xff0c;具体内容如下String path request.getContextPath();String basePath request.getScheme()"://"request.getServerName()":"request.getServerPort()path"/&qu…...

编程日记 2024/10/22 23:19:16

wordpress页面直接跳转/自媒体怎么入门

HashMap是常考点&#xff0c;而一般不问List的几个实现类(偏简单)。以下基于JDK1.8.0_102分析。JDK版本&#xff1a;oracle java 1.8.0_102内部存储HashMap的内部存储是一个数组(bucket)&#xff0c;数组的元素Node实现了是Map.Entry接口(hash, key, value, next)&#xff0c;n…...

编程日记 2024/10/22 21:52:43