页面定制 CSS 代码
<link rel="stylesheet"
href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.3.2/build/styles/default.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.3.2/build/highlight.min.js"></script>
/*simplememory*/
#google_ad_c1, #google_ad_c2 {display:none;}
.syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td,
.syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption,
.syntaxhighlighter textarea {
font-size: 14px !important;}
/*网页主页面*/
#home {
opacity: 0.8;
margin: 0 auto;
width: 84%;
min-width: 800px;
background-color: #fff;
padding: 30px;
margin-top: 30px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
border-radius: 10px;}
/*主标题背景图片*/
#header {
background: url(https://images.cnblogs.com/cnblogs_com/hennessy/1835795/o_20103012560620201030205440.png)
center center / cover no-repeat #222;
border-radius: 10px;}
/*主标题标签默认显示样式*/
#Header1_HeaderTitle {
font-size:50px;
color:white;}
/*主体标签样式*/
#blogTitle {
font-size: 36pt;
text-align:center;
font-family:"华文行楷";
/*border-left: 5px solid red;*/}
/*副标题样式*/
#blogTitle .subtitle {
font-size: 16pt;
color: blueviolet;}
/**/
#blogTitle h1 {
font-size: 30px;
font-weight: bold;
font-family: "微软雅黑";
line-height: 1.5em;
margin-top: 20px;
color: #515151;
border-left: 5px solid blueviolet;}
/*正文右侧边框距离*/
#mainContent {
margin-right:24%;}
/*导航栏标签鼠标悬浮样式*/
#navList a:hover {
color: #0de05e;
text-decoration: none;}
/*导航栏标签样式*/
#navList a {
display: block;
width: 6em;
height: 50px;
float: left;
margin-top: 16px;
padding-left: 10px;
text-align: center;}
/*导航栏*/
#navigator {
border-bottom: 1px solid #e40808;
border-left:1px solid blueviolet;
border-right:1px solid blue;
border-top: 1px solid #00fd1f;
height: 50px;
clear: both;
margin-top: 25px;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
border-radius: 0px 0px 10px 10px;}
/*导航栏标签*/
#navigator a {
font-size:17px;}
/*导航栏右侧统计字体*/
#navigator .blogStats span {
font-size:16px;
/*color:blueviolet;*/}
/*日历当天颜色*/
.CalTodayDay {
color:#1be51b !important;}
/*公告栏*/
#sideBar h3 {
margin:15px 0 0 0 ;
font-size: 25px;}
/*公告栏居中显示*/
#sidebar_news h3:first-child {
text-align: center;}
/*网页右侧块级标签,公告,搜索*/
.catListTitle {
width:100%;
height:40px;
border-left: 5px solid rgba(255, 192, 203, 0.8);
// padding: 5px 0 14px 10px;
background-color: #f5f5f5;
border-radius: 8px;}
/**/
#ad_under_post_holder #google_ad_c1,#google_ad_c2{
display: none !important;}
/*网页内容*/
body {
color: #000;
background: url(https://images.cnblogs.com/cnblogs_com/hennelly/1835795/o_200826133317%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20200826213244.png
) fixed ;
background-size: 100%;
background-repeat: no-repeat;
font-family: "微软雅黑";
font-size: 16px;
min-height: 100%;
z-index: 2;}
/*网页右侧块级标签*/
#sideBar {
font-family: "华文行楷";
padding-right: 7%;
width:18%;
height:89%;
top:250px;
right:25px;
border-radius: 10px;}
/**/
div.commentform p{
margin-bottom:10px;}
/**/
.comment_btn {
padding: 5px 10px;
height: 35px;
width: 90px;
border: 0 none;
border-radius: 5px;
background: #ddd;
color: #999;
cursor:pointer;
font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif;
text-shadow: 0 0 1px #fff;
display: inline !important;}
/**/
.comment_btn:hover{
padding: 5px 10px;
height: 35px;
width: 90px;
border: 0 none;
border-radius: 5px;
background: #c723e3;
color: white;
cursor:pointer;
font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif;
text-shadow: 0 0 1px #fff;
display: inline !important;}
/**/
#commentform_title {
background-image:none;
background-repeat:no-repeat;
margin-bottom:10px;
padding:0;
font-size:30px;}
/**/
#commentbox_opt,#commentbox_opt + p {
text-align:center;}
/*--------------------------随笔标题--------------------------*/
.postTitle {
border-left:14px solid blueviolet;
background-color: #f5f5f5;
font-size:200%;
font-family: "微软雅黑";
font-weight:bold;
margin:20px 0px 10px;
text-align:left;
border-radius: 3px;
}
.postTitle span {
padding-left: 10px;
}
/*--------------------------随笔文章h1--------------------------*/
#cnblogs_post_body h1 {
font-size: 2.1em !important;
background: rgba(0,0,255, 0.1);
border-left: 12px solid rgba(0,0,255, 0.7);
padding: 2px 2px 2px 10px;
font-weight: bold !important;
border-radius: 3px;
}
/*--------------------------随笔文章h2--------------------------*/
#cnblogs_post_body h2 {
font-size: 1.9em !important;
background: rgba(0,127,255, 0.1);
border-left: 10px solid rgba(0,127,255, 0.7);
padding: 2px 2px 2px 10px;
font-weight: bold !important;
border-radius: 3px;
}
/*--------------------------随笔文章h3--------------------------*/
#cnblogs_post_body h3 {
font-size: 1.7em !important;
background: rgba(0,255,0, 0.1);
border-left: 8px solid rgba(0,255,0, 0.7);
padding: 2px 2px 2px 10px;
font-weight: bold !important;
border-radius: 2px;
}
/*--------------------------随笔文章h4--------------------------*/
#cnblogs_post_body h4 {
font-size: 1.4em !important;
background: rgba(255,255,0, 0.1);
border-left: 6px solid rgba(255,255,0, 0.7);
padding: 2px 2px 2px 10px;
margin-left: 2px;
border-radius: 2px;
}
/*--------------------------随笔文章标签h5--------------------------*/
#cnblogs_post_body h5 {
font-size: 1.1em !important;
background: rgba(255,165,0,0.1);
border-left: 4px solid rgba(255,165,0,0.7);
padding: 2px 2px 2px 10px;
margin-left: 3px;
border-radius: 2px;
}
/*--------------------------随笔文章标签h6--------------------------*/
#cnblogs_post_body h6 {
font-size: 0.9em !important;
background: rgba(255, 0, 0, 0.1);
border-left: 2px solid rgba(255, 0, 0, 0.7);
margin-left: 4px;
padding: 2px 2px 2px 10px;
border-radius: 1px;
}
/*--------------------------随笔文章内容--------------------------*/
#cnblogs_post_body p {
background: rgba(255, 255, 255, 0.3);
border-radius: 5px;
font-size: 16px;
text-indent:2em;
}
/*--------------------------随笔文章底部签名开始--------------------------*/
#MySignature {
font-size:18px;
color:red;
background: rgba(0,0, 0, 0.2);
border-left: 8px solid rgba(0,0, 0, 0.8);
margin-left: 4px;
padding: 2px 2px 2px 10px;
border-radius: 1px;
}
#MySignature a {
color:bule;
text-decoration:none;
}
/*--------------------------随笔文章底部结束--------------------------*/
/*--------------------------随笔文章底部分类及标签开始--------------------------*/
#BlogPostCategory a {
margin-left: 5px;
height: 20px;
line-height: 20px;
color: #333;
padding: 3px 14px;
border-radius: 10px;
margin: 2px 5px 0;
background: #e7e7e7;
text-decoration: none;
}
#EntryTag a {
margin-left: 5px;
height: 20px;
line-height: 20px;
color: #333;
padding: 3px 14px;
border-radius: 10px;
margin: 2px 5px 0;
background: #e7e7e7;
text-decoration: none;
}
/*--------------------------随笔文章底部分类及标签结束--------------------------*/
/**/
.commentbox_title {
width: 100%;
}
/**/
#tbCommentBody {
font-family:"微软雅黑";
margin-top:10px;
max-width:100%;
min-width:100%;
background:white;
color:#333;
border:2px solid #fff;
box-shadow:inset 0 0 8px #aaa;
// padding:10px;
height:250px;
font-size:16px;
min-height:120px;
}
/**/
.feedbackItem {
font-size:16px;
line-height:24px;
margin:10px 0;
padding:20px;
background:#F2F2F2;
box-shadow:0 0 5px #aaa;
}
/**/
.feedbackListSubtitle {
font-weight:normal;
}
/**/
#blog-comments-placeholder, #comment_form {
padding: 20px;
background: #fff;
-webkit-box-shadow: 1px 2px 3px #ddd;
box-shadow: 1px 2px 3px #ddd;
margin-bottom: 50px;
}
/**/
.feedback_area_title {
margin-bottom: 15px;
font-size: 1.8em;
}
/**/
.feedbackItem {
border-bottom: 1px solid #CCC;
margin-bottom: 10px;
padding: 5px;
background: rgb(248, 248, 248);
}
/**/
.color_shine {background: rgb(226, 242, 255);}
.feedbackItem:hover {-webkit-animation-name: color_shine;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;}
#comment_form .title {
font-weight: normal;
margin-bottom: 15px;
}
/*----------------------------网页底部飞鱼开始----------------------------*/
.container {
width: 100%;
height: 100px;
position: fixed;
z-index: -1;
bottom: 0;
left: 0;
}
/*----------------------------网页底部飞鱼结束----------------------------*/
/*----------------------------底部火箭返回顶部开似----------------------------*/
#scrollTop div{
left:0;
overflow:hidden;
position:absolute;
top:0;
width:149px;
margin:0;
padding:0
}
#scrollTop .level-2{
background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll -149px 0 transparent;
display:none;
height:250px;
opacity:0;
z-index:1
}
#scrollTop .level-3{
background:none repeat scroll 0 0 transparent;
cursor:pointer;
display:block;
height:150px;
z-index:2
}
#scrollTop{
background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll 0 0 transparent;
cursor:default;
display:block;
height:180px;
overflow:hidden;
position:fixed;
right:10%;
top:90%;
width:149px;
z-index:11;
margin:-125px 0 0;
padding:0
}
/*----------------------------底部火箭返回顶部结束----------------------------*/
/*----------------------------大号点赞,删除反对开始----------------------------*/
#div_digg{
padding: 5px;
border-radius: 5px;
position: fixed;
right: 23%;
bottom: 20px;
width:80px;
z-index:100;
}
.diggit{
background: url(http://images2017.cnblogs.com/blog/894443/201709/894443-20170920105433618-867225449.png) no-repeat;
width: 60px;
height: 60px;
}
#div_digg .diggnum{
position: absolute;
bottom: -20px;
left: 6px;
background: #D0D0D0;
padding: 2px 0;
display: block;
color: #555;
font-size: 12px;
text-align: center;
width: 60px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
font-weight: bold;
}
.buryit{
display: none;
}
/*----------------------------大号点赞,删除反对结束----------------------------*/
/* -----------------------------------GitHub 按钮开始----------------------------------- */
.github-corner :hover .octo-arm {
animation: octocat-wave 560ms ease-in-out;
}
@media (max-width: 991px) {
.github-corner >svg {
fill: #fff !important;
color: #222 !important;
}
.github-corner .github-corner:hover .octo-arm {
animation: none;
}
.github-corner .github-corner .octo-arm {
animation: octocat-wave 560ms ease-in-out;
}
}
@-moz-keyframes octocat-wave {
0%, 100% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
20%, 60% {
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-ms-transform: rotate(-25deg);
-o-transform: rotate(-25deg);
transform: rotate(-25deg);
}
40%, 80% {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
}
}
@-webkit-keyframes octocat-wave {
0%, 100% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
20%, 60% {
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-ms-transform: rotate(-25deg);
-o-transform: rotate(-25deg);
transform: rotate(-25deg);
}
40%, 80% {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
}
}
@-o-keyframes octocat-wave {
0%, 100% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
20%, 60% {
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-ms-transform: rotate(-25deg);
-o-transform: rotate(-25deg);
transform: rotate(-25deg);
}
40%, 80% {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
}
}
@keyframes octocat-wave {
0%, 100% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
20%, 60% {
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-ms-transform: rotate(-25deg);
-o-transform: rotate(-25deg);
transform: rotate(-25deg);
}
40%, 80% {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
}
}
/* -----------------------------------GitHub 按钮开始----------------------------------- */
/* 去广告开始 */
#ad_c1,
#ad_c2,
#ad_t2,
.blogStats,
#under_post_news,
.c_ad_block {
display: none
}
.under-comment-nav {
display: none
}
/* 去广告结束 */
/*-----------------------------------------代码块开始-----------------------------------------*/
/*Darcula color scheme from the JetBrains family of IDEs*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #2b2b2b;
color: #bababa;
}
.hljs-strong,
.hljs-emphasis {
color: #a8a8a2;
}
.hljs-bullet,
.hljs-quote,
.hljs-link,
.hljs-number,
.hljs-regexp,
.hljs-literal {
color: #6896ba;
}
.hljs-code,
.hljs-selector-class {
color: #a6e22e;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-section,
.hljs-attribute,
.hljs-name,
.hljs-variable {
color: #cb7832;
}
.hljs-params {
color: #b9b9b9;
}
.hljs-string {
color: #6a8759;
}
.hljs-subst,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-symbol,
.hljs-selector-id,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-template-tag,
.hljs-template-variable,
.hljs-addition {
color: #e0c46c;
}
.hljs-comment,
.hljs-deletion,
.hljs-meta {
color: #7f7f7f;
}
.cnblogs-markdown .hljs {
display: block;
overflow-x: auto;
/* 替换背景和字体颜色 */
background: #2b2b2b !important;
color: #bababa !important;;
/* 代码块不换行 */
white-space: pre;
word-break: normal;
}
@font-face {
font-family: consola;
src: url("http://static.xxxxx.top/consola.ttf");
}
.cnblogs-markdown .hljs, .cnblogs-post-body .hljs {
font-family: consola !important;
font-size: 13px !important;
line-height: 1.7 !important;
padding: 10px !important;
}
.cnblogs-markdown pre {
position: relative;
}
.cnblogs-markdown pre > span {
position: absolute;
top: 0;
right: 0;
border-radius: 2px;
padding: 0 10px;
font-size: 12px;
background: rgba(0, 0, 0, 0.4);
color: #fff;
cursor: pointer;
display:none;
}
.cnblogs-markdown pre:hover > span {
display:block;
}
.cnblogs-markdown pre > .copyed {
background: #67c23a;
}
/*------------------------------------------代码块结束------------------------------------------*/
/*----------------------------随笔底部收藏点赞好文要顶----------------------------*/
#green_channel {
padding: 5px 0 15px 0;
margin-bottom: 10px;
margin-top: 10px;
border: 0;
border-top: #eee 1px dashed;
border-bottom: #eee 1px dashed;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: rgb(238, 238, 238);
font-size: 12px;
width: 100% !important;
text-align: center;
display: inline-block;
vertical-align: middle;
}
a#green_channel_digg,
a#green_channel_follow,
a#green_channel_favorite,
a#green_channel_weibo,
a#green_channel_wechat {
text-decoration: none;
color: #fff;
margin: auto;
width: 100px;
display: inline-block;
line-height: 30px;
font-size: 15px;
font-weight: 500;
letter-spacing: 2px;
border-radius: 3px;
text-transform: uppercase;
transition: all 0.4s;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
position: relative;
margin-left: 10px;
background-image: none;
margin-top: 10px;
}
a#green_channel_digg {
background-color: #2daebf;
box-shadow: 0 15px 18px -6px rgba(95, 193, 206, 0.65);
}
a#green_channel_favorite {
background-color: #ffb515;
box-shadow: 0 15px 18px -6px rgba(255, 198, 75, 0.65);
margin-left: 10px;
}
a#green_channel_follow {
background-color: #e33100 !important;
box-shadow: 0 15px 18px -6px rgba(227, 49, 0, 0.65);
margin-left: 10px;
}
a#green_channel_wechat {
padding: 3px 8px !important;
background-color: #3cb034 !important;
box-shadow: 0 15px 18px -6px rgba(60, 176, 52, 0.65) !important;
margin-left: 10px;
width: 120px;
}
a#green_channel_weibo {
padding: 3px 8px !important;
background-color: #ff464b !important;
box-shadow: 0 15px 18px -6px rgba(255, 70, 75, 0.65) !important;
margin-left: 10px;
width: 120px;
}
/*----------------------------随笔底部收藏点赞好文要顶结束----------------------------*/
博客侧边栏公告(支持HTML代码) (支持 JS 代码)
<style>
#clock {
font-family: 'Share Tech Mono', monospace;
//font-family: "华文行楷";
//font-family: "Andole Mono";
color: #ffffff;
text-align: center;
position: absolute;
left: 43%;
margin-top: 70px;
max-width: 80%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #25a9da;
text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
}
#clock .time {
letter-spacing: 0.05em;
font-size: 45px;
padding: 5px 0;
}
#clock .date {
letter-spacing: 0.3em;
font-size: 24px;
}
#clock .text {
letter-spacing: 0.1em;
font-size: 12px;
padding: 20px 0 0;
}
#waifu{
left:85%;
}
</style>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/clwydjgs/vue.min.js"></script>
<script>
var clock = new Vue({
el: '#clock',
data: {
time: '',
date: ''
}
});
var week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var timerID = setInterval(updateTime, 1000);
updateTime();
function updateTime() {
var cd = new Date();
clock.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);
clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth()+1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()];
};
function zeroPadding(num, digit) {
var zero = '';
for(var i = 0; i < digit; i++) {
zero += '0';
}
return (zero + num).slice(-digit);
}
</script>
<div style="border-top: 1px dashed #ccc;padding: 5px;border-bottom: 1px dashed #ccc;height: 120px;">
<div id="clock">
<p class="date">{{ date }}</p>
<p class="time">{{ time }}</p>
</div>
</div>
页首 HTML 代码
<!-- 背景线条 -->
<script type="text/javascript" color="18,243,11" opacity='1' z-Index=-2 count="99" src="https://files.cnblogs.com/files/lfri/canvas-nest.js"></script>
<!-- /* GitHub Cornor */ -->
<a href="https://github.com/honglvliyu" class="github-corner" target="_blank" title="Follow me on GitHub" aria-label="Follow me on GitHub">
<svg width="60" height="60" viewBox="0 0 250 250" style="fill:#151513; color:#fff; z-index: 999999; position: fixed; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
</svg>
</a>