关键词：
闲着没事对博客皮肤做了些美化，主要是css，js写了些小功能
css部分：整体采用蓝色简洁风，有些部分我不用，所以没优化，比如标签，日历，相册，头部固定在顶部，侧边栏固定250px;右边内容主体自适应，支持，收藏和关注按钮固定于右下角，评论区做了些美化，小于767px时隐藏侧边栏，头部右端出现菜单按钮，点击可显示或隐藏侧边栏
js部分：为markdown的代码块添加了折叠按钮，返回顶部按钮根据滚动距离做了显示与隐藏判断，后期准备写一下生成侧边栏文章目录
css
body,
h1,
h2,
h3,
ul,
#profile_block
margin: 0;
padding: 0
li
list-style: none
a
font-size: 14px;
line-height: 1.5;
text-decoration: none;
color: #3086f2
a:hover
color: #ef6b6b
a[id|='a_comment']
color: red
input[type='button'],
button,
.catListPostCategory li a,
a[href='#top'],
#main .comment_actions a,
.comment_digg,
.comment_bury,
span.comment_date+a
border: 0;
outline: 0;
padding: 2px 12px;
background: #409eff;
border-radius: 2px;
color: #fff !important;
font-size: 12px;
-webkit-box-shadow: 0 1px 3px 0 #bfd1e8;
box-shadow: 0 1px 3px 0 #bfd1e8;
cursor: pointer
input[type='button']:hover,
button:hover,
.catListPostCategory li a:hover,
a[href='#top']:hover,
#main .comment_actions a:hover,
.comment_digg:hover,
.comment_bury:hover
-webkit-box-shadow: 0 3px 5px 1px #bfd1e8;
box-shadow: 0 3px 5px 1px #bfd1e8;
opacity: .9
body
background: #edf4f6;
font: 14px PingFangSC, 'helvetica neue', 'hiragino sans gb', arial, 'microsoft yahei ui', 'microsoft yahei', simsun, sans-serif !important;
line-height: 1.5;
color: #333
a[name='top']
position: absolute;
top: 0
.swit,
.blogStats,
a[href='#top'],
#blogTitle,
#lnkBlogLogo,
.entrylist>p,
.topicListFooter
display: none
#home
margin: 50px auto 0;
max-width: 1200px
#header
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 40px;
background: #398dee;
-webkit-box-shadow: 0 2px 2px 0 #b9eee4;
box-shadow: 0 2px 2px 0 #b9cce4
#navigator
margin: 0 auto;
height: 40px;
max-width: 1200px
#navList>li
float: left
#navList>li a
line-height: 40px;
margin-right: 33px;
color: rgba(255, 255, 255, 0.8)
#navList>li a:hover
color: #fff
.swit
float: right;
padding: 12px 0;
.swit div
margin: 2px;
width: 20px;
height: 2px;
background: rgba(255, 255, 255, .8)
.swit:hover div
background: #fff;
#main
position: relative;
padding-left: 260px;
.day,
.entrylist
position: relative;
margin-bottom: 10px;
border-radius: 2px;
min-height: 25px;
padding: 0 20px 2px;
background: #fff;
-webkit-box-shadow: 0 1px 30px 0 rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 30px 0 rgba(0, 0, 0, 0.05)
#mainContent .dayTitle a,
.entrylistTitle
position: absolute;
top: 3px;
right: 12px;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #666
.postTitle a,
.entrylistPosttitle a
display: inline-block;
margin: 7px 0 2px;
font-size: 1.1em;
font-weight: 600
.c_b_p_desc
color: #666
.day>.postDesc,
.entrylistItemPostDesc
padding: 3px 0 5px;
text-align: right
.postSeparator
border-bottom: 1px dashed #ccc
#sideBar
position: absolute;
left: 0;
top: 0;
z-index: 888;
width: 210px;
padding: 5px 20px 7px;
background: #fff;
border-radius: 2px;
-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05)
#sideBar h3.catListTitle
font-size: 14px;
margin-top: 3px
#sideBar .input_my_zzk
border: 0;
border-bottom: 1px solid #ccc;
width: 146px !important;
.catListPostCategory ul
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 6px;
-ms-flex-wrap: wrap;
flex-wrap: wrap
.catListPostCategory li a
margin: 0 12px 8px 0;
display: block
.catListPostCategory li:nth-child(2n) a
background: #ec7878
#post_detail,
#comment_form
border-radius: 2px;
padding: 0 20px;
background: #fff;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05)
#cb_post_title_url
display: inline-block;
font-size: 18px;
color: #333;
font-weight: bold
.post>.postDesc
border-bottom: 1px solid #eee;
padding: 0 14px 3px
#cnblogs_post_body code
font: 14px/1.5 Consolas, Menlo, Monaco, "Courier New", monospace !important;
color: #525252;
border: none !important;
background: #f6f8fa !important;
margin: 4px
pre
background: #f6f8fa
.hljs-comment,
.hljs-quote
color: #abb8c6
.hljs-variable,
.hljs-template-variable,
.hljs-regexp,
.hljs-deletion,
.hljs-keyword,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-tag,
.hljs-attr
color: #e38800
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link
color: #8d44eb
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-tag,
.hljs-attr
color: #e77600
.hljs-attribute
color: #108de8
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition
color: #2aab51
.hljs-subst,
.hljs-number
color: #ed6e55
.hljs-title,
.hljs-section,
.hljs-name
color: #fa3d58
.hljs
display: block;
overflow-x: auto
.hljs-emphasis
font-style: italic
.hljs-strong
font-weight: bold
#BlogPostCategory
position: absolute;
top: 12px;
right: 20px
#green_channel
margin: 0;
border: 0;
width: 70px;
position: fixed;
bottom: 0;
right: calc(50% - 700px)
#green_channel>a
font-size: 12px;
display: block;
margin-bottom: 8px;
padding: 2px 5px;
border-radius: 2px
#green_channel>a:nth-child(n+4)
display: none
a[href='#top']
position: fixed;
bottom: 20%;
right: calc(50% - 693px)
#blog-comments-placeholder
padding: 0 20px;
background: #fff
.feedbackItem
margin-top: 12px;
border-radius: 6px;
padding: 10px 14px;
background: #f6f8fa
.feedbackManage
margin-bottom: 8px
.feedbackCon
margin-top: 8px
#main .comment_actions a,
.comment_digg,
.comment_bury
margin-right: 12px
.comment_digg
background: #67c23a
.comment_bury
background: #f56c6c
a.layer
font-weight: bold;
margin-right: 12px
span.comment_date+a
background: #9291ea;
padding: 2px 12px
#footer
padding: 20px;
text-align: center
@media only screen and (max-width:767px)
.swit
display: block;
#home
max-width: 100%
#navigator
max-width: 100%;
padding: 0 12px;
#main
padding: 0 !important;
#sideBar
display: none;position:fixed;top:50px;
-webkit-box-shadow: 3px 3px 3px 1px #999;
box-shadow: 3px 3px 3px 1px #999
.day,
.entrylist,
#post_detail,
#comment_form,
#blog-comments-placeholder
padding: 0 15px;
div#comment_form
margin-left: 0;
padding: 0 15px
a[href='#top'],
.diggit
position: static
js
var post = $('.post');
if (post)
$('.post>.postTitle').after($('.post>.postDesc'));
var tog = $('<button>toggle</button>');
tog.click(function ()
$(this).siblings('code').toggle()
)
post.find('pre').prepend(tog);
var swit = $('<div class="swit"><div></div><div></div><div></div></div>')
$('#navigator').append(swit)
swit.click(function ()
$('#sideBar').toggle()
)
window.onscroll = function ()
if ($('a[href="#top"]').css('position') === 'static') return;
var y = window.scrollY;
if (y >= 500)
$('a[href="#top"]').show()
else
$('a[href="#top"]').hide()
博客园界面美化(代码片段)
博客园界面美化0x00.写在前面皮肤作者：@SevenNight皮肤作者博客：SevenNight修改人：@Ryanjie修改人：Ryanjie前几天无意之中看到了一款特别好看（每个人的眼光都不一样）的博客皮肤“verdant”，皮肤的作者是@SevenNight。当时感觉这款... 查看详情
博客园的美化(代码片段)
前言第一次写博客想从美化页面开始。页首html代码这里引入的是来自https://www.cnblogs.com/jingmoxukong/p/7826982.html的css文件1<!--自定制样式文件-->2<linkrel="stylesheet"href="https://files.cnblogs.com/files/jingmoxukong/cnblog.min.cs 查看详情
博客园美化(代码片段)
闲着没事对博客皮肤做了些美化，主要是css，js写了些小功能css部分：整体采用蓝色简洁风，有些部分我不用，所以没优化，比如标签，日历，相册，头部固定在顶部，侧边栏固定250px;右边内容主体自适应，支持，收藏和关注按... 查看详情
美化博客园(代码片段)
设置与我联系侧边栏公告代码<atarget="_blank"href="http://wpa.qq.com/msgrd?v=3&uin=xxxxxxxxxxx&site=qq&menu=yes"> <imgalign="absmiddle"border="0"src="http://wpa.qq.com/pa?p=2:xxxxxx 查看详情
[博客美化]博客园syntaxhighlighter代码高亮(代码片段)
...ndowsLiveWriter/OpenLiveWriter代码着色太繁琐了，仅仅为了实现博客代码着色功能就要下载新软件和搞一堆配置。Win10用户只能使用OpenLiveWriter。Web端能干的事干嘛多搞功夫。如果不愿意网页登陆账号只想通过OLW软件编辑全文并且发布... 查看详情
博客园美化-darkgreentrip(代码片段)
1、第一步，样式的形成与博客皮肤的选择有很大关系本文选择darkgreentrip2、代码插入2.1页面定制CSS代码```Objective-C#homemargin:0auto;width:95%;/原始65/min-width:980px;/页面顶部的宽度/background-color:rgba(245,245,245,0.7);padding:30px;margin-top:0px; 查看详情
博客园代码高亮美化教程(代码片段)
先简单展示下效果吧：首先需要导入js代码，在侧边栏公告处将以下代码复制进入：<scripttype="text/javascript">!function()varq=null;window.PR_SHOULD_USE_CONTINUATION=!0;(function()functionS(a)functiond(e)varb=e.charCodeAt(0);if(b!==9 查看详情
博客园美化(代码片段)
侧栏字体更改1.catListTitle2font-weight:bold;3line-height:1.2;4margin-top:21px;5margin-bottom:10.5px;6border-left:10pxsolid#008000;7padding:10px010px14px;8text-align:left;9font-family:微软雅黑;1011#profile_blo 查看详情
博客园美化代码备份(代码片段)
#Header1_HeaderTitlefont-family:"华文行楷";font-size:62px;font-weight:bold;padding-top:15px;padding-bottom:5px;padding-left:20px;padding-right:0px;text-align:center;Header2_HeaderTitlefont-fa 查看详情
博客园美化：添加赞赏功能(代码片段)
将以下代码复制粘贴到侧边栏HTML中：<!--tctip支付赞赏/打赏--><scripttype="text/javascript"src="https://blog-static.cnblogs.com/files/zhangshuhao1116/pay.js"></script><!--js文件引入--><script>newtct 查看详情
博客园主题自定义美化(代码片段)
...com/files/JetpropelledSnake/cnblogs.css，然后按ctrl+s，即可将本人博客用到的自定义css下载下来。接着在博客的管理页面，找到文件选项卡，上传刚刚下载的文件： 上传之后，记下该文件的url，如上图中的红框所示。注：上图中的url... 查看详情
博客园美化：添加qq联系按钮(代码片段)
将以下代码复制粘贴到博客侧边栏公告HTML： <!--联系qq--><divalign="center"><atarget="_blank"href="http://wpa.qq.com/msgrd?v=3&uin=744461004&site=qq&menu=yes"><imgalign="absmiddle"borde 查看详情
博客园页面美化(代码片段)
对以前的我来说，我觉得博客只有自己搭建的才有页面美化，像博客园这样的可能没有。但是，突然有一天在我查资料的时候，发现了一篇很好看的博客，我就留意了一下他的域名，发现竟然是博客园的。就开始决定把自己的... 查看详情
博客园主题美化diy教程(代码片段)
...到友人启发，部署了个静态页面，想着太单调了，要不连博客园的修一修，就去网上翻找了一下，果然给我发现了，但是在DIY的中途，遇到一大堆问题，因为是几年前的源码了，很多链接已经噶了。首先这个DIY页面的作者是这位... 查看详情
博客美化(代码片段)
...r/cnblogs-theme-silence介绍Silence是一款界面简洁、运行高效的博客园主题，主要面向于经常混迹博客园的朋友。简单概括其几个主要特点：专注阅读、精致漂亮的UI；事无巨细的部署文档；兼容移动端浏览器；源码结构清晰、易扩展... 查看详情
博客园美化教程大集合（超详细，看这篇就够了）(代码片段)
阅读目录： 1. 前言 2.定制自己的博客0.美化整体效果1.准备工作2.自定义个性化导航栏3.添加顶部博主信息4.添加顶部滚动公告5.为博客文章添加目录导航6.添加分享功能按键7.定制推荐和反对按键的炫酷样式8.添加快速... 查看详情
博客园样式美化ii(代码片段)
前言感谢大家对之前博客园样式美化的认可，我终于更新啦啦啦啦更新内容01|优化首页显示效果优化前：优化后：有没有感觉瞬间立体起来了呢～02|增加管理入口这个很简单，就是导航条上加了个管理的入口原本想设置为只有博... 查看详情
博客园主题美化配置（awescnb)(代码片段)
...题为awescnb系列主题中的geek主题 Awescnb文档Awescnb作者博客配置步骤一、准备工作申请js权限（参考链接：https://www.cnblogs.com/maczhen/p/14372738.html) 二、博客配置1.基本配置、代码高亮修改博客默认主题为Custom其他默认 2.博... 查看详情