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


请添加图片描述



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

个人专栏:HTML5和CSS3悦读

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

在这里插入图片描述


文章目录


在这里插入图片描述


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

🎲前言

注意:该文章中出现的代码块都是可以复制粘贴进自定义模块直接使用的,样式是随着文章深入逐步累加的,本人亲测可以使用(●⁰౪⁰●)
前提:必须是VIP博客专家企业博客才可在个人详情页显示!!!
发这个是为了分享好玩的功能(●⁰౪⁰●)(//●⁰౪⁰●)//
本文使用的系统皮肤是Age of Ai,如果使用代码块出现效果不一样,有可能是系统皮肤使用不一样导致。
在这里插入图片描述

🎲1 自定义模块介绍

🎁1.1 自定义模块入口

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

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

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

🎁1.3 自定义模块使用限制

只能使用基本的HTML格式,包括css样式,不能设置js,此外栏目内容长度也有限制。
每周一会重新刷新一次,需要手动重新添加。在这里插入图片描述

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

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

🎲3 实现效果原理

首先我们按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)/・゜゚・*☆゚・✿ヾ╲(。◕‿◕。)╱✿・゚\( ● ⌒ ∇ ⌒ ● )/

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

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

🎁4.1 如何DIY主页背景

首先我们打开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中可以填入自己所需要设置的背景图片

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

🎁4.2 如何DIY主页头部背景,或者设置为透明

首先我们打开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中填入自己需要设置成头部背景的图片
在这里插入图片描述

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

🎁4.3 如何DIY主题区域颜色

\( ● ⌒ ∇ ⌒ ● )/

找到背景图所在选择器
#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原有的样式。
放入效果如下:
在这里插入图片描述

🎁4.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是字体大小;
这些都是可以自己变换的哦~
名字就有颜色啦
在这里插入图片描述

🎁4.5 如何DIY左部栏颜色

找到左部栏所在选择器
.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>

在这里插入图片描述

恢复正常啦

在这里插入图片描述

🎁4.6 如何DIY头部栏背景透明颜色

首先清空背景,确保设置颜色不会被影响
找到对应选择器:
#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>

在这里插入图片描述

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

🎁4.7 如何DIY个人简介样式

找到对应的选择器:.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͡͡͡͡͡͡͡͡͡͡͡͡͡͡
在这里插入图片描述

🎁4.8 如何DIY主页文章展示字体

找到对应选择器:
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>

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

在这里插入图片描述

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

找到个人信息的数字对应的选择器
.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>

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

在这里插入图片描述

🎁4.10 如何DIY主页扩展信息

找到对应选择器
.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>

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

🎁4.12 未提及的剩余其他部分

本文暂时列举这些修改部分,还有其他样式系统可以修改,玩法如出一辙,先用F12调试找到对应的选择器,再在自定义中进行样式重定义,遇到权重低的使用!important使其强制生效,下面会给出一些成品代码块,可以直接复制代码块粘贴进自定义模块使用,uu们可以在此基础上修改一些属性进行变换ゞ( *-)

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

2024.6.26 找到一个非常良心的网站!只要完成注册,里面的抠图都是免费下载的
免抠图片网https://www.miankoutupian.com/
直接用这个下面抠图部分就可以直接省略一步到位
直接看生成图片的在线链接就可以啦

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

最后去生成一个图片在线链接
图像至链接转化:在线利器https://www.gptkong.com/tools/image_to_link
在这里插入图片描述
拿着这个链接就可以去做我们的图标啦

🎲6 如何DIY系统自带的认证图标

没错,系统自带的图标也可以修改!
在这里插入图片描述
我们发现图标是内联样式,我们不能直接用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>

在这里插入图片描述

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

🎁6.1 2024.6.25新发现:让图标每个都不同

我们可以采用.aside-common-box-achievement li:nth-child(i) i,nth-child(i)这个i表示该选择器的位置,这可以间接让后代选择器选中我们具体想要位置li下的i,这样子我们就可以分别设置图标啦!
效果:
在这里插入图片描述

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

🎁7.1 如何给头像加上头像框(静态贴图)(有缺陷,下面第11点修复问题已解决)

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

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

在这里插入图片描述

🎁7.3 如何在主页加上音乐播放器

第一步网易云生成外链接,播放器显示大小位置可以自由调整
在这里插入图片描述
在这里插入图片描述
接着我们通过<iframe>标签嵌入该播放器外链使其在我们的主页显示出来,接着使用到position:fixed使得播放器随着页面滑轮一直移动,最后播放器的大小还有在主页的位置都是可以根据自己需要进行调整的~

<div><iframe class="g" frameborder="no" border="0" width="280" height="100" src="//music.163.com/outchain/player?type=0&id=12225351807&auto=1&height=430"></iframe></div>
<style>.g{position:fixed;bottom:500px;left:0px;z-index:9999}</style>

在这里插入图片描述

