博客园主题魔改

粉色导航栏

/*粉色导航栏*/
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代码，

把标题写进这里

就完事了,发布的时候会自动填充加载设置在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}