我的cnblogs主题
这里记录的是本博客的主题存档
主题代码参考自:流云诸葛的博客
博客皮肤选择
选择 LessIsMore
页面定制CSS代码
div.post div.entry { font-family: Georgia,"Times New Roman",Times,sans-serif; } div.post div.entry h1, div.post div.entry h2, div.post div.entry h3 { margin-top: 24px; margin-bottom: 12px; } div.post div.entry h1 { padding: 5px; color: #fff; background-color: gray; } div.post h2 { font-size: 22px; line-height: 100%; } div.post div.entry pre.code { font-family: Consolas border-style : dashed; border-left: solid 5px #6ce26c; } div#information { background-color: #f8f8ee; border: solid 1px #e8e7d0; padding: 5px 10px 0 10px; min-height: 10px; margin-top: -15px; margin-bottom: 30px; color: #666; } .cnblogs_code { border-left: #58CE60 5px solid!important; margin: 0 auto 15px; } .cnblogs_code + .cnblogs_code { margin-top: 15px; } /* #site_nav_under, #under_post_kb, #under_post_news, .c_ad_block, a[href="http://count.knowsky.com"] { display: none!important; } */ .newsItem > .catListTitle { display: none; } #cnblogs_post_body h2 { line-height: 1.8; background-color: #ddd; box-shadow: 0 0 5px -1px #333; padding-left: 10px; } #MySignature { background-color: #FFF7DC; border: 2px dashed #FFBFBF; padding: 10px 15px; } .copyright-wrapper { padding-top: 10px; margin-top: 10px; border-top: 1px dashed #F1C7C7; } .copyright { font-size: 12px; } #cnblogs_post_body h2 { margin: 0 auto 10px; } #navList li a, .postBody a:hover, a { text-decoration: none; } li, ul { margin: 0; padding: 0; } .clearfix:after, .clearfix:before { display: table; content: ''; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } .ff-t { font-family: Tahoma; } #button_go_top { position: fixed; right: 5px; bottom: 75px; width: 70px; display: none; } #button_go_top a { display: inline-block; width: 70px; height:28px; -webkit-transition: opacity .5s ease; transition: opacity .5s ease; text-align: center; opacity: .7; color: #fff; margin: auto 2px; border-radius: 5px; background-color: #6da47d; /*background: url(http://images2015.cnblogs.com/blog/459873/201603/459873-20160318143006349-1431534918.png) -608px -188px no-repeat;*/ filter: alpha(opacity=70); } #button_go_top li { float: left; /*display: none;*/ overflow: hidden; } #button_go_top a:hover { color: #fff; background-color: #55895b; opacity: 1; filter: alpha(opacity=70); } body, ul { padding: 0; } body { font-family: '微软雅黑','宋体',Arial; font-size: 15px; margin: 0; /* background: #e7e7e7 url(http://images2015.cnblogs.com/blog/459873/201603/459873-20160316135102787-1112392588.png) 0 0 repeat; */ /* padding: 0 40px; */ } #home { overflow: auto; /* margin: 40px auto 50px auto; */ /* border-radius: 10px; */ background: #fff; box-shadow: 0 0 10px -4px #4E4E4E; filter: alpha(opacity=90); } .postBody p, .postCon p { line-height: 24px; margin: 7px 0; } ul { margin: 0; list-style: none; } image { border: none; } #blogTitle .title { font-size: 36px; line-height: 100px; height: 100px; padding-left: 60px; } #navigator, .blogStats { height: 48px; } .blogStats{ margin-right: 30px; } .subtitle { font-size: 14px; font-weight: 400; margin: 10px 0; padding-left: 30px; color: #999; } #navList li a, .blogStats { line-height: 48px; color: #fff; } #navigator { font-size: 16px; margin-top: 20px; margin-bottom: 0; border: none; text-align: center; background: #55895b; box-shadow: 0 -1px 12px -4px #000; padding-top: 0; } #navList li { line-height: 46px; display: inline-block; float: left; margin: 0; } #navList li:hover { background: #6da47d; } #navList li a { display: -moz-inline-box; display: inline-block; padding: 0 30px; border: 0; } .postTitle, .postTitle a { color: #464646; } .post .postTitle{ border-bottom: solid 1px #55895b !important; margin-bottom: 30px; } .post .postTitle a:before { content: '' !important; } #main { padding: 25px 10px 10px 260px; background: url(http://images2015.cnblogs.com/blog/459873/201603/459873-20160316173132162-205254894.png) left top repeat-y #fff; } #sideBarMain { font-size: 12px; line-height: 22px; width: 210px; margin: 0; padding: 0 10px 0 0; } #mainContent, .day { padding: 0; background: #fff; } #sideBar { float: left; margin-left: -100%; position: relative; left: -260px; width: 210px; padding: 0 0 0 30px; } #profile_block { line-height: 24px; text-align: left; } #mainContent { float: left; margin: 0; overflow: auto; max-width: 100%; } .day { margin: 0 0 20px; } .postTitle { margin: 0; font-size: 16px; font-weight: 700; padding-bottom: 10px; border-bottom: none; } .dayTitle { display: none; } .c_b_p_desc { font-size: 14px; line-height: 24px; padding: 20px; color: #888; border-radius: 12px; background: #f0f0f0; -ms-border-radius: 10px; } #topics .post, .postDesc { background: #fff; } .c_b_p_desc a { color: #888; } #sidebar_search .catListTitle { display: none; } .postDesc, .postDesc a { color: #aaa; } .desc_img { margin-left: 10px; border: 1px solid #fff; box-shadow: 0 0 10px #aaa; } .postDesc { font-size: 12px; margin: 0 0 2px; padding: 8px 0; text-align: right; } #div_digg, #footer { text-align: center; } .btn_my_zzk, .comment_btn { cursor: pointer; vertical-align: middle; color: #fff; display: inline-block; font-family: 'Microsoft Yahei'; } .postBody { padding: 0; } .btn_my_zzk { font-size: 14px; position: relative; width: 60px; height: 26px; padding: 1px; border: none; border-radius: 4px; background: #55895b; } .btn_my_zzk:hover { background: #6da47d; } .diggit{ padding: 0; width: 45px; height: 50px; margin: 0; float: left; border: 2px solid #6da47d; border-radius: 5px; } .buryit{ padding: 0; width: 45px; height: 50px; float: left; margin: 0; margin-top: 10px; border-radius: 5px; border: 2px solid #6da47d; } #div_digg { position: fixed; right: 180px; bottom: 20px; z-index: 9999; background-color: transparent; font-size: 12px; width: 45px !important; margin: 10px 0 0; padding: 5px; /* border: 1px solid #55895b; */ /* border-radius: 5px; */ } #btn_comment_submit, .comment_btn { width: 120px; height: 48px; border: none; } #digg_tips { display: none; } .comment_btn { font-size: 18px; position: relative; background: #55895b; } #commentform_title, .feedback_area_title { font-weight: 700; border-bottom: solid 6px #55895b; } #btn_comment_submit:hover { background: #6da47d; } .feedback_area_title { font-size: 24px; padding: 10px; color: #55895b; } .feedbackListSubtitle { font-size: 12px; color: #888; } .feedbackListSubtitle a { color: #888; } #commentform_title { font-size: 24px; margin-bottom: 10px; padding: 10px 20px 10px 10px; color: #55895b; background-image: none; background-repeat: no-repeat; } #green_channel, .feedbackListSubtitle { font-weight: 400; } #comment_form { margin: 10px 0; padding: 0; } .commentform { margin: 10px 0; padding: 10px 20px; background: #fff; } #tbCommentBody { font-size: 14px; line-height: 1.42857143; width: 940px; height: 200px; padding: 5px 12px; -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; color: #3c763d; border: 1px solid #ccc; border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0,0,0,.075); } .feedbackItem { font-size: 14px; line-height: 24px; margin: 10px 0; padding: 20px; background: #f2f2f2; box-shadow: 0 0 5px #aaa; } #footer { font-size: 12px; font-size: 14px; margin: 20px; padding: 12px; color: #ddd; background: #55895b; display: none; } .First, .demo { text-align: left; } .catListTitle { padding: 5px; border: 1px solid #eee; border-left-width: 5px; border-left-color: #55895b; border-radius: 3px; background-color: #fff; /* background-color: #55895b; color: #fff; */ } /* .catListTitle { border-top-color: #CECECE; border-right-color: #CECECE; border-bottom-color: #CECECE; } */ #green_channel { font-size: 15px; width: 920px; padding: 20px; color: #fff; border: none; border-radius: 4px; background: #6da47d; } code { padding: 2px 4px; white-space: nowrap; color: #d14; border: 1px solid #e1e1e8; -webkit-border-radius: 3px; -moz-border-radius: 3px; background-color: #f7f7f9; } kbd { font-family: Arial,Helvetica,sans-serif; font-size: 11px; line-height: 1.4; display: inline-block; margin: 0 .1em; padding: .1em .6em; color: #333; border: 1px solid #ccc; border-radius: 3px; background-color: #f7f7f7; box-shadow: 0 1px 0 rgba(0,0,0,.2),0 0 0 2px #fff inset; text-shadow: 0 1px 0 #fff; } .headph:hover img { -webkit-transform: rotate(360deg) scale(1.5); transform: rotate(360deg) scale(1.5); } .headph img { width: 48px; height: 48px; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .Abstract { font-family: 'Microsoft Yahei'; padding: 15px; color: #999; border: 2px dotted #999; border-radius: 4px; } .First, .Second { margin: 10px 0; color: #fff; padding: 6px 20px; font-family: 'Microsoft Yahei'; } .First, .Second, .Third, .demo { clear: both; border-radius: 4px; } .First { font-size: 20px; background: #55895b; } .Second { font-size: 18px; background: #93c8a2; } .Third { font-family: 'Microsoft Yahei'; font-size: 16px; margin: 15px 0; padding: 6px 20px; color: #999; background: #c6efd2; } .note { font-family: 'Microsoft Yahei'; font-size: 15px; clear: both; margin: 10px 0; padding: 15px 20px 15px 60px; box-shadow: 0 0 8px #aaa; } .demo { font-size: 16px; overflow: auto; padding: 6px 20px; color: #fff; background: orange; } .syntaxhighlighter .line.alt2 { background-color: #fff!important; } div#blog-comments-placeholder a:hover, div#comment_form a:hover, div#profile_block a:hover, div.catList a:hover, div.catListBlogRank a:hover, div.catListFeedback a:hover, div.catListImageCategory a:hover, div.catListLink a:hover, div.catListPostArchive a:hover, div.catListPostCategory a:hover, div.catListView a:hover, div.catListTag, div.catListEssay a:hover { color: #55895b; } #BlogPostCategory a, #LauncherLogoLink:hover, #RecentCommentsBlock a, #topics a:hover { padding: 1px 3px; text-decoration: none; color: #fff; border-radius: 3px; background-color: #55895b; } /* .catListTag a { padding: 1px 3px; text-decoration: none; color: #fff; border-radius: 3px; background-color: #55895b; } .catListTag a:visited, a:hover { color: #464646; } */ a, a:hover, a:visited { color: #464646; } h1 { margin: 0; } h3 { font-size: 15px; font-weight: 700; } .postBody .First a { color: #fff; } .postBody a:hover { color: #fff; background-color: #55895b; } .postBody a { padding: 1px 3px; color: #55895b; } #cnblogs_post_body img { max-width: 100%!important; /*border: 1px solid #CCCCCC;*/ border-radius: 4px!important; /*border: 1px solid #55895B!important; padding: 20px!important; border-radius: 5px!important;*/ box-sizing: border-box!important; box-shadow: -4px 0 8px #CCCCCC,0 -4px 8px #CCCCCC,0 4px 8px #CCCCCC,4px 0 8px #CCCCCC; } #cnblogs_post_body .cnblogs_code_copy img { border: none!important; padding: 0!important; border-radius: 0!important; } .forFlow { margin: 0 20px 0 20px; } #navList li a { font-size: 16px; font-weight: 700; } #calendar table { width: 100%; } #blogCalendar u { text-align: center; color: #55895B; display: block; padding: 0 2px; font-size: 1.1em; font-weight: 700; margin-top: 2px; } input[type=button].btn_my_zzk { width: 60px; } #blogTitle .title { position: relative; background: 0 0; } .portrait { display: block; position: absolute; left: 0; top: 0; width: 100px; height: 100px; border-radius: 50px; overflow: hidden; background: #fff url(http://pic.cnblogs.com/avatar/459873/20150917085709.png) no-repeat left center; background-size: contain; } #topics a:hover { padding: 1px 3px 1px 3px; text-decoration: none; color: #018ee8; border-radius: none; background-color: transparent; } .postTitle { padding-left: 0; background: 0 0; } .subtitle { padding-left: 0; } #blogTitle { padding-bottom: 0; } #nav_ing, #nav_newpost, #nav_q { display: none!important; } #sideBar { border-width: 0!important; } #sideBarMain { margin: 0; padding: 0; } #green_channel { width: auto; } #tbCommentBody { width: 100%; display: block; box-sizing: border-box; } #div_digg { width: 46px; bottom: 110px; } #div_digg { right: 5px; } #tbCommentBody { background: 0 0; } span[id^=cnzz_stat_icon] { position: fixed; bottom: 0; right: 0; } .newsItem { padding: 5px 10px; /* border: 1px solid #55895B; */ /* border-top- 5px; */ border-bottom: none; border-top-left-radius: 14px; border-top-right-radius: 14px; } #MyIng .ing_title, #sideBar h3 { margin: 10px 0; border: 1px solid #55895B; border-left-width: 5px; border-right-width: 5px; border-radius: 10px; text-align: center; } #calendar { margin-top: 0; text-align: center; /* border: 1px solid #55895B; */ /* padding: 5px; */ border-radius: 14px; /*border-bottom-left-radius: 14px;*/ /*border-bottom-right-radius: 14px;*/ /* border-bottom- 5px; */ /* margin-bottom: 25px; */ } .postTitle a:before { content: '~ '; } .postTitle a:hover { color: #55895B; } .postTitle a:hover:before { color: #55895B; } #navCategory { background-color: #ddd; padding: 10px; border-radius: 10px; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0,0,1,15deg); transform: rotate3d(0,0,1,15deg); } 40% { -webkit-transform: rotate3d(0,0,1,-10deg); transform: rotate3d(0,0,1,-10deg); } 60% { -webkit-transform: rotate3d(0,0,1,5deg); transform: rotate3d(0,0,1,5deg); } 80% { -webkit-transform: rotate3d(0,0,1,-5deg); transform: rotate3d(0,0,1,-5deg); } to { -webkit-transform: rotate3d(0,0,1,0deg); transform: rotate3d(0,0,1,0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0,0,1,15deg); transform: rotate3d(0,0,1,15deg); } 40% { -webkit-transform: rotate3d(0,0,1,-10deg); transform: rotate3d(0,0,1,-10deg); } 60% { -webkit-transform: rotate3d(0,0,1,5deg); transform: rotate3d(0,0,1,5deg); } 80% { -webkit-transform: rotate3d(0,0,1,-5deg); transform: rotate3d(0,0,1,-5deg); } to { -webkit-transform: rotate3d(0,0,1,0deg); transform: rotate3d(0,0,1,0deg); } } #blogTitle .title > a > .name { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } #blogTitle .title > a:hover > .name { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } #green_channel a:hover { padding: 3px 8px; } #header { /*background: url(http://tse1.mm.bing.net/th?id=OIP.M6a036c918eca65bdb4cef1fb88a5f645H0&pid=15.1) right top no-repeat;*/ background: url(https://octodex.github.com/images/octobiwan.jpg) right top no-repeat; /*background-color: #F0F2EF;*/ background-color: #fff; background-size: auto 75%; } #cnblogs_post_body p { margin: 12px auto; font-size: 14px; } .sticky--in-top { position: fixed!important; z-index: 1000!important; padding: 15px 0 15px 18px!important; margin-left: 0!important; background: #fff!important; border-bottom-left-radius: 10px; } .cnblogs_code_copy a img { display: none; } .cnblogs_code_toggle a.cnblogs_code_toggle_trigger { color: #00f; display: inline-block; border: 1px solid #CCC!important; } /*.cnblogs_code pre { display: none; }*/ .cnblogs_code pre.active { display: block; } /*to keep the insert code open/close buttons sytle*/ #cnblogs_post_body .code_img_closed { padding: 0px !important; border-style: none !important; border-radius: 0px !important; box-shadow: none; !important; } #cnblogs_post_body .code_img_opened { padding: 0px !important; border-style: none !important; border-radius: 0px !important; box-shadow: none; !important; } #my-comment { } #my-copyleft { border-top: 1px dashed #F1C7C7; margin-top: 5px; padding-top: 5px; } a { border-style: none !important; } blockquote { background-color: rgb(245, 245, 245); border: none; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 5px; color: rgb(68, 68, 68); display: block; text-shadow: rgba(0, 0, 0, 0) 0px 0px 1px; } #sidebar_search_box{ margin: 20px 0; } input.btn_my_zzk { font-size: 16px; height: 32px; margin-left: 5px; } #google_q, #q { font-size: 16px; width: 120px; border: 1px solid #ccc; height: 30px; line-height: 28px; padding: 0 5px; border-radius: 4px; } @media (max- 768px) { body { font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif } #green_channel { width: auto !important; } #ad_t2, #nav_admin, #nav_contact, #sideBar, .blogStats, .git-link, .postDesc a[rel=nofollow], .topicListFooter { display: none !important } #div_digg, #button_go_top { opacity: .9 } #button_go_top a { height:25px; } body { padding: 0 !important; } #home { border-radius: 0 !important; margin: 0 !important } #header { background-image: none !important } #main { padding: 15px 10px; background-image: none } #mainContent { overflow: hidden !important } .forFlow { margin: 8px !important } }
页首Html代码
<a href="https://github.com/keitsi" target="new"> <img style="position: absolute; top: 0; left: 0; border: 0;" src="http://images2015.cnblogs.com/blog/459873/201603/459873-20160317090540131-1089895320.png" alt="Fork me on GitHub" /> </a>
侧边公告栏
需要申请,可以插入自己的javascript,可用于支持网站流监控、个性化页面:
下面是【返回顶部】按钮的javascript代码:
<div id="introduce" > ~本博客记录了工作中遇到问题的解决方案和一些经验的分享,希望可以帮助到遇到同样问题的人。 </div> <script> /* 百度统计 */ /* 返回顶部 */ var BackTop = function(domE, distance) { if (!domE) return; var AddListener = function(domE, type, fn) { if (typeof domE.addEventListener === 'function') { AddListener = function(domE, type, fn) { domE.addEventListener(type, fn, false); }; } else if (typeof el.attachEvent === 'function') { AddListener = function(domE, type, fn) { domE.attachEvent('on' + type, fn); }; } else { AddListener = function(domE, type, fn) { var old = el['on' + type]; el['on' + type] = function(){ typeof old === 'function' && old.apply(this, arguments); typeof fn === 'function' && fn.apply(this, arguments); }; }; } AddListener(domE, type, fn); } AddListener(window, 'scroll', throttle(function() { toggleDomE(); }, 100)); AddListener(domE, 'click', function() { window.scrollTo(0,0); }) toggleDomE(); function toggleDomE() { domE.style.display = (document.documentElement.scrollTop || document.body.scrollTop) > (distance || 500) ? 'block' : 'none'; } function throttle(func, wait) { var timer = null; return function() { var self = this, args = arguments; if (timer) clearTimeout(timer); timer = setTimeout(function() { return typeof func === 'function' && func.apply(self, args); }, wait); } } }; new BackTop(document.getElementById('button_go_top')) </script>
页脚html代码
下面是【返回顶部】按钮的html代码(需要侧边公告栏的支持):
<div id="button_go_top"> <ul class="clearfix"> <li style="display: block;"> <a href="javascript:;" title="想了解本主题请查看随笔:我cnblogs的主题" >返回顶部</a> </li> </ul> </div>
个性签名
打开博客管理 -> 博客签名
添加一个签名:
<div id="my-comment">Keep it simple!</div> <div id="my-copyleft"> <div>作者:<a href="http://www.cnblogs.com/keitsi/" target="_blank">KEITSI</a></div> <div>出处:<a href="http://www.cnblogs.com/keitsi/" target="_blank">http://www.cnblogs.com/keitsi/</a></div> <div>知识共享,欢迎转载。</div> </div>