🎁4.11 如何DIY头部导航栏颜色?(补到第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>

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

🎲8 注意事项

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

此外,设置的博客皮肤最好选择Age of Air,试了一下其他皮肤,用以上代码会出现一些其他图层未清除的情况!
在这里插入图片描述

🎲9 成品代码

🎁9.1成品1

以下是之前根据别的大佬做的灯笼基础上修改了一些样式,简化代码并增加了个数和排列布局,每个灯笼速度不一样,有层次感,分享给uu们:

<div class="a"style="left: 9.25%;"><div class="j n"><div class="d"></div><div class="c"><div class="b"><div class="e">谢<div class="e"style="line-height: 70px;color:red;">♤</div></div></div><div class="f g"><div class="h"></div><div class="i"></div></div></div></div><div class="a"style="left: 1%;"><div class="j"><div class="d"></div><div class="c"><div class="b"><div class="e">感<div class="e"style="line-height: 70px;color:yellow;">❀</div></div></div></div><div class="f g"><div class="h"></div><div class="i"></div></div></div></div><div class="a"style="left: 30%;"><div class="j M"><div class="d"></div><div class="c"><div class="b"><div class="e">U<div class="e-1"style="color:#00FFF2;">因缘和合</div></div></div></div><div class="f g"><div class="h"></div><div class="i"></div></div></div></div><div class="a"style="left: 39.8%;"><div class="j n"><div class="d"></div><div class="c"><div class="b"><div class="e">U<div class="e-1"style="color:#33FF00;">本自具足</div></div></div></div><div class="f g"><div class="h"></div><div class="i"></div></div></div></div><div class="a"style="left: 49.6%;"><div class="j"><div class="d"></div><div class="c"><div class="b"><div class="e">们<div class="e-1"style="color:#00ACFF;">如其所是</div></div></div></div><div class="f g"><div class="h"></div><div class="i"></div></div></div></div><div class="a"style="left: 59.4%;"><div class="j N"><div class="d"></div><div class="c"><div class="b"><div class="e">的<div class="e-1"style="color:#00FFA8;">平安喜乐</div></div></div></div><div class="f g"><div class="h"></div><div class="i"></div></div></div></div><div class="a"style="left: 69.2%;"><div class="j M"><div class="d"></div><div class="c"><div class="b"><div class="e">支<div class="e-1"style="color:#CA00FF;">福生无量</div></div></div></div><div class="f g"><div class="h"></div><div class="i"></div></div></div></div><div class="a"style="left: 78.5%;"><div class="j n"><div class="d"></div><div class="c"><div class="b"><div class="e">持<div class="e-1"style="color:#FF0068;">随喜赞叹</div></div></div></div><div class="f g"><div class="h"></div><div class="i"></div></div></div></div><div class="a "style="left: 92%;"><div class="j N"><div class="d"></div><div class="c"><div class="b"><div class="e">დ<div class="e"style="line-height: 70px;color:#ff0000;">未来可期</div></div></div></div><div class="f g"><div class="h"></div><div class="i"></div></div></div></div><style type="text/css">.e-1,.e{font-family:华文行楷}.e-1{line-height:47px;font-size:3rem}.a{top:15px;position:fixed;pointer-events:none}.j{width:120px;height:90px;margin:50px;background:rgba(216,0,15,.8);-webkit-transform-origin:50%-100px;-webkit-animation:swing 5s infinite ease-in-out;box-shadow:-5px 5px 50px 4px#fa6c00;border-radius:50%50%}.c{width:100px;margin:12px 8px 8px 8px}.c,.b{border-radius:50%50%;border:2px solid#dc8f03;height:90px}.b{width:60px;margin:-4px 8px 8px 20px}.d{top:-65px;left:60px;width:2px;height:65px}.i,.d{background:#dc8f03}.i,.d,.z,.h,.j:before{position:absolute}.j,.g{position:relative}.g{width:5px;height:20px;margin:-5px 0 0 59px;-webkit-animation:swing 3s infinite ease-in-out;-webkit-transform-origin:50%-45px}.n{-webkit-animation:swing 3s infinite ease-in-out}.M{-webkit-animation:swing 4s infinite ease-in-out}.N{-webkit-animation:swing 2s infinite ease-in-out}.g,.h{background:orange;border-radius:0 0 5px 5px}.i{top:14px;height:10px;border-radius:50%}.i,.h{left:-2px;width:10px}.h{top:18px;height:35px}.j:before{top:-7px;left:29px;height:12px;width:60px;content:" ";display:block;border-radius:5px 5px 0 0;border:solid 1px#dc8f03;background:linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#dc8f03)}.e{font-size:3.5rem;color:#F8FF00;font-weight:700;line-height:95px;text-align:center}.z{top:150px;left:0px;line-height:70px;background-color:#ffffff}@-webkit-keyframes swing{0%{-webkit-transform:rotate(-15deg)}50%{-webkit-transform:rotate(15deg)}100%{-webkit-transform:rotate(-15deg)}}</style>

请添加图片描述

🎁9.2 成品2

<div><p class="b">欢迎来到小Z的博客!</p><img class="a"src="https://picture.gptkong.com/20240619/23170053c526f04519aae1ebdb8538628e.png"><p><img class="a c"src="https://img-blog.csdnimg.cn/direct/a7710295c48b4f13aba07433c5a96ffe.gif#pic_center"></p><style>.toolbar-container{ background:pink;}#userSkin.skin-ai .user-profile-head{background-image:none;}#userSkin.skin-ai{background:url(https://picweboss-app.gracg.com/2001697768_193a7c1ebf7da2261f26ef74aa348aa5oss.jpg_1200w.jpg) no-repeat;background-size: cover;background-attachment: fixed}.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} 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-achievement i{background-image: url(https://picture.gptkong.com/20240620/1615443ae4ce9d407facabf2bd0557c45c.png)!important}.a,.b{position: absolute;height:165px;top: -260px; width:165px;left:-15px} li>div{font-family:STXingkai!important;font-size:1.7em!important;color:red!important} .b{height:70px;width:900px;top: -276px;left: 231px;;font-family:华文行楷;font-size:100px;color:black}.c{height:252px;top: 674px; width:450px;left:0px}.introduction-fold>span{font-family:FZYaoti;color:blue;font-weight: bold} em{font-family:STXingkai}.aside-common-box-achievement span{ font-family: STHupo;}.influence-left span,.active,.influence-bottom-box dd,.influence-bottom-box dt{
    font-family:STLiti!important;font-size:23px!important;font-weight: bold}</style></div>

在这里插入图片描述

🎁9.3 成品3

在成品2的基础上删了一些样式加入灯笼

<div><p class="l">欢迎来到小Z的博客!</p><img class="a1  a2"src="https://picture.gptkong.com/20240619/23170053c526f04519aae1ebdb8538628e.png"><div class="a"style="left: 1%;"><div class="j"><div class="d"></div><div class="c"><div class="b"><div class="e">感<div class="e"style="line-height: 70px;color:black;">遇见即是上上签</div></div></div></div><div class="f g"><div class="h"></div><div class="i"></div></div></div></div><div class="a"style="left: 9.25%;"><div class="j N"><div class="d"></div><div class="c"><div class="b"><div class="e">谢<div class="e"style="line-height: 70px;color:red;">未来可期</div></div></div><div class="f g"><div class="h"></div><div class="i"></div></div></div></div><style type="text/css">.a{top:15px;position:fixed;pointer-events:none}.j{width:120px;height:90px;margin:50px;background:rgba(216,0,15,.8);-webkit-transform-origin:50%-100px;-webkit-animation:swing 3s infinite ease-in-out;box-shadow:-5px 5px 50px 4px#fa6c00}.c{width:100px;margin:12px 8px 8px 8px}.i,.c,.b,.j{border-radius:50%}.c,.b{border:2px solid#dc8f03;height:90px}.b{width:60px;margin:-4px 8px 8px 20px}.d{top:-65px;left:60px;width:2px;height:65px}.i,.d{background:#dc8f03}.i,.d,.z,.h,.j::before{position:absolute}.j,.g{position:relative}.g{width:5px;height:20px;margin:-5px 0 0 59px;-webkit-animation:swing 3s infinite ease-in-out;-webkit-transform-origin:50%-45px}.N{-webkit-animation:swing 2s infinite ease-in-out}.g,.h{background:orange;border-radius:0 0 5px 5px}.i{top:14px;height:10px}.i,.h{left:-2px;width:10px}.h{top:18px;height:35px}.j:before{top:-7px;left:29px;height:12px;width:60px;content:" ";display:block;border-radius:5px 5px 0 0;border:solid 1px#dc8f03;background:linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#dc8f03)}.e{font-size:3.5rem;color:#F8FF00;font-weight:700;line-height:95px;text-align:center;font-family:华文行楷}@-webkit-keyframes swing{0%{-webkit-transform:rotate(-15deg)}50%{-webkit-transform:rotate(15deg)}100%{-webkit-transform:rotate(-15deg)}}.a2{height:165px;top:-247px;width:165px;left:-15px;display:inline-block;position:absolute}#userSkin.skin-ai{background:url(https://picweboss-app.gracg.com/729291_c398f01b5b6c42709d578864354f4569_orgpic.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:rgb(173, 255, 238, 0.3) !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.1)!important}  .introduction-fold[data-v-d1dbb6f8] {color: rgb(255, 0, 128, 1)!important;font-family:华文行楷;font-size:1.7em!important} p[data-v-46274ba1],h4[data-v-6fe2b6a7],.blink-list-bottom[data-v-46274ba1],.blog-list-box .blog-list-content[data-v-6fe2b6a7]  { font-weight: bold; font-family:华文行楷;font-size:1.8em!important}.l{position:absolute;height:70px;width:900px;top: -260px;left: 231px;;font-family:华文行楷;font-size:100px;color:black}.toolbar-container {
background:#BFF1FA;}</style>

在这里插入图片描述

🎁9.4 成品4

<div><p class="l">欢迎来到小Z的博客!</p><img class="a1  a2"src="https://picture.gptkong.com/20240619/23170053c526f04519aae1ebdb8538628e.png"><div class="a"style="left: 1%;"><div class="j"><div class="d"></div><div class="c"><div class="b"><div class="e">感<div class="e"style="line-height: 70px;color:pink;">遇见即是上上签</div></div></div></div><div class="f g"><div class="h"></div><div class="i"></div></div></div></div><div class="a"style="left: 9.25%;"><div class="j N"><div class="d"></div><div class="c"><div class="b"><div class="e">谢<div class="e"style="line-height: 70px;color:red;">未来可期</div></div></div><div class="f g"><div class="h"></div><div class="i"></div></div></div></div><style type="text/css">.a{top:15px;position:fixed;pointer-events:none}.j{width:120px;height:90px;margin:50px;background:rgba(216,0,15,.8);-webkit-transform-origin:50%-100px;-webkit-animation:swing 3s infinite ease-in-out;box-shadow:-5px 5px 50px 4px#fa6c00}.c{width:100px;margin:12px 8px 8px 8px}.i,.c,.b,.j{border-radius:50%}.c,.b{border:2px solid#dc8f03;height:90px}.b{width:60px;margin:-4px 8px 8px 20px}.d{top:-65px;left:60px;width:2px;height:65px}.i,.d{background:#dc8f03}.i,.d,.z,.h,.j::before{position:absolute}.j,.g{position:relative}.g{width:5px;height:20px;margin:-5px 0 0 59px;-webkit-animation:swing 3s infinite ease-in-out;-webkit-transform-origin:50%-45px}.N{-webkit-animation:swing 2s infinite ease-in-out}.g,.h{background:orange;border-radius:0 0 5px 5px}.i{top:14px;height:10px}.i,.h{left:-2px;width:10px}.h{top:18px;height:35px}.j:before{top:-7px;left:29px;height:12px;width:60px;content:" ";display:block;border-radius:5px 5px 0 0;border:solid 1px#dc8f03;background:linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#dc8f03)}.e{font-size:3.5rem;color:#F8FF00;font-weight:700;line-height:95px;text-align:center;font-family:华文行楷}@-webkit-keyframes swing{0%{-webkit-transform:rotate(-15deg)}50%{-webkit-transform:rotate(15deg)}100%{-webkit-transform:rotate(-15deg)}}.a2{height:165px;top:-268px;width:165px;left:-15px;display:inline-block;position:absolute}#userSkin.skin-ai{background:url(https://picweboss-app.gracg.com/1563372174_1_31999086712bba06a8f9694064a26540.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,.show-more-introduction-fold,.address, .user-profile-head-name-vip,.blog-list-box .blog-list-content[data-v-d1dbb6f8]{color:#00FFFD!important;font-family:STXingkai!important;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.1)!important}  .introduction-fold[data-v-d1dbb6f8] {color: rgb(255, 0, 128, 1)!important;font-family:华文行楷;font-size:1.7em!important} p[data-v-46274ba1],h4[data-v-6fe2b6a7],.blink-list-bottom[data-v-46274ba1],.blog-list-box .blog-list-content[data-v-6fe2b6a7]  { font-weight: bold; font-family:华文行楷;font-size:1.8em!important}.l{position:absolute;height:70px;width:900px;top: -260px;left: 231px;;font-family:华文行楷;font-size:100px;color:black}.toolbar-container {
background:rgba(187, 173, 217, 0.5) !important;}</style>

在这里插入图片描述

🎁9.5 成品5

<div><p class="l">欢迎来到小Z的博客!</p><img class="a1  a2"src="https://picture.gptkong.com/20240619/23170053c526f04519aae1ebdb8538628e.png"><div class="a"style="left: 1%;"><div class="j"><div class="d"></div><div class="c"><div class="b"><div class="e">感<div class="e"style="line-height: 70px;color:#1809EC;">遇见即是上上签</div></div></div></div><div class="f g"><div class="h"></div><div class="i"></div></div></div></div><div class="a"style="left: 9.25%;"><div class="j N"><div class="d"></div><div class="c"><div class="b"><div class="e">谢<div class="e"style="line-height: 70px;color:red;">未来可期</div></div></div><div class="f g"><div class="h"></div><div class="i"></div></div></div></div><style type="text/css">.a{top:15px;position:fixed;pointer-events:none}.j{width:120px;height:90px;margin:50px;background:rgba(216,0,15,.8);-webkit-transform-origin:50%-100px;-webkit-animation:swing 3s infinite ease-in-out;box-shadow:-5px 5px 50px 4px#fa6c00}.c{width:100px;margin:12px 8px 8px 8px}.i,.c,.b,.j{border-radius:50%}.c,.b{border:2px solid#dc8f03;height:90px}.b{width:60px;margin:-4px 8px 8px 20px}.d{top:-65px;left:60px;width:2px;height:65px}.i,.d{background:#dc8f03}.i,.d,.z,.h,.j::before{position:absolute}.j,.g{position:relative}.g{width:5px;height:20px;margin:-5px 0 0 59px;-webkit-animation:swing 3s infinite ease-in-out;-webkit-transform-origin:50%-45px}.N{-webkit-animation:swing 2s infinite ease-in-out}.g,.h{background:orange;border-radius:0 0 5px 5px}.i{top:14px;height:10px}.i,.h{left:-2px;width:10px}.h{top:18px;height:35px}.j:before{top:-7px;left:29px;height:12px;width:60px;content:" ";display:block;border-radius:5px 5px 0 0;border:solid 1px#dc8f03;background:linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#dc8f03)}.e{font-size:3.5rem;color:#F8FF00;font-weight:700;line-height:95px;text-align:center;font-family:华文行楷}@-webkit-keyframes swing{0%{-webkit-transform:rotate(-15deg)}50%{-webkit-transform:rotate(15deg)}100%{-webkit-transform:rotate(-15deg)}}.a2{height:165px;top:-268px;width:165px;left:-15px;display:inline-block;position:absolute}#userSkin.skin-ai{background:url(https://picweboss-app.gracg.com/2001540014_f9972d5aa535a80cae8e48f94bc6f3d5oss.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,.show-more-introduction-fold,.address, .user-profile-head-name-vip,.blog-list-box .blog-list-content[data-v-d1dbb6f8]{color:#00FFFD!important;font-family:STXingkai!important;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.1)!important}  .introduction-fold[data-v-d1dbb6f8] {color: rgb(255, 0, 128, 1)!important;font-family:华文行楷;font-size:1.7em!important}.user-profile-statistics-num,.user-profile-statistics-name{font-weight: bold;font-family:STCaiyun!important;font-size:2em!important;color:#09EC95!important}.l{position:absolute;height:70px;width:900px;top: -260px;left: 231px;;font-family:华文行楷;font-size:100px;color:black}.toolbar-container {background:rgba(187, 173, 217, 0.5) !important;}</style>

在这里插入图片描述

🎁9.6 成品6

<div><p class="l">欢迎来到小Z的博客!</p><img class="a1  a2"src="https://picture.gptkong.com/20240619/23170053c526f04519aae1ebdb8538628e.png"><div class="a"style="left: 1%;"><div class="j"><div class="d"></div><div class="c"><div class="b"><div class="e">感<div class="e"style="color:#05FFAE;">遇见即是上上签</div></div></div></div><div class="f g"><div class="h"></div><div class="i"></div></div></div></div><div class="a"style="left: 9.25%;"><div class="j N"><div class="d"></div><div class="c"><div class="b"><div class="e">谢<div class="e"style="color:red;">未来可期</div></div></div><div class="f g"><div class="h"></div><div class="i"></div></div></div></div><style>.a{top:15px;position:fixed;pointer-events:none}.j{width:120px;height:90px;margin:50px;background:rgba(216,0,15,.8);-webkit-transform-origin:50%-100px;-webkit-animation:swing 3s infinite ease-in-out;box-shadow:-5px 5px 50px 4px#fa6c00}.c{width:100px;margin:12px 8px 8px 8px}.i,.c,.b,.j{border-radius:50%}.c,.b{border:2px solid#dc8f03;height:90px}.b{width:60px;margin:-4px 8px 8px 20px}.d{top:-65px;left:60px;width:2px;height:65px}.i,.d{background:#dc8f03}.i,.d,.z,.h,.j::before,.a2,.l{position:absolute}.j,.g{position:relative}.g{width:5px;height:20px;margin:-5px 0 0 59px;-webkit-animation:swing 3s infinite ease-in-out;-webkit-transform-origin:50%-45px}.N{-webkit-animation:swing 2s infinite ease-in-out}.g,.h{background:orange;border-radius:0 0 5px 5px}.i{top:14px;height:10px}.i,.h{left:-2px;width:10px}.h{top:18px;height:35px}.j:before{top:-7px;left:29px;height:12px;width:60px;content:" ";display:block;border-radius:5px 5px 0 0;border:solid 1px#dc8f03;background:linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#dc8f03)}@-webkit-keyframes swing{0%{-webkit-transform:rotate(-15deg)}50%{-webkit-transform:rotate(15deg)}100%{-webkit-transform:rotate(-15deg)}}.a2{height:165px;top:-270px;width:165px;left:-15px;display:inline-block}#userSkin.skin-ai{background:url(https://picweboss-app.gracg.com/1546673671_1_ac9b83daba22306e2bffaf0a099b0af7.png_1200w.jpg) no-repeat;background-size: cover;background-attachment: fixed}#userSkin.skin-ai .user-profile-head{background-image:none;}.user-influence-list ul li,.user-profile-head-info,.navList,.blog-second-list,.blog-list-box,.blink-list-box,.sub-people-list-box,.live-list-box,.resources-list-box,.answer-list-box,.ask-second-list,.answer-list-box,.navList-box ,.sub-second-list{background:none!important}h4[data-v-6fe2b6a7],.user-profile-head-name-vip,.aside-common-box-head{color:#F8FF00!important;font-family:华文行楷!important;font-size:2em!important}.user-profile-aside-common-box{background: rgba(187, 173, 217, 0.5) !important} .blog_extension{background: #ffffff3b !important}.el-input__inner{    background: #f9020200 !important}#userSkin.skin-cookblue .user-profile-head{background:none;}.introduction-fold{color:#00FFFD!important;font-family:华文行楷!important;font-size:1.6em!important;font-weight: bold}p[data-v-46274ba1],.blink-list-bottom,.user-profile-statistics-num,.user-profile-statistics-name{font-weight: bold;font-family:STCaiyun!important;font-size:1.8em!important;color:#09EC95!important}.l{height:10px;width:900px;top: -281px;left: 231px;font-family:华文行楷;font-size:100px;color:rgb(255, 0, 128, 1)}.toolbar-container {background:#CAE1FF!important;}.e{line-height: 70px;font-size:3.5rem;color:#F8FF00;font-weight:700;line-height:95px;text-align:center;font-family:华文行楷}.interest-area-sub span,.blog-list-content,.navList li,.show-more-introduction-fold,.address{color: #FF00FE!important;font-family:FZShuTi!important;font-size:1.8em;font-weight: bold}li>div{font-family:STXingkai!important;font-size:1.7em!important;color:red!important}.aside-common-box-achievement span{font-family:STHupo}.special-column-name span,.influence-left span,.view-time-box,.two-px,.active,.interest-area-name,.influence-bottom-box dd,.influence-bottom-box dt{font-family:STLiti!important;font-size:23px!important;font-weight:bold;color:#00FFFD!important}.blog-list-content{font-size:1.5em!important}.two-px{font-size:1.1em!important}</style>

在这里插入图片描述

🎁9.7 成品7

<div><p class="l">欢迎来到小Z的博客!</p><img class="a2"src="https://picture.gptkong.com/20240623/19386364af8a8c4f4b911181417095192f.png"><div class="a"style="left: 1%;"><div class="j"><div class="d"></div><div class="c"><div class="b"><div class="e">相<div class="e"style="color:#05FFAE;">遇见即是上上签</div></div></div></div><div class="f g"><div class="h"></div><div class="i"></div></div></div></div><div class="a"style="left: 9.25%;"><div class="j N"><div class="d"></div><div class="c"><div class="b"><div class="e">信<div class="e"style="color:red;">未来可期</div></div></div><div class="f g"><div class="h"></div><div class="i"></div></div></div></div><style>.a{top:15px;position:fixed;pointer-events:none}.j{width:120px;height:90px;margin:50px;background:rgba(216,0,15,.8);-webkit-transform-origin:50%-100px;-webkit-animation:swing 3s infinite ease-in-out;box-shadow:-5px 5px 50px 4px#fa6c00}.c{width:100px;margin:12px 8px 8px 8px}.i,.c,.b,.j{border-radius:50%}.c,.b{border:2px solid#dc8f03;height:90px}.b{width:60px;margin:-4px 8px 8px 20px}.d{top:-65px;left:60px;width:2px;height:65px}.i,.d{background:#dc8f03}.i,.d,.z,.h,.j::before,.a2,.l{position:absolute}.j,.g{position:relative}.g{width:5px;height:20px;margin:-5px 0 0 59px;-webkit-animation:swing 3s infinite ease-in-out;-webkit-transform-origin:50%-45px}.N{-webkit-animation:swing 2s infinite ease-in-out}.g,.h{background:orange;border-radius:0 0 5px 5px}.i{top:14px;height:10px}.i,.h{left:-2px;width:10px}.h{top:18px;height:35px}.j:before{top:-7px;left:29px;height:12px;width:60px;content:" ";display:block;border-radius:5px 5px 0 0;border:solid 1px#dc8f03;background:linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#dc8f03)}@-webkit-keyframes swing{0%{-webkit-transform:rotate(-15deg)}50%{-webkit-transform:rotate(15deg)}100%{-webkit-transform:rotate(-15deg)}}.a2{height:156px;top:-269px;left:-8px;display:inline-block}#userSkin.skin-ai{background:url(https://t.doruo.cn/1eadht6ww) no-repeat;background-size: cover;background-attachment: fixed}#userSkin.skin-ai .user-profile-head{background-image:none;}.user-influence-list ul li,.user-profile-head-info,.navList,.blog-second-list,.blog-list-box,.blink-list-box,.sub-people-list-box,.live-list-box,.resources-list-box,.answer-list-box,.ask-second-list,.answer-list-box,.navList-box ,.sub-second-list{background:none!important}h4[data-v-6fe2b6a7],.user-profile-head-name-vip,.aside-common-box-head{color:#F8FF00!important;font-family:华文行楷!important;font-size:2em!important}.user-profile-aside-common-box{background: rgba(187, 173, 217, 0.5) !important} .blog_extension{background: #ffffff3b !important}.el-input__inner{    background: #f9020200 !important}#userSkin.skin-cookblue .user-profile-head{background:none;}.introduction-fold{color:#00FFFD!important;font-family:华文行楷!important;font-size:1.6em!important;font-weight: bold}p[data-v-46274ba1],.blink-list-bottom,.user-profile-statistics-num,.user-profile-statistics-name{font-weight: bold;font-family:STCaiyun!important;font-size:1.8em!important;color:#09EC95!important}.l{height:10px;width:925px;top: -290px;left: 231px;font-family:FZShuTi;font-size:100px;color:black;font-weight:bold}.toolbar-container {background:#CAE1FF!important;}.e{line-height: 70px;font-size:3.5rem;color:#F8FF00;font-weight:700;line-height:95px;text-align:center;font-family:华文行楷}.interest-area-sub span,.blog-list-content,.navList li,.show-more-introduction-fold,.address{color: #FF00FE!important;font-family:FZShuTi!important;font-size:1.8em;font-weight: bold}li>div{font-family:STXingkai!important;font-size:1.7em!important;color:red!important}.aside-common-box-achievement span{font-family:STHupo}.special-column-name span,.influence-left span,.view-time-box,.two-px,.active,.interest-area-name,.influence-bottom-box dd,.influence-bottom-box dt{font-family:STLiti!important;font-size:23px!important;font-weight:bold;color:#00FFFD!important}.blog-list-content{font-size:1.5em!important}.two-px{font-size:1.1em!important}</style>

在这里插入图片描述

🎁9.8 成品8

<div><p class="l">欢迎来到小Z的博客!</p><img class="a"src="https://picture.gptkong.com/20240623/19386364af8a8c4f4b911181417095192f.png"><img class="b"src="https://userblink.csdnimg.cn/direct/6504a995cf7e4deb80f5bba7ca4bdecf.gif"><img class="d"src="https://userblink.csdnimg.cn/direct/5f5f7bc3835e46a9980751aa9b8fca41.png"><img class="c"src="https://userblink.csdnimg.cn/direct/14e266edffd2465a834a59a0a25a5393.gif"><style>.d,.c,.b,.a,.l{position: absolute}.a{height:156px;top:-269px;left:-8px}#userSkin.skin-ai{background:url(https://t.doruo.cn/1eadht6ww) no-repeat;background-size: cover;background-attachment: fixed}#userSkin.skin-ai .user-profile-head{background-image:none;}.user-influence-list ul li,.user-profile-head-info,.navList,.blog-second-list,.blog-list-box,.blink-list-box,.sub-people-list-box,.live-list-box,.resources-list-box,.answer-list-box,.ask-second-list,.answer-list-box,.navList-box ,.sub-second-list{background:none!important}h4[data-v-6fe2b6a7],.user-profile-head-name-vip,.aside-common-box-head{color:#F8FF00!important;font-family:华文行楷!important;font-size:2em!important}.user-profile-aside-common-box{background: rgba(187, 173, 217, 0.5) !important} .blog_extension{background: #ffffff3b !important}.el-input__inner{    background: #f9020200 !important}#userSkin.skin-cookblue .user-profile-head{background:none;}.introduction-fold{color:#00FFFD!important;font-family:华文行楷!important;font-size:1.6em!important;font-weight: bold}p[data-v-46274ba1],.blink-list-bottom,.user-profile-statistics-num,.user-profile-statistics-name{font-weight: bold;font-family:STCaiyun!important;font-size:1.8em!important;color:#09EC95!important}.l{height:0px;width:925px;top: -290px;left: 231px;font-family:FZShuTi;font-size:100px;color:black;font-weight:bold}.toolbar-container {background:#CAE1FF!important;}.interest-area-sub span,.blog-list-content,.navList li,.show-more-introduction-fold,.address{color: #FF00FE!important;font-family:FZShuTi!important;font-size:1.8em;font-weight: bold}li>div{font-family:STXingkai!important;font-size:1.7em!important;color:red!important}.aside-common-box-achievement span{font-family:STHupo}.special-column-name span,.influence-left span,.view-time-box,.two-px,.active,.interest-area-name,.influence-bottom-box dd,.influence-bottom-box dt{font-family:STLiti!important;font-size:23px!important;font-weight:bold;color:#00FFFD!important}.blog-list-content{font-size:1.5em!important}.two-px{font-size:1.1em!important}.b{height:71px;top:-304px;left:168px}.c{height:77px;top:-314px;left:1131px}.aside-common-box-content i{background-image:url(https://userblink.csdnimg.cn/direct/8024c1a120d04f80bb02d5ad7ad7d821.png)!important}.d{height:120px;top:-127px;left:136px}</style>

在这里插入图片描述

🎁9.9 成品9

<div><p class="l">欢迎来到小Z的博客!</p><img class="a"src="https://picture.gptkong.com/20240623/19386364af8a8c4f4b911181417095192f.png"><img class="f"src="https://picture.gptkong.com/20240625/00411a47198a0a442397d8864383d5044e.png"><img class="b"src="https://userblink.csdnimg.cn/direct/0e93a257ae354caab04c9e2bb049bd1f.gif"><img class="d"src="https://userblink.csdnimg.cn/direct/5f5f7bc3835e46a9980751aa9b8fca41.png"><img class="c"src="https://userblink.csdnimg.cn/direct/a494ddd74d5a4231b1e19ac830709b53.gif"></div><style>.f,.e,.d,.c,.b,.a,.l{position: absolute}.f{height:39px;top:37.2%;left:75%}.a{height:156px;top:-22.4%;left:-3.4%}#userSkin.skin-ai{background:url(https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExZTVoOHJhbGw5NmZjM2hoMTRoaHNydHc3bzVjOHhvNGluNmQ5aHVicSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/uOuiK4F5zZkZ2/giphy.webp) no-repeat;background-size: cover;background-attachment: fixed}#userSkin.skin-ai .user-profile-head{background-image:none}.user-influence-list ul li,.user-profile-head-info,.navList,.blog-second-list,.blog-list-box,.blink-list-box,.sub-people-list-box,.live-list-box,.resources-list-box,.answer-list-box,.ask-second-list,.answer-list-box,.navList-box ,.sub-second-list{background:none!important}h4[data-v-6fe2b6a7],.user-profile-head-name-vip,.aside-common-box-head{color:#F8FF00!important;font-family:华文行楷!important;font-size:2em!important}.user-profile-aside-common-box{background: rgba(187, 173, 217, 0.5) !important} .blog_extension{background: #ffffff3b !important}.el-input__inner{    background: #f9020200 !important}#userSkin.skin-cookblue .user-profile-head{background:none}.introduction-fold{color:#00FFFD!important;font-family:华文行楷!important;font-size:1.6em!important;font-weight: bold}p[data-v-46274ba1],.blink-list-bottom,.user-profile-statistics-num,.user-profile-statistics-name{font-weight: bold;font-family:STCaiyun!important;font-size:1.8em!important;color:#09EC95!important}.l{height:0px;width:925px;top: -290px;left: 231px;font-family:FZShuTi;font-size:100px;color:black;font-weight:bold}.toolbar-container {background:#CAE1FF!important;}.interest-area-sub span,.blog-list-content,.navList li,.show-more-introduction-fold,.address{color: #FF00FE!important;font-family:FZShuTi!important;font-size:1.8em;font-weight: bold}li>div,div>em{font-family:STXingkai!important;font-size:1.3em!important;color:red!important}.aside-common-box-achievement span{font-family:STHupo!important}.special-column-name span,.influence-left span,.view-time-box,.two-px,.active,.interest-area-name,.influence-bottom-box dd,.influence-bottom-box dt{font-family:STLiti!important;font-size:23px!important;font-weight:bold;color:#00FFFD!important}.blog-list-content{font-size:1.5em!important}.two-px{font-size:1.1em!important}.b{height:71px;top:-25%;left:50%}.c{height:77px;top:-26%;left:337%}.d{height:120px;top:-10%;left:40%}.e{width:1000px;height:100px;top:-97px;left:336px}.user-gender-male{background-image:url(https://userblink.csdnimg.cn/direct/7b0bd0879e944cd2b8be84b732d6529a.png)!important;width:19px!important}.aside-common-box-achievement li:first-child i {background-image:url(https://picture.gptkong.com/20240620/1615443ae4ce9d407facabf2bd0557c45c.png)!important}.aside-common-box-achievement li:nth-child(2) i{background-image:url(https://userblink.csdnimg.cn/direct/8024c1a120d04f80bb02d5ad7ad7d821.png)!important}.aside-common-box-achievement li:nth-child(3) i{background-image:url(https://userblink.csdnimg.cn/direct/c64f1fd3c16b42df8f561fc024170c77.png)!important}.aside-common-box-achievement li:nth-child(4) i{background-image:url(https://picture.gptkong.com/20240625/0056d2d4bd1ba744ffae9915d6ceb203ff.png)!important}.aside-common-box-achievement li:nth-child(5) i{background-image:url(https://userblink.csdnimg.cn/direct/eba7c28222a14bdead3ef0bcad0c40af.png)!important}.user-top-list li{background-image:url(https://picture.gptkong.com/20240625/004798e3b810084c71b2e8b2c0cddea299.png)!important}.comment-num,.give-like-num,.view-num{font-family:STHupo!important;color:#05FFAE!important}</style>

在这里插入图片描述

🎁9.10 成品10

<div><iframe class="g" frameborder="no" border="0" width="280" height="220" src="//music.163.com/outchain/player?type=0&id=12225351807&auto=1&height=430"></iframe><p class="l">欢迎来到小Z的博客!</p><img class="a"src="https://picture.gptkong.com/20240623/19386364af8a8c4f4b911181417095192f.png"><img class="f"src="https://picture.gptkong.com/20240625/00411a47198a0a442397d8864383d5044e.png"><img class="d"src="https://userblink.csdnimg.cn/direct/5f5f7bc3835e46a9980751aa9b8fca41.png"></div><style>.f,.e,.d,.a,.l{position: absolute}.f{height:39px;top:38.7%;left:75%}.a{height:156px;top:-23.4%;left:-3.4%}#userSkin.skin-ai{background:url(https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExZTVoOHJhbGw5NmZjM2hoMTRoaHNydHc3bzVjOHhvNGluNmQ5aHVicSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/uOuiK4F5zZkZ2/giphy.webp) no-repeat;background-size: cover;background-attachment: fixed}#userSkin.skin-ai .user-profile-head{background-image:none}.user-influence-list ul li,.user-profile-head-info,.navList,.blog-second-list,.blog-list-box,.blink-list-box,.sub-people-list-box,.live-list-box,.resources-list-box,.answer-list-box,.ask-second-list,.answer-list-box,.navList-box ,.sub-second-list{background:none!important}h4[data-v-6fe2b6a7],.user-profile-head-name-vip,.aside-common-box-head{color:#F8FF00!important;font-family:华文行楷!important;font-size:2em!important}.user-profile-aside-common-box{background: rgba(187, 173, 217, 0.5) !important} .blog_extension{background: #ffffff3b !important}.el-input__inner{    background: #f9020200 !important}#userSkin.skin-cookblue .user-profile-head{background:none}.introduction-fold{color:#00FFFD!important;font-family:华文行楷!important;font-size:1.6em!important;font-weight: bold}p[data-v-46274ba1],.blink-list-bottom,.user-profile-statistics-num,.user-profile-statistics-name{font-weight: bold;font-family:STCaiyun!important;font-size:1.8em!important;color:#09EC95!important}.l{height:0px;width:925px;top: -290px;left: 231px;font-family:FZShuTi;font-size:100px;color:black;font-weight:bold}.toolbar-container {background:#CAE1FF!important;}.interest-area-sub span,.blog-list-content,.navList li,.show-more-introduction-fold,.address{color: #FF00FE!important;font-family:FZShuTi!important;font-size:1.8em;font-weight: bold}li>div,div>em{font-family:STXingkai!important;font-size:1.3em!important;color:red!important}.aside-common-box-achievement span{font-family:STHupo!important}.special-column-name span,.influence-left span,.view-time-box,.two-px,.active,.interest-area-name,.influence-bottom-box dd,.influence-bottom-box dt{font-family:STLiti!important;font-size:23px!important;font-weight:bold;color:#00FFFD!important}.blog-list-content{font-size:1.5em!important}.two-px{font-size:1.1em!important}.d{height:120px;top:-10%;left:40%}.e{width:1000px;height:100px;top:-97px;left:336px}.user-gender-male{background-image:url(https://userblink.csdnimg.cn/direct/7b0bd0879e944cd2b8be84b732d6529a.png)!important;width:19px!important}.aside-common-box-achievement li:first-child i {background-image:url(https://picture.gptkong.com/20240620/1615443ae4ce9d407facabf2bd0557c45c.png)!important}.aside-common-box-achievement li:nth-child(2) i{background-image:url(https://userblink.csdnimg.cn/direct/8024c1a120d04f80bb02d5ad7ad7d821.png)!important}.aside-common-box-achievement li:nth-child(3) i{background-image:url(https://userblink.csdnimg.cn/direct/c64f1fd3c16b42df8f561fc024170c77.png)!important}.aside-common-box-achievement li:nth-child(4) i{background-image:url(https://picture.gptkong.com/20240625/0056d2d4bd1ba744ffae9915d6ceb203ff.png)!important}.aside-common-box-achievement li:nth-child(5) i{background-image:url(https://userblink.csdnimg.cn/direct/eba7c28222a14bdead3ef0bcad0c40af.png)!important}.user-top-list li{background-image:url(https://picture.gptkong.com/20240625/004798e3b810084c71b2e8b2c0cddea299.png)!important}.comment-num,.give-like-num,.view-num{font-family:STHupo!important;color:#05FFAE!important}.g{position:fixed;bottom:27%;left:0%;z-index:9999}</style>

在这里插入图片描述

🎁9.11 成品11

<div><iframe class="g" frameborder="no" border="0" width="280" height="220" src="//music.163.com/outchain/player?type=0&id=12225351807&auto=1&height=430"></iframe><p class="l">欢迎来到小Z的博客!</p><img class="a"src="https://picture.gptkong.com/20240623/19386364af8a8c4f4b911181417095192f.png"><img class="d"src="https://userblink.csdnimg.cn/direct/5f5f7bc3835e46a9980751aa9b8fca41.png"></div><style>.e,.d,.a,.l{position: absolute}.a{height:156px;top:-23.4%;left:-3.4%}#userSkin.skin-ai{background:url(https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExZTVoOHJhbGw5NmZjM2hoMTRoaHNydHc3bzVjOHhvNGluNmQ5aHVicSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/uOuiK4F5zZkZ2/giphy.webp) no-repeat;background-size: cover;background-attachment: fixed}#userSkin.skin-ai .user-profile-head{background-image:none}.user-influence-list ul li,.user-profile-head-info,.navList,.blog-second-list,.blog-list-box,.blink-list-box,.sub-people-list-box,.live-list-box,.resources-list-box,.answer-list-box,.ask-second-list,.answer-list-box,.navList-box ,.sub-second-list{background:none!important}h4[data-v-6fe2b6a7],.user-profile-head-name-vip,.aside-common-box-head{color:#F8FF00!important;font-family:华文行楷!important;font-size:2em!important}.user-profile-aside-common-box{background: rgba(187, 173, 217, 0.5) !important} .blog_extension{background: #ffffff3b !important}.el-input__inner{    background: #f9020200 !important}#userSkin.skin-cookblue .user-profile-head{background:none}.introduction-fold{color:#00FFFD!important;font-family:华文行楷!important;font-size:1.6em!important;font-weight: bold}p[data-v-46274ba1],.blink-list-bottom,.user-profile-statistics-num,.user-profile-statistics-name{font-weight: bold;font-family:STCaiyun!important;font-size:1.8em!important;color:#09EC95!important}.l{height:0px;width:925px;top: -290px;left: 231px;font-family:FZShuTi;font-size:100px;color:black;font-weight:bold}.toolbar-container {background:#CAE1FF!important;}.interest-area-sub span,.blog-list-content,.navList li,.show-more-introduction-fold,.address{color: #FF00FE!important;font-family:FZShuTi!important;font-size:1.8em;font-weight: bold}li>div,div>em{font-family:STXingkai!important;font-size:1.3em!important;color:red!important}.aside-common-box-achievement span{font-family:STHupo!important}.special-column-name span,.influence-left span,.view-time-box,.two-px,.active,.interest-area-name,.influence-bottom-box dd,.influence-bottom-box dt{font-family:STLiti!important;font-size:23px!important;font-weight:bold;color:#00FFFD!important}.blog-list-content{font-size:1.5em!important}.two-px{font-size:1.1em!important}.d{height:120px;top:-10%;left:40%}.e{width:1000px;height:100px;top:-97px;left:336px}.user-gender-male{background-image:url(https://userblink.csdnimg.cn/direct/7b0bd0879e944cd2b8be84b732d6529a.png)!important;width:19px!important}.aside-common-box-achievement li:first-child i {background-image:url(https://picture.gptkong.com/20240620/1615443ae4ce9d407facabf2bd0557c45c.png)!important}.aside-common-box-achievement li:nth-child(2) i{background-image:url(https://userblink.csdnimg.cn/direct/8024c1a120d04f80bb02d5ad7ad7d821.png)!important}.aside-common-box-achievement li:nth-child(3) i{background-image:url(https://userblink.csdnimg.cn/direct/c64f1fd3c16b42df8f561fc024170c77.png)!important}.aside-common-box-achievement li:nth-child(4) i{background-image:url(https://picture.gptkong.com/20240625/0056d2d4bd1ba744ffae9915d6ceb203ff.png)!important}.aside-common-box-achievement li:nth-child(5) i{background-image:url(https://picture.gptkong.com/20240626/151496b5bbeefc4d67b89d7b6578518fd2.png)!important}.user-top-list li{background-image:url(https://img-home.csdnimg.cn/images/20210414070017.png)!important}.comment-num,.give-like-num,.view-num{font-family:STHupo!important;color:#05FFAE!important}.g{position:fixed;bottom:27%;left:0%;z-index:9999}</style>

在这里插入图片描述

🎁9.12 成品12

<div><iframe class="g" frameborder="no" border="0" width="280" height="220" src="//music.163.com/outchain/player?type=0&id=12225351807&auto=1&height=430"></iframe><p class="l">欢迎来到小Z的博客!</p><img class="a"src="https://picture.gptkong.com/20240626/2203a336938ff749f0ad211b21ffb82a4d.png"><img class="d"src="https://userblink.csdnimg.cn/direct/5f5f7bc3835e46a9980751aa9b8fca41.png"></div><style>.e,.d,.a,.l{position: absolute}.a{height:156px;top:-22.7%;left:-3.4%}#userSkin.skin-ai{background:url(https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExZTVoOHJhbGw5NmZjM2hoMTRoaHNydHc3bzVjOHhvNGluNmQ5aHVicSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/uOuiK4F5zZkZ2/giphy.webp) no-repeat;background-size: cover;background-attachment: fixed}#userSkin.skin-ai .user-profile-head{background-image:none}.user-influence-list ul li,.user-profile-head-info,.navList,.blog-second-list,.blog-list-box,.blink-list-box,.sub-people-list-box,.live-list-box,.resources-list-box,.answer-list-box,.ask-second-list,.answer-list-box,.navList-box ,.sub-second-list{background:none!important}h4[data-v-6fe2b6a7],.user-profile-head-name-vip,.aside-common-box-head{color:#F8FF00!important;font-family:华文行楷!important;font-size:2em!important}.user-profile-aside-common-box{background: rgba(187, 173, 217, 0.5) !important} .blog_extension{background: #ffffff3b !important}.el-input__inner{    background: #f9020200 !important}#userSkin.skin-cookblue .user-profile-head{background:none}.introduction-fold{color:#00FFFD!important;font-family:华文行楷!important;font-size:1.6em!important;font-weight: bold}p[data-v-46274ba1],.blink-list-bottom,.user-profile-statistics-num,.user-profile-statistics-name{font-weight: bold;font-family:STCaiyun!important;font-size:1.8em!important;color:#09EC95!important}.l{height:0px;width:925px;top: -290px;left: 231px;font-family:FZShuTi;font-size:100px;color:black;font-weight:bold}.toolbar-container {background:#CAE1FF!important;}.interest-area-sub span,.blog-list-content,.navList li,.show-more-introduction-fold,.address{color: #FF00FE!important;font-family:FZShuTi!important;font-size:1.8em;font-weight: bold}li>div,div>em{font-family:STXingkai!important;font-size:1.3em!important;color:red!important}.aside-common-box-achievement span{font-family:STHupo!important}.special-column-name span,.influence-left span,.view-time-box,.two-px,.active,.interest-area-name,.influence-bottom-box dd,.influence-bottom-box dt{font-family:STLiti!important;font-size:23px!important;font-weight:bold;color:#00FFFD!important}.blog-list-content{font-size:1.5em!important}.two-px{font-size:1.1em!important}.d{height:120px;top:-10%;left:40%}.e{width:1000px;height:100px;top:-97px;left:336px}.user-gender-male{background-image:url(https://userblink.csdnimg.cn/direct/7b0bd0879e944cd2b8be84b732d6529a.png)!important;width:19px!important}.aside-common-box-achievement li:first-child i {background-image:url(https://picture.gptkong.com/20240620/1615443ae4ce9d407facabf2bd0557c45c.png)!important}.aside-common-box-achievement li:nth-child(2) i{background-image:url(https://userblink.csdnimg.cn/direct/8024c1a120d04f80bb02d5ad7ad7d821.png)!important}.aside-common-box-achievement li:nth-child(3) i{background-image:url(https://userblink.csdnimg.cn/direct/c64f1fd3c16b42df8f561fc024170c77.png)!important}.aside-common-box-achievement li:nth-child(4) i{background-image:url(https://picture.gptkong.com/20240625/0056d2d4bd1ba744ffae9915d6ceb203ff.png)!important}.aside-common-box-achievement li:nth-child(5) i{background-image:url(https://picture.gptkong.com/20240626/151496b5bbeefc4d67b89d7b6578518fd2.png)!important}.user-top-list li{background-image:url(https://img-home.csdnimg.cn/images/20210414070017.png)!important}.comment-num,.give-like-num,.view-num{font-family:STHupo!important;color:#05FFAE!important}.g{position:fixed;bottom:27%;left:0%;z-index:9999}</style>

在这里插入图片描述

🎁9.13 成品13 (解决下拉后相对定位错位问题)

原理在下面的第11点修复问题 有解释

<div><iframe class="g" frameborder="no" border="0" width="280" height="220" src="//music.163.com/outchain/player?type=0&id=12225351807&auto=1&height=430"></iframe></div><style>.e,.a{position: absolute}.a{height:156px;top:-21.8%;left:-3.4%}#userSkin.skin-ai{background:url(https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExZTVoOHJhbGw5NmZjM2hoMTRoaHNydHc3bzVjOHhvNGluNmQ5aHVicSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/uOuiK4F5zZkZ2/giphy.webp) no-repeat;background-size: cover;background-attachment: fixed}#userSkin.skin-ai .user-profile-head{background-image:none}.user-influence-list ul li,.user-profile-head-info,.navList,.blog-second-list,.blog-list-box,.blink-list-box,.sub-people-list-box,.live-list-box,.resources-list-box,.answer-list-box,.ask-second-list,.answer-list-box,.navList-box ,.sub-second-list{background:none!important}h4[data-v-6fe2b6a7],.user-profile-head-name-vip,.aside-common-box-head{color:#F8FF00!important;font-family:华文行楷!important;font-size:2em!important}.user-profile-aside-common-box{background: rgba(187, 173, 217, 0.5) !important} .blog_extension{background: #ffffff3b !important}.el-input__inner{    background: #f9020200 !important}#userSkin.skin-cookblue .user-profile-head{background:none}.introduction-fold{color:#00FFFD!important;font-family:华文行楷!important;font-size:1.6em!important;font-weight: bold}p[data-v-46274ba1],.blink-list-bottom,.user-profile-statistics-num,.user-profile-statistics-name{font-weight: bold;font-family:STCaiyun!important;font-size:1.8em!important;color:#09EC95!important}.toolbar-container {background:#CAE1FF!important;}.interest-area-sub span,.blog-list-content,.navList li,.show-more-introduction-fold,.address{color: #FF00FE!important;font-family:FZShuTi!important;font-size:1.8em;font-weight: bold}li>div,div>em{font-family:STXingkai!important;font-size:1.3em!important;color:red!important}.aside-common-box-achievement span{font-family:STHupo!important}.special-column-name span,.influence-left span,.view-time-box,.two-px,.active,.interest-area-name,.influence-bottom-box dd,.influence-bottom-box dt{font-family:STLiti!important;font-size:23px!important;font-weight:bold;color:#00FFFD!important}.blog-list-content{font-size:1.5em!important}.two-px{font-size:1.1em!important}.e{width:1000px;height:100px;top:-97px;left:336px}.user-gender-male{background-image:url(https://userblink.csdnimg.cn/direct/7b0bd0879e944cd2b8be84b732d6529a.png)!important;width:19px!important}.aside-common-box-achievement li:first-child i {background-image:url(https://picture.gptkong.com/20240620/1615443ae4ce9d407facabf2bd0557c45c.png)!important}.aside-common-box-achievement li:nth-child(2) i{background-image:url(https://userblink.csdnimg.cn/direct/8024c1a120d04f80bb02d5ad7ad7d821.png)!important}.aside-common-box-achievement li:nth-child(3) i{background-image:url(https://userblink.csdnimg.cn/direct/c64f1fd3c16b42df8f561fc024170c77.png)!important}.aside-common-box-achievement li:nth-child(4) i{background-image:url(https://picture.gptkong.com/20240625/0056d2d4bd1ba744ffae9915d6ceb203ff.png)!important}.aside-common-box-achievement li:nth-child(5) i{background-image:url(https://picture.gptkong.com/20240626/151496b5bbeefc4d67b89d7b6578518fd2.png)!important}.user-top-list li{background-image:url(https://img-home.csdnimg.cn/images/20210112062443.png)!important}.comment-num,.give-like-num,.view-num{font-family:STHupo!important;color:#05FFAE!important}.g{position:fixed;bottom:27%;left:0%;z-index:9999}.user-profile-avatar{position: relative;}.user-profile-avatar::after{position:absolute;content:' ';background:url(https://picture.gptkong.com/20240626/2203a336938ff749f0ad211b21ffb82a4d.png);background-size:cover;width:210%;height:210%;top:-55px;left:-55px}.user-profile-head-name-vip{position: relative;}.user-profile-head-name-vip::after{position: absolute;content:"欢迎来到小Z的博客!";font-family:FZShuTi;font-size:100px;color:black;font-weight:bold;width:2000px;top:-85px;left:109px}</style>

[外链图片转存中…(img-kxl67XAP-1719719285680)]

🎲10 发现的问题

2024.6.26凌晨发现自定义模块设置太多的外部图片会导致使用流量卷后机器人点赞和关注不上,哈哈哈哈也不知道什么原理,所以最好在使用流量卷前先清空一下个人模块,结束了再换上。
在这里插入图片描述
uu还有新发现的问题也可以在评论区发出来一起讨论。

🎲11 修复问题

修复问题会持续更新
🎁2024.6.27找到修复头像框和顶部文字随着下拉框位置下移的解决方法
之前采用 绝对定位的方法,虽然简单快速,但是缺点是随着详情页展开,页面的整体长度会发生改变,我们原先设置的头像框位置也会随之发生偏移,今天从空白诗大佬那里得到了解决方案。
解决思路:头像框之所以会发生偏移,是因为采用的是针对整个页面的绝对定位,下拉框导致整个页面的长度被拉长了。因此我们绝对定位相对的如果是一个主页中位整体不发生改变的标签,那么我们就可以不被页面整体长度整体长度所影响。
这里我选择的是头像
因此,我们首先对头像的选择器设置为相对定位,后面加个伪元素,使得头像框相对于头像进行定位,再设置一个绝对定位可以调整到我们需要的地方,这样子就完美解决了该问题。
头像框部分:

.user-profile-avatar {
        position: relative;
    }
 .user-profile-avatar::after {
        position: absolute;
        content: ' ';
        background: url(https://picture.gptkong.com/20240626/2203a336938ff749f0ad211b21ffb82a4d.png);
        background-size: cover;
        width: 210%;
        height: 210%;
        top: -55px;
        left: -55px
    }

顶部字体部分:

.user-profile-head-name-vip {
        position: relative;
    }

    .user-profile-head-name-vip::after {
        position: absolute;
        content: "欢迎来到小Z的博客!";
        font-family: FZShuTi;
        font-size: 100px;
        color: black;
        font-weight: bold;
        width: 2000px;
        top: -85px;
        left: 109px
    }

🎲2024.6.27发现通过对象存储OSS生成外链存放css代码

由于自定义模块有字数限制,我们可以将css文件打包到外部服务器,再用外联方法引入css样式,这样子我们的自定义模块就可以多写html主体的内容,大大增加了可玩性!!!

在这里插入图片描述

阿里云对象存储OSS:https://oss.console.aliyun.com/bucket
点击Buket列表
在这里插入图片描述
点击创建
在这里插入图片描述
表格其他地方按需选择,最终的是要关掉阻止公共访问,打开公共读 ,这样子我们的css外部链接才可用外联方法引入。
在这里插入图片描述
创建好之后我们点击我们创建的Bucket
在这里插入图片描述
在这里将我们的css文件打包上传上去
在这里插入图片描述
接着我们点开详情
在这里插入图片描述
在这里我们可以找到这个在服务器中存放css文件的外部链接
在这里插入图片描述
按照以下代码进行导入:

<div>
<link rel="stylesheet" href="填入你的css文件的url信息">
<iframe class="g" frameborder="no" border="0" width="280" height="220" src="//music.163.com/outchain/player?type=0&id=12225351807&auto=1&height=430"></iframe>
</div>

顺便提一下,我原先一直尝试用GITHUB的代码RWO进去,发现不可以
在这里插入图片描述
把上面的网址复制到url上发现不可以,这个应该是类似于文本一样的,而url应该对应的是css文件,这个方法并不可行。
在这里插入图片描述

🎲12 小结

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


在这里插入图片描述


  • 284
    点赞
  • 189
    收藏
    觉得还不错? 一键收藏
  • 193
    评论
评论 193
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值