博客园主题魔改

粉色导航栏

/*粉色导航栏*/
div#navigator {
    background-color:#ff8688;
}

 

美化细小滚动条

/*代码框滚动条美化*/
::-webkit-scrollbar{width:3px;height:3px}::-webkit-scrollbar-thumb{border-radius:1px;box-shadow:inset 0 0 5px #6D6E69;background:#61687C}::-webkit-scrollbar-track{background:0 0;border-radius:1px}

不显示模板里的大黑版

/*不显示模版里的大黑板*/
#blogTitle {
    display: none;
}

 

中国风平铺背景

/*中国风平铺背景*/
body {
    background-image: url(//images.cnblogs.com/cnblogs_com/runtu/1645659/o_200211141254classical.jpg);
    background-repeat: repeat;
}

 

网格背景  (图片平铺)

body {
    font-family: “Courier New”,"Bitstream Vera Sans Mono",MONACO,Consolas,"DejaVu Sans Mono",monospace,Arial,sans-serif;
    margin: 0;
    background-image: url(//www.cnblogs.com/skins/BlueSky/images/bg.gif);
    background-repeat: repeat;
    background-color: #FFFDFA;
}

好看的网格背景（线条绘制）

body {
    margin: 0;
    background-color: #FFFDFA;
    background-repeat: repeat;
    background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%); 
    background-size: 20px 20px; 
    background-position: center center;
}

postbody 文章内页网格背景

/*文章网格纸背景*/
.post .postBody .blogpost-body {
    background-color: #FFFFFF;
    background-repeat: repeat;
    background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%); 
    background-size: 20px 20px; 
    background-position: center center;
}

h3标题三美化

写博客时候只需编辑html代码，<h3><span>把标题写进这里</span></h3> 就完事了,发布的时候会自动填充加载设置在css样式美化里的样式

<h3><span>把标题写进这里</span></h3>

 代码如下

.post .postBody .blogpost-body h3 {
color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; border-bottom: 2px solid #ef7060; font-size: 1.3em;
}
.post .postBody .blogpost-body h3 span {
font-size: inherit; line-height: inherit; margin: 0px; display: inline-block; font-weight: normal; background: #ef7060; color: #ffffff; padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px;
}

 

小code样式

像这样JDK这样Spring Boot还有这样public abstract等

像这样JDK这样Spring Boot还有这样public abstract等

.post .postBody h1 code,.post .postBody h2 code,.post .postBody h3 code,.post .postBody h4 code,.post .postBody h5 code,.post .postBody h6 code,.post .postBody li code,.post .postBody p code{color:#61687C;line-height:1;font-family:consolas!important;vertical-align:middle;margin:0 3px;background:#fbfbfb!important;font-size:14px!important;padding:.2em .3em!important;border-radius:3px!important;border:1px solid #eee!important}

大佬博客偷来的代码高亮模式

/*偷来的markdown完美代码高亮*/
.cnblogs-markdown .hljs{display:block;color:#333;overflow-x:auto;background:#F2F4F5!important;border:none!important;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace!important;padding:1em!important;font-size:14px!important}.hljs-comment,.hljs-meta{color:#969896}.hljs-emphasis,.hljs-quote,.hljs-string,.hljs-strong,.hljs-template-variable,.hljs-variable{color:#df5000}.hljs-keyword,.hljs-selector-tag,.hljs-type{color:#a71d5d}.hljs-attribute,.hljs-bullet,.hljs-literal,.hljs-symbol{color:#0086b3}.hljs-name,.hljs-section{color:#63a35c}.hljs-tag{color:#333}.hljs-attr,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-selector-pseudo,.hljs-title{color:#795da3}.hljs-addition{color:#55a532;background-color:#eaffea}.hljs-deletion{color:#bd2c00;background-color:#ffecec}.hljs-link{text-decoration:underline}

 

右侧上吊的猫（回到顶部）

这个上吊的猫是偶然间看到其他博客网站的，分析了一波源码后把资源下载下来应用到了我的博客园。得来全不费工夫，前端是块砖那里想要哪里般

美啊

1.只需放在页脚即可

2.下载szgotop.js, szgotop.css 并把css里面的图片地址改成你的图片地址

3.上传szgotop.js, szgotop.css, scroll.png 到你的博客园相册或者图床

4. 把下面代码复制到博客园定制代码-页脚HTML代码-中

5. CTRL + F5 强制刷新网页就出现了可爱的上吊猫了

<!--上吊的猫-->
<link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/runtu/szgotop.css" />
<div class="back-to-top cd-top faa-float animated cd-is-visible" style="top: -900px;"></div><script type="text/javascript" src="https://files.cnblogs.com/files/runtu/szgotop.js"></script>
<!--上吊的猫-end-->