如何DIY出专属个性化的CSDN主页？一招教你搞定！

请添加图片描述


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

个人专栏：HTML5和CSS3悦读

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

在这里插入图片描述

文章目录

  • 💯如何通过HTML+CSS自定义模板diy出自己的个性化csdn主页？
    • 💟1 最终效果展示
    • 💟2 自定义模板介绍
      • 🎁2.1 自定义模块入口
      • 🎁2.2 自定义模块使用前置条件
      • 🎁2.3 自定义模块使用限制
    • 💟3 实现效果所需的前置知识
    • 💟4 实现效果原理
    • 💟5 修改系统自带CSS样式-应用CSS三大特性之特殊性
      • 🎁5.1 如何设置自定义主页背景
      • 🎁5.2 如何设置自定义主页头部背景，或者设置为透明
      • 🎁5.3 如何在主题区域设置自己喜欢的颜色
      • 🎁5.4 如何设置个人id颜色
      • 🎁5.5 如何更换左部栏颜色
      • 🎁5.6 如何设置头部栏背景透明颜色
      • 🎁5.7 如何修改个人简介样式
      • 🎁5.8 如何修改主页文章展示字体
      • 🎁5.9 如何修改个人信息和文章数据展示效果
      • 🎁5.10 如何修改主页扩展信息
    • 💟6 如何制作背景透明的免抠图标
    • 💟7 如何修改系统自带的认证图标
    • 💟8 如何制作头像框-应用CSS定位
    • 💟9 如何在主页最上方加段醒目的欢迎语
    • 💟10 如何给导航栏换色？
    • 💟11 小结

在这里插入图片描述

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

💯如何通过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类
在这里插入图片描述

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

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

在这里插入图片描述

不出意外的话，肯定没有实现成功≥Ö‿Ö≤，难道真的要放弃了吗？
但是我们发现！在我们自定义模块中写入的<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 修改系统自带CSS样式-应用CSS三大特性之特殊性

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

🎁5.1 如何设置自定义主页背景

首先我们打开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 如何设置自定义主页头部背景，或者设置为透明

首先我们打开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 如何在主题区域设置自己喜欢的颜色

＼（ ● ⌒ ∇ ⌒ ● ）／

找到背景图所在选择器
#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 如何设置个人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 如何更换左部栏颜色

找到左部栏所在选择器
.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><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 如何修改个人简介样式

找到对应的选择器:.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 如何修改主页文章展示字体

找到对应选择器:
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 如何修改个人信息和文章数据展示效果

找到个人信息的数字对应的选择器
.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 如何修改主页扩展信息

找到对应选择器
.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 如何制作背景透明的免抠图标

我找的是快图网
搜索图标后有各种已经扣好的图片
但是好像只能下载一次，后面要开vip
没事，还有办法！

在这里插入图片描述
在浏览器扩展商店找到图片助手点击下载后
在页面找到图标点击提取本页图片
在这里插入图片描述
在这里插入图片描述
我们可以在这里下载以后截取的图片，但是这个是没有扣好的
在这里插入图片描述
我们去抠图网把图片抠出来
在这里插入图片描述
最后去生成一个图片在线链接
在线生成图片链接
在这里插入图片描述
拿着这个链接就可以去做我们的图标啦

💟7 如何修改系统自带的认证图标

没错，系统自带的黄v也可以修改！
在这里插入图片描述
我们发现图标是内联样式，我们不能直接用li，因为主页中不止这一个li，那我们就使用后代选择器，使用一个有class的父级元素去绑定它的位置，这里我们选择了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 如何制作头像框-应用CSS定位

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

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

<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>标签，加上定位，定位的参数都找好了，可以直接用上去就好啦，注意行高不能设置太高，要不然会挡住一些按键从而按不了。

在这里插入图片描述

💟10 如何给导航栏换色？

本来该在上面加的，现在刚想起来，一个一个加太麻烦了，就在这里加吧。
找到导航栏的选择器.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>

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

💟11 小结

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

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/31254.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

SD3发布，送你3个ComfyUI工作流

SD3发布，送你3个ComfyUI工作流

大家好&#xff0c;我是每天分享AI应用的萤火君&#xff01; 这几天AI绘画界最轰动的消息莫过于Stable Diffusion 3&#xff08;简称SD3&#xff09;的发布。SD3是一个多模态的 Diffusion Transformer 模型&#xff0c;其在图像质量、排版、复杂提示理解和资源效率方面具有显著…
阅读更多...
ADC常用的十大滤波算法(C语言）

ADC常用的十大滤波算法(C语言）

一、限幅滤波法 1、方法&#xff1a; 根据经验判断两次采样允许的最大偏差值&#xff08;设为A&#xff09; 每次检测到新值时判断&#xff1a; a. 如果本次值与上次值之差<A&#xff0c;则本次值有效 b. 如果本次值与上次值之差>A&#xff0c;则本次值无效&#xf…
阅读更多...
QT MQTT （二）编译与集成

QT MQTT （二）编译与集成

一、QT MQTT 提供 MQTT 客户端服务的 Qt 专用库基于标准化发布 / 订阅协议&#xff0c;用于在设备和组件之间可靠地共享数据。MQTT 是为保证状态正确性、满足高安全标准和交换最小数据而设计的协议&#xff0c;因此被广泛应用于各种分布式系统和物联网解决方案中。 Qt开发MQT…
阅读更多...
【Oracle篇】Oracle数据库坏块处理：rman修复坏块实践与案例分析（第七篇，总共八篇）

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

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

git配置ssh key

一、生成ssh公钥和私钥对 打开终端&#xff0c;输入命令&#xff0c;-C 后是git邮箱&#xff0c;在 Enter file in which to save the key (/home/my/.ssh/id_rsa): 后可以输入公钥和私钥对保存路径及文件名&#xff0c;默认是 /home/my/.ssh/id_rsa&#xff0c;其它的全部按回…
阅读更多...
从0开始C++（五）：友元函数运算符重载

从0开始C++（五）：友元函数运算符重载

友元函数 介绍 C中的友元函数是一种特殊的函数&#xff0c;它可以访问和操作类的私有成员和保护成员。友元函数可以在类的内部或外部声明和定义&#xff0c;但在其声明和定义中需要使用关键字 friend 来标识。友元函数可以是全局函数&#xff0c;也可以是其他类的成员函数。 …
阅读更多...
Web APIs--Dom获取属性操作

Web APIs--Dom获取属性操作

目录 1.DOM&#xff08;操作网页内容、用户交互&#xff09; 2.DOM对象获取&#xff08;querySelect(‘’)、querySelectAll(‘’)&#xff09; 总结&#xff1a; 3.操作元素内容&#xff08;修改元素的文本更换内容&#xff09; 1. 元素innerText 属性 2.元素.innerHTML…
阅读更多...
第一百一十六节 Java 面向对象设计 - Java 终止块

第一百一十六节 Java 面向对象设计 - Java 终止块

Java 面向对象设计 - Java 终止块 ​try ​块也可以有零个或一个​ finally​ 块。 ​finally ​块总是与 ​try ​块一起使用。 语法 使用 ​finally​ 块的语法是 finally {// Code for finally block }​finally​ 块以关键字 ​finally​ 开始&#xff0c;后面紧跟一对…
阅读更多...
深入分析 Android BroadcastReceiver (四)

深入分析 Android BroadcastReceiver (四)

文章目录 深入分析 Android BroadcastReceiver (四)1. 广播接收器的深入优化与应用1.1 实时性要求高的应用1.1.1 示例&#xff1a;音乐播放器中处理耳机插拔事件1.1.2 动态注册接收器 1.2 处理耗时操作1.2.1 示例&#xff1a;使用 IntentService 处理耗时操作 1.3 安全性管理1.…
阅读更多...
【机器学习】深度学习赋能：基于 LSTM 的智能日志异常检测

【机器学习】深度学习赋能：基于 LSTM 的智能日志异常检测

目录 1. LSTM 简介 2. 日志序列异常检测概述 3. 数据预处理 3.1 日志解析 3.2 数据清洗 3.3 序列化 3.4 特征提取 示例代码 4. 构建 LSTM 模型 4.1 模型结构 4.2 模型构建示例 5. 训练 LSTM 模型 5.1 数据准备 5.2 模型训练 示例代码 6. 异常检测 6.1 异常分数…
阅读更多...
处理文本内容的命令和正则表达式

处理文本内容的命令和正则表达式

处理文本内容的命令 正则表达式匹配的是文本内容&#xff0c;linux的文本三剑客 都是针对文本内容 文本三剑客&#xff1a; grep 过滤文本内容 sed 针对文本内容进行增删改查 awk 按行取列 文本三剑客都是按行进行匹配。 grep grep的作用就是使用正则表达式来匹配文本内…
阅读更多...
虚拟现实环境下的远程教育和智能评估系统（十一）

虚拟现实环境下的远程教育和智能评估系统（十一）

视频帧画面知识点区域划分 知识点区域精确分割技术: 在深度学习检测模型结果基础上使用基于交并比&#xff08;IoU&#xff09;阈值的目标合并算法&#xff0c;合并过度重合目标区域面积&#xff0c;实现知识点区域精确分割 多模态知识点内容匹配策略: 图像&#xff1a;利用…
阅读更多...
【第18章】Vue实战篇之登录界面

【第18章】Vue实战篇之登录界面

文章目录 前言一、数据绑定1. 数据绑定2. 数据清空 二、表单校验1. 代码2. 展示 三、登录1.登录按钮2.user.js3. login 四、展示总结 前言 上一章完成用户注册&#xff0c;这一章主要做用户登录。 一、数据绑定 登录和注册使用相同的数据绑定 1. 数据绑定 <!-- 登录表单 -…
阅读更多...
紧凑型计算微型仿生复眼

紧凑型计算微型仿生复眼

欢迎关注&#xff1a;GZH《光场视觉》 图1 研制的计算微型复眼的成像原理 1. 导读 微型曲面复眼由于具有大视场成像、大景深成像、体积较小的优势&#xff0c;在机器视觉、无人机导航、生物灵感机器人等领域引起了广泛关注。然而&#xff0c;传统的微型曲面复眼存在设计/加工…
阅读更多...
HTTP详细总结

HTTP详细总结

概念 HyperText Transfer Protocol&#xff0c;超文本传输协议&#xff0c;规定了浏览器和服务器之间数据传输的规则。 特点 基于TCP协议: 面向连接&#xff0c;安全 TCP是一种面向连接的(建立连接之前是需要经过三次握手)、可靠的、基于字节流的传输层通信协议&#xff0c;在…
阅读更多...
SpringMvc—域对象共享数据和视图

SpringMvc—域对象共享数据和视图

一、向request域创建对象 先创建首页&#xff1a; 在testController这个类中&#xff1a; package com.pon.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; Controller public class test…
阅读更多...
后台管理系统登录业务分析（图片验证码登录）

后台管理系统登录业务分析（图片验证码登录）

文章目录 1、登录业务分析2、登录开发流程2.1、获取图片验证码接口业务2.2、CodeImgServiceImpl2.2.1、响应 2.3、IndexController2.4、SysUserServiceImpl2.5、SysUserMapper.xml 3、springmvc拦截器创建&注册3.1、springmvc拦截器的创建3.2、springmvc拦截器注册3.3、Sys…
阅读更多...
【Oracle APEX开发小技巧1】转换类型实现显示小数点前的 0 以 及常见类型转换

【Oracle APEX开发小技巧1】转换类型实现显示小数点前的 0 以 及常见类型转换

在 apex 交互式式网格中&#xff0c;有一数值类型为 NUMBER&#xff0c;保留小数点后两位的项&#xff0c;在 展示时小数点前的 0 不显示。 效果如下&#xff1a; 转换前&#xff1a; m.WEIGHT_COEFFICIENT 解决方案&#xff1a; 将 NUMBER&#xff08;20&#xff0c;2&#xf…
阅读更多...
Vue 自定义ElementUI的Loading效果

Vue 自定义ElementUI的Loading效果

import { loadingText, messageDuration } from "/settings";import { Loading } from "element-ui"; // loadingText、messageDuration 这两个参数我是调的公共配置文件,按自己需求来 const install (Vue, opts {}) > {/* 全局多彩Loading加载层 *…
阅读更多...
cpolar：通过脚本自动更新主机名称和端口号进行内网穿透【免费版】

cpolar：通过脚本自动更新主机名称和端口号进行内网穿透【免费版】

cpolar 的免费版经常会重新分配 HostName 和 Port&#xff0c;总是手动修改太过麻烦&#xff0c;分享一下自动更新配置文件并进行内网穿透的方法。 文章目录 配置 ssh config编写脚本获取 csrf_token打开登陆界面SafariChrome 设置别名 假设你已经配置好了服务器端的 cpolar。 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023