我的随笔---博客园自定义样式
这是我的博客园的样式代码。比较简洁。。。
其中js样式需要去申请权限。（只要语气谦和，基本都能通过。我的是上午申请，下午就开通了）
下面的代码案例只需复制到其中对应的选框中就可以了。原有的css样例模板就能应用，不需要禁用css。如果有细小的差别，下面每一个样例都有注释。大家可以更改调式。
每一个小插件都可以单独使用的哦，如果不喜欢。可以删除增加。
大家可以点击我的首页，对比我的博客园加以更改。
这里是全部样式：(๑•̀ㅂ•́)و✧
页面制定CSS代码
1 /*侧边栏公告*/ 2 #blog-news > img { 3 /*头像*/ 4 display: block; 5 margin: auto; 6 border-radius: 50%; 7 } 8 9 #profile_block { 10 font-size: 15px; 11 padding: 20px; 12 line-height: 1.8; 13 } 14 15 #profile_block > a:link { 16 color: #F60; 17 } 18 /*公告结束*/ 19 20 21 /* 个性签名 */ 22 #MySignature { 23 box-shadow: 8px 1px 10px #989898; 24 padding: 10px; 25 text-shadow: 1px 1px 1px #FFF; 26 font-size: 15px; 27 border-left: solid 5px #55895B; 28 background: #FBF9F9; 29 border-radius: 10px 10px 37% 10px; 30 line-height: 2.4; 31 margin: 37px 0; 32 } 33 34 #MySignature a { 35 text-decoration: none; 36 color: #4183c4; 37 font-weight: bold; 38 } 39 40 #MySignature a:hover { 41 text-decoration: underline; 42 color: #f60; 43 } 44 45 #MySignature span { 46 color: #f60; 47 } 48 49 /*标题h2的自定义格式*/ 50 #cnblogs_post_body h2 { 51 border: 1px solid #55895B; 52 border-left-width: 5px; 53 border-radius: 10px; 54 border-right-width: 5px; 55 background-color: #FBF9F9; 56 background-position: left center; 57 padding: 3px 5px; 58 width: 100%; 59 display: inline-block; 60 box-sizing: border-box; 61 } 62 63 64 /* 关注收藏等几个按钮 */ 65 #green_channel { 66 padding: 10px; 67 margin: 20px 0; 68 font-size: 15px; 69 width: 400px; 70 } 71 72 #green_channel a { 73 border-radius: 3px; 74 text-shadow: none; 75 font-weight: normal; 76 box-shadow: none; 77 } 78 79 /* 禁用下划线 */ 80 .postBody a:link, .postBody a:visited, .postBody a:active { 81 text-decoration: none; 82 } 83 84 /* 上一篇下一篇 */ 85 #post_next_prev { 86 font-size: 14px; 87 color: #535353; 88 } 89 90 /*好看的滚动条*/ 91 ::-webkit-scrollbar{ 92 width:10px!important; 93 height:10px!important; 94 -webkit-appearance:none; 95 } 96 ::-webkit-scrollbar-thumb{ 97 height:5px;border:1px solid transparent; 98 border-top:none;border-bottom:none; 99 -webkit-border-radius:6px; 100 background-color:rgba(0,0,0,.3); 101 background-clip:padding-box; 102 } 103 104 105 /* 删除反对按钮,有点邪恶了 */ 106 .buryit{ 107 display: none; 108 } 109 110 /*目录样式*/ 111 #sideCatalog a{ 112 font-size:12px; 113 font-weight:normal !important; 114 } 115 116 /* 文章title自定义带动画样式 */ 117 .postTitle { 118 font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; 119 clear: both; 120 background-color: #FBF9F9; 121 margin-bottom: 8px; 122 padding-top: 5px; 123 padding-bottom: 5px; 124 margin-top: 17px; 125 border-left: 3px solid #21759b; 126 padding-left: 17px; 127 font-size: 17px; 128 border-radius:0px; 129 } 130 .postTitle a:hover { 131 text-decoration: none; 132 margin-left: 17px; 133 color: #E00000; 134 } 135 .postTitle a:link, 136 .postTitle a:visited, 137 .postTitle a:active { 138 transition: all 0.4s linear 0s; 139 } 140 141 /*博客导航栏 */ 142 #navList { 143 float:right; 144 } 145 146 #navList li { 147 border: none; 148 font-size: 16px; 149 } 150 151 .blogStats { 152 display: none; 153 } 154 155 156 /*屏蔽广告 adblock */ 157 #ad_t2 { 158 display: none; 159 } 160 .c_ad_block { 161 display: none; 162 } 163 164 /*新加 头像 img 侧边*/ 165 166 #newsSideBar .headImage { 167 padding: auto; 168 } 169 #newsSideBar .headImage img { 170 border: 3px solid #C0C0C0; 171 border-radius: 50%; 172 width: 150px; 173 margin: auto; 174 display: block; 175 } 176 177 /*评论*/ 178 /*评论列表*/ 179 #blog-comments-placeholder { 180 border-radius: 10px; 181 background: #fff; 182 padding: 30px 40px; 183 } 184 185 .feedback_area_title { 186 background: url(//www.cnblogs.com/skins/red_autumnal_leaves/images/titlebg.png) no-repeat left center #fff; 187 border: 1px solid #55895B; 188 border-left-width: 5px; 189 border-radius: 10px; 190 border-right-width: 5px; 191 padding: 15px 50px; 192 }
1 /*雪花背景*/ 2 #Snow{ 3 position: fixed; 4 top: 0; 5 left: 0; 6 width: 100%; 7 height: 100%; 8 z-index: 99999; 9 background: rgba(255,255,240,0.1); 10 pointer-events: none; 11 }
博客侧边公告栏
1 <script type="text/javascript"> 2 3 /*设置目录（侧边HTML代码）*/ 4 //以下是锚点JS 5 var a = $(document); 6 a.ready(function() { 7 var b = $('body'), 8 d = 'sideToolbar', 9 e = 'sideCatalog', 10 f = 'sideCatalog-catalog', 11 g = 'sideCatalogBtn', 12 h = 'sideToolbar-up', 13 i = '<div id="sideToolbar"style="display:none;">\<div class="sideCatalogBg"id="sideCatalog">\<div id="sideCatalog-sidebar">\<div class="sideCatalog-sidebar-top"></div>\<div class="sideCatalog-sidebar-bottom"></div>\</div>\<div id="sideCatalog-catalog">\<ul class="nav"style="width:225px;zoom:1">\</ul>\</div>\</div>\<a href="javascript:void(0);"id="sideCatalogBtn"class="sideCatalogBtnDisable"></a>\</div>', 14 j = '', 15 k = 200, 16 l = 0, 17 m = 0, 18 n = 0, 19 //限制存在个数，如数量过多，则只显示h2，不显示h3 20 //o, p = 13, 21 o, p = 100, 22 q = true, 23 r = true, 24 s = b; 25 if(s.length === 0) { 26 return 27 }; 28 b.append(i); 29 //指定获取目录的范围-------------这一点非常重要，因为每个人指定的范围都不一样，所以这是要修改的地方 30 //o = s.find(':header'); 31 o = $('#cnblogs_post_body').find(':header') 32 if(o.length > p) { 33 r = false; 34 var t = s.find('h2'); 35 var u = s.find('h3'); 36 if(t.length + u.length > p) { 37 q = false 38 } 39 }; 40 o.each(function(t) { 41 var u = $(this), 42 v = u[0]; 43 44 var title = u.text(); 45 var text = u.text(); 46 47 u.attr('id', 'autoid-' + l + '-' + m + '-' + n) 48 //if (!u.attr('id')) { 49 // u.attr('id', 'autoid-' + l + '-' + m + '-' + n) 50 //}; 51 if(v.localName === 'h2') { 52 l++; 53 m = 0; 54 if(text.length > 14) text = text.substr(0, 20) + "..."; 55 j += '<li><span>' + l + '  </span><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a><span class="sideCatalog-dot"></span></li>'; 56 } else if(v.localName === 'h3') { 57 m++; 58 n = 0; 59 if(q) { 60 if(text.length > 12) text = text.substr(0, 16) + "..."; 61 j += '<li class="h2Offset"><span>' + l + '.' + m + '  </span><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a></li>'; 62 } 63 } else if(v.localName === 'h4') { 64 n++; 65 if(r) { 66 j += '<li class="h3Offset"><span>' + l + '.' + m + '.' + n + '  </span><a href="#' + u.attr('id') + '" title="' + title + '">' + u.text() + '</a></li>'; 67 } 68 } 69 }); 70 $('#' + f + '>ul').html(j); 71 b.data('spy', 'scroll'); 72 b.data('target', '.sideCatalogBg'); 73 $('body').scrollspy({ 74 target: '.sideCatalogBg' 75 }); 76 $sideCatelog = $('#' + e); 77 $('#' + g).on('click', function() { 78 if($(this).hasClass('sideCatalogBtnDisable')) { 79 $sideCatelog.css('visibility', 'hidden') 80 } else { 81 $sideCatelog.css('visibility', 'visible') 82 }; 83 $(this).toggleClass('sideCatalogBtnDisable') 84 }); 85 $('#' + h).on('click', function() { 86 $("html,body").animate({ 87 scrollTop: 0 88 }, 500) 89 }); 90 $sideToolbar = $('#' + d); 91 92 //通过判断评论框是否存在显示索引目录 93 var commentDiv = $("#blog-comments-placeholder"); 94 95 a.on('scroll', function() { 96 //评论框存在才调用方法 97 if(commentDiv.length > 0) { 98 var t = a.scrollTop(); 99 if(t > k) { 100 $sideToolbar.css('display', 'block'); 101 $('#gotop').show() 102 } else { 103 $sideToolbar.css('display', 'none') 104 $('#gotop').hide() 105 } 106 } 107 }) 108 }); 109 //以上是锚点JS 110 //以下是返回顶部JS 111 $(function() { 112 $('body').append('<div id="gotop" οnclick="goTop();"></div>'); 113 }); 114 115 function goTop(u, t, r) { 116 var scrollActivate = !0; 117 if(scrollActivate) { 118 u = u || 0.1; 119 t = t || 16; 120 var s = 0, 121 q = 0, 122 o = 0, 123 p = 0, 124 n = 0, 125 j = 0; 126 document.documentElement && (s = document.documentElement.scrollLeft || 0, q = document.documentElement.scrollTop || 0); 127 document.body && (o = document.body.scrollLeft || 0, p = document.body.scrollTop || 0); 128 n = window.scrollX || 0; 129 j = window.scrollY || 0; 130 s = Math.max(s, Math.max(o, n)); 131 q = Math.max(q, Math.max(p, j)); 132 p = 1 + u; 133 window.scrollTo(Math.floor(s / p), Math.floor(q / p)); 134 0 < s || 0 < q ? window.setTimeout('goTop(' + u + ', ' + t + ')', t) : 'undefined' != typeof r && r() 135 } else { 136 scrollActivate = !0 137 } 138 } 139 //以上是返回顶部JS 140 </script> 141 142 143 <div id="newsSideBar"> 144 <div class="headImage"> 145 <img src="https://pic.cnblogs.com/avatar/1444343/20190803112901.png" alt="头像"> 146 </div> 147 </div>
/*动态线条
color: 线条颜色，默认：‘0，0，0’；三个数字分别为(R,G,B),注意使用，分割 opacity: 线条透明度0~1,默认0.5 count: 线条总数量，默认150 zIndex: 背景的z-Index属性，css用于控制所在层的位置，默认-1
*/ <div style = "display:none;">动态线条</div> <script> !function(){ function n(n,e,t){ return n.getAttribute(e)||t } function e(n){ return document.getElementsByTagName(n) } function t(){ var t=e("script"),o=t.length,i=t[o-1]; return{ l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99) } } function o(){ a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth, c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight } function i(){ r.clearRect(0,0,a,c); var n,e,t,o,m,l; s.forEach(function(i,x){ for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e], null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y, l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m), t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke())) }), x(i) } var a,c,u,m=document.createElement("canvas"), d=t(),l="c_n"+d.l,r=m.getContext("2d"), x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame|| function(n){ window.setTimeout(n,1e3/45) }, w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.οnresize=o, window.οnmοusemοve=function(n){ n=n||window.event,y.x=n.clientX,y.y=n.clientY }, window.οnmοuseοut=function(){ y.x=null,y.y=null }; for(var s=[],f=0;d.n>f;f++){ var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3}) } u=s.concat([y]), setTimeout(function(){i()},100) }(); </script> <div style = "display:none;"> 动态线条end</div>
/*雪花背景-需要修改第二处-上一处在CSS样式中*/ <div class="Snow"> <canvas id="Snow"></canvas> </div> <script src="https://files.cnblogs.com/files/cn-suqingnian/snow.js"></script>
1 @font-face { 2 font-family: 'FontAwesome'; 3 font-style: normal; 4 font-weight: normal; 5 src: url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.eot?#iefix") format('embedded-opentype'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.woff") format('woff'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.ttf") format('truetype'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.svg#FontAwesomeRegular") format('svg'); 6 } 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 body { 12 background: #eee; 13 color: #444; 14 font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; 15 font-size: 14px; 16 text-shadow: 0 0 1px transparent; 17 color:#505050; 18 } 19 @media screen and (max-width: 1260px) { 20 body { 21 margin: 0px; 22 } 23 } 24 @media screen and (max-width: 600px) { 25 body { 26 font-size: 13px; 27 } 28 } 29 h1,h2,h3,h4,h5,h6 {font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;} 30 h1 {font-size: 1.8em;} 31 h2 {font-size: 1.5em;} 32 h3 {font-size: 1.3em;} 33 a {text-decoration: none;color: #258fb8;} 34 a:hover {text-decoration: underline;} 35 #home{ 36 margin: 0 auto; 37 width: 85%; 38 background-color: #fff; 39 padding: 30px; 40 margin-top: 50px; 41 margin-bottom: 50px; 42 box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); 43 border-radius: 20px; 44 } 45 #tbCommentBody {width: 100%;} 46 #blogTitle {width:22%;margin-top: -10px;text-align: center;} 47 .alignright {float: right;} 48 .clearfix {zoom: 1;} 49 .clearfix:before,.clearfix:after {content: "";display: table;} 50 .clearfix:after {clear: both;} 51 #header, #main, #footer {width: 100%;margin: 0 auto;} 52 @media screen and (max-width: 1260px) { 53 #main { 54 width: 95%; 55 } 56 } 57 #mainContent { 58 width: 75%; 59 float: left; 60 margin-left: 10px; 61 } 62 @media screen and (max-width: 1260px) { 63 #main-col { 64 width: 100%; 65 margin-right: -300px; 66 } 67 } 68 @media screen and (max-width: 900px) { 69 #main-col { 70 margin-right: 0; 71 float: none; 72 } 73 } 74 @media screen and (max-width: 1260px) { 75 #wrapper { 76 margin-right: 300px; 77 } 78 } 79 @media screen and (max-width: 900px) { 80 #wrapper { 81 margin-right: 0; 82 } 83 } 84 #header { 85 text-shadow: 0 0 1px #fff; 86 margin: 20px auto 30px; 87 position: relative; 88 height: 60px; 89 color: #999; 90 } 91 #header a { 92 color: #999; 93 } 94 #header a:hover { 95 color: #258fb8; 96 text-decoration: none; 97 } 98 #header h1 { 99 font-weight: normal; 100 font-size: 30px; 101 } 102 #header h2 { 103 font-weight: normal; 104 font-size: 0.9em; 105 margin-top: 10px; 106 margin-left: 30px; 107 } 108 #header #navigator { 109 font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; 110 width: 100%; 111 font-size: 16px; 112 border-bottom: 1px solid #ededed; 113 border-top: 1px solid #ededed; 114 height: 50px; 115 line-height: 50px; 116 clear: both; 117 margin-top: 25px; 118 } 119 #header #navigator ul { 120 list-style: none; 121 } 122 #header #navigator ul li { 123 float: left; 124 width: 10%; 125 text-align: center; 126 margin-right: 15px; 127 } 128 #header .blogStats { 129 float: right; 130 font-size: 13px; 131 } 132 .topicListFooter { 133 margin-top:30px; 134 margin-bottom: 30px; 135 margin-right: 0 !important; 136 } 137 .topicListFooter a { 138 display: inline !important; 139 padding: 10px 20px; 140 background: #ddd; 141 color: #999; 142 font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; 143 text-shadow: 0 0 1px #fff; 144 border-radius: 5px; 145 } 146 .topicListFooter a:hover { 147 background: #258fb8; 148 color: #fff; 149 text-decoration: none; 150 text-shadow: none; 151 } 152 .topicListFooter .prev:before { 153 content: '\f053'; 154 padding-right: 10px; 155 font-family: FontAwesome; 156 } 157 .topicListFooter .next:after { 158 content: '\f054'; 159 padding-left: 10px; 160 font-family: FontAwesome; 161 } 162 article { 163 -webkit-box-shadow: 1px 2px 3px #ddd; 164 box-shadow: 1px 2px 3px #ddd; 165 background: #fff; 166 } 167 article.page { 168 padding-left: 20px; 169 } 170 article.page .icon { 171 display: none; 172 } 173 .postIcon:before { 174 content: '\f016'; 175 } 176 article.photo .icon:before { 177 content: '\f030'; 178 } 179 article.link .icon:before { 180 content: '\f0c1'; 181 } 182 article.link .title a:after { 183 content: '\f08e'; 184 color: #999; 185 font: 12px FontAwesome; 186 padding-left: 10px; 187 vertical-align: super; 188 } 189 /******************************************以下自定义样式***********************************************/ 190 #MySignature{ 191 border-top: 2px solid #ccc; 192 padding-top: 20px; 193 } 194 .pager{ 195 border-bottom: 1px dashed #ddd; 196 padding-bottom: 30px; 197 margin-bottom: -30px; 198 } 199 #blog-calendar{ 200 width:0px; 201 height:0px; 202 display: none !important; 203 } 204 #TopViewPostsBlock ul li{ 205 white-space: nowrap; 206 overflow: hidden; 207 text-overflow: ellipsis; 208 width: 100%; 209 display: inline-block; 210 height: 30px; 211 line-height: 30px; 212 } 213 .day .dayTitle{ 214 display: none !important; 215 } 216 //去掉广告 217 #ad_t2,#opt_under_post,.c_ad_block,#under_post_news,#under_post_kb{ 218 display: none !important; 219 } 220 .postTitle, .entrylistPosttitle { 221 font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; 222 font-size: 1.8em; 223 padding: 20px 20px 15px 0px; 224 background: #fff; 225 border-radius: 10px 10px 0px 0px; 226 white-space: nowrap; 227 overflow: hidden; 228 text-overflow: ellipsis; 229 } 230 .entrylistPostSummary, .postCon, .postBody { 231 padding: 0 20px 15px 0px; 232 -webkit-box-shadow: 1px 2px 3px #ddd; 233 box-shadow: 0 2px 0 #ddd; 234 background: #fff; 235 position: relative; 236 } 237 .postDesc, .entrylistItemPostDesc { 238 padding: 0px 20px 15px 0px; 239 color: #999; 240 font-size: 0.9em; 241 line-height: 16px; 242 position: relative; 243 min-height: 16px; 244 background: #fff; 245 border-bottom: 1px dashed #ccc; 246 } 247 #blog-calendar { 248 display: none; 249 } 250 @media screen and (max-width: 600px) { 251 .postCon { 252 padding-left: 0px; 253 } 254 } 255 .postIcon { 256 height: 0px; 257 margin-right: 25px; 258 position: relative; 259 top: 25px; 260 left: 25px; 261 color: #258fb8; 262 } 263 @media screen and (max-width: 600px) { 264 article header .icon { 265 display: none; 266 } 267 } 268 .postIcon:before { 269 position: absolute; 270 font: 32px FontAwesome; 271 top: 0; 272 left: 0; 273 width: 32px; 274 text-align: center; 275 } 276 article header time { 277 color: #999; 278 font: 0.9em "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; 279 margin-bottom: 5px; 280 display: block; 281 line-height: 1; 282 } 283 article header .title { 284 font-weight: normal; 285 } 286 article header .title a { 287 color: #444; 288 } 289 article header .title a:hover { 290 color: #258fb8; 291 text-decoration: none; 292 } 293 #cnblogs_post_body { 294 text-align: justify; 295 line-height: 1.6; 296 } 297 #cnblogs_post_body p, 298 #cnblogs_post_body blockquote, 299 #cnblogs_post_body ul, 300 #cnblogs_post_body ol, 301 #cnblogs_post_body dl, 302 #cnblogs_post_body table, 303 #cnblogs_post_body iframe, 304 #cnblogs_post_body h3, 305 #cnblogs_post_body h4, 306 #cnblogs_post_body h5, 307 #cnblogs_post_body h6, 308 #cnblogs_post_body .video-container { 309 margin-top: 15px; 310 } 311 #cnblogs_post_body blockquote { 312 border-top: 1px solid #ddd; 313 border-bottom: 1px solid #ddd; 314 font-style: italic; 315 font-family: "Georgia", serif; 316 font-size: 1.2em; 317 padding: 0 30px 15px; 318 } 319 #cnblogs_post_body blockquote footer { 320 border-top: none; 321 font-size: 0.8em; 322 line-height: 1; 323 margin: 20px 0 0; 324 padding-top: 0; 325 } 326 #cnblogs_post_body blockquote footer cite:before { 327 content: '—'; 328 color: #ccc; 329 padding: 0 0.5em; 330 } 331 #cnblogs_post_body code, 332 #cnblogs_post_body pre { 333 font-family: Monaco, Menlo, Consolas, Courier New, monospace; 334 } 335 #cnblogs_post_body code { 336 background: #eee; 337 color: #666; 338 padding: 0 5px; 339 margin: 0 2px; 340 font-size: 0.9em; 341 border: 1px solid #ddd; 342 -webkit-border-radius: 3px; 343 border-radius: 3px; 344 } 345 #cnblogs_post_body pre { 346 background: #eee; 347 overflow: auto; 348 padding: 7px 15px; 349 -webkit-border-radius: 2px; 350 border-radius: 2px; 351 } 352 #cnblogs_post_body pre code { 353 background: none; 354 padding: 0; 355 margin: 0; 356 border: none; 357 -webkit-border-radius: 0; 358 border-radius: 0; 359 } 360 #cnblogs_post_body ul ul, 361 #cnblogs_post_body ol ul, 362 #cnblogs_post_body dl ul, 363 #cnblogs_post_body ul ol, 364 #cnblogs_post_body ol ol, 365 #cnblogs_post_body dl ol, 366 #cnblogs_post_body ul dl, 367 #cnblogs_post_body ol dl, 368 #cnblogs_post_body dl dl { 369 margin-top: 0; 370 } 371 #cnblogs_post_body h1, 372 #cnblogs_post_body h2 { 373 font-weight: bold; 374 border-bottom: 1px solid #ddd; 375 padding-bottom: 10px; 376 margin-top: 20px; 377 } 378 #cnblogs_post_body h3, 379 #cnblogs_post_body h4, 380 #cnblogs_post_body h5, 381 #cnblogs_post_body h6 { 382 font-weight: normal; 383 background: #eee; 384 border-radius: 6px; 385 color: Red; 386 font-family: "微软雅黑" , "宋体" , "黑体" ,Arial; 387 height: 25px; 388 line-height: 25px; 389 margin: 18px 5px !important; 390 padding: 8px; 391 opacity: 0.8; 392 border: 1px dashed #aaa; 393 } 394 .postBody img, 395 .entrylistPostSummary img, .postCon img, 396 .postBody video { 397 max-width: 100%; 398 height: auto; 399 border: none; 400 } 401 #cnblogs_post_body iframe { 402 border: none; 403 } 404 #cnblogs_post_body .caption { 405 display: block; 406 margin-top: 5px; 407 color: #999; 408 position: relative; 409 font-size: 0.9em; 410 padding-left: 25px; 411 } 412 #cnblogs_post_body .caption:before { 413 content: '\f040'; 414 position: absolute; 415 font: 1.3em FontAwesome; 416 position: absolute; 417 left: 0; 418 top: 3px; 419 } 420 #cnblogs_post_body .video-container { 421 position: relative; 422 padding-bottom: 56.25%; 423 padding-top: 30px; 424 height: 0; 425 overflow: hidden; 426 } 427 #cnblogs_post_body .video-container iframe, 428 #cnblogs_post_body .video-container object, 429 #cnblogs_post_body .video-container embed { 430 position: absolute; 431 top: 0; 432 left: 0; 433 width: 100%; 434 height: 100%; 435 margin-top: 0; 436 } 437 #cnblogs_post_body .pullquote { 438 float: right; 439 border: none; 440 padding: 0; 441 margin: 1em 0 0.5em 1.5em; 442 text-align: left; 443 width: 45%; 444 font-size: 1.5em; 445 } 446 #blog-comments-placeholder, #comment_form { 447 padding: 20px; 448 background: #fff; 449 -webkit-box-shadow: 1px 10px 10px #ddd; 450 box-shadow: 10px 10px 10px #ddd; 451 margin-bottom: 50px; 452 border: 1px solid #ccc; 453 padding-top:0; 454 } 455 .feedback_area_title { 456 margin-bottom: 15px; 457 font-size: 1.8em; 458 } 459 .feedbackItem { 460 border-bottom: 1px dashed #CCC; 461 margin-bottom: 10px; 462 padding: 5px; 463 } 464 .color_shine {background: rgb(226, 242, 255);} 465 .feedbackItem:hover {-webkit-animation-name: color_shine;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;} 466 #comment_form .title { 467 font-weight: normal; 468 margin-bottom: 15px; 469 } 470 #ad_under_post_holder { 471 display: none; 472 } 473 .entrylistTitle { 474 color: #999; 475 font-weight: normal; 476 margin-bottom: 30px; 477 text-shadow: 0 0 1px #fff; 478 } 479 .entrylistTitle:before { 480 font-family: FontAwesome; 481 content: '\f07b'; 482 padding-right: 15px; 483 } 484 .archive { 485 -webkit-box-shadow: 1px 2px 3px #ddd; 486 box-shadow: 1px 2px 3px #ddd; 487 border-bottom: 1px solid #ddd; 488 margin-bottom: 50px; 489 } 490 .archive article { 491 -webkit-box-shadow: none; 492 box-shadow: none; 493 } 494 .archive article .post-content { 495 margin-bottom: 0; 496 } 497 #sideBar{ 498 width: 22%; 499 line-height: 1.8em; 500 float: right; 501 } 502 @media screen and (max-width: 900px) { 503 #sideBar { 504 float: none; 505 width: 100%; 506 } 507 } 508 .catListLink, .catListMyTeams, .catListComment, .catListFeedback { 509 display: none; 510 } 511 .search, .newsItem, .catListPostCategory, .catListPostArchive, .catListTag, .catListView, .catListBlogRank { 512 background: #fff; 513 -webkit-box-shadow: 1px 2px 3px #ddd; 514 box-shadow: 10px 10px 10px #ddd; 515 margin-bottom: 30px; 516 word-wrap: break-word; 517 border-radius: 10px; 518 margin-top: 10px; 519 border: 1px solid #ddd; 520 } 521 #blog-sidecolumn h3, .newsItem h3 { 522 padding: 15px 20px; 523 font-size: 1em; 524 border-bottom: 1px solid #ddd; 525 font-weight: normal; 526 } 527 #blog-sidecolumn ul, .newsItem #blog-news { 528 font-size: 0.9em; 529 padding: 15px 20px; 530 } 531 #blog-sidecolumn ul, 532 #blog-sidecolumn ol, 533 #blog-sidecolumn dl { 534 list-style: none; 535 } 536 #blog-sidecolumn ul ul, 537 #blog-sidecolumn ol ul, 538 #blog-sidecolumn dl ul, 539 #blog-sidecolumn ul ol, 540 #blog-sidecolumn ol ol, 541 #blog-sidecolumn dl ol, 542 #blog-sidecolumn ul dl, 543 #blog-sidecolumn ol dl, 544 #blog-sidecolumn dl dl { 545 list-style: disc; 546 margin-left: 20px; 547 } 548 #q { 549 background: #fff; 550 font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; 551 font-style: italic; 552 font-size: 1em; 553 padding: 10px 15px; 554 border: 1px solid #ddd; 555 width: 100%; 556 -webkit-box-sizing: border-box; 557 -moz-box-sizing: border-box; 558 box-sizing: border-box; 559 color: #999; 560 height: 100%; 561 } 562 #q:focus { 563 color: #444; 564 } 565 /*隐藏搜索框中的无用组件*/ 566 .mySearch { 567 display: none; 568 } 569 570 #sideBar .tag small { 571 margin-left: 15px; 572 color: #999; 573 } 574 #sideBar .tag small:before { 575 content: '('; 576 } 577 #sideBar .tag small:after { 578 content: ')'; 579 } 580 #sideBar .twitter li { 581 border-bottom: 1px solid #ddd; 582 padding: 15px 20px; 583 font-size: 0.9em; 584 } 585 #sideBar .twitter li:last-of-type { 586 border-bottom: none; 587 } 588 #sideBar .twitter small { 589 display: block; 590 margin-top: 10px; 591 color: #999; 592 line-height: 1; 593 } 594 #sideBar .tagcloud .entry { 595 padding-right: 5px; 596 } 597 #sideBar .tagcloud a { 598 margin-right: 10px; 599 display: inline-block; 600 } 601 #footer { 602 color: #999; 603 margin-bottom: 50px; 604 font: 0.9em/1.6 "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; 605 text-shadow: 0 0 1px #fff; 606 text-align:center; 607 margin: 30px 0px 50px; 608 } 609 .entry .gist { 610 background: #eee; 611 border: 1px solid #ddd; 612 margin-top: 15px; 613 padding: 7px 15px; 614 -webkit-border-radius: 2px; 615 border-radius: 2px; 616 text-shadow: 0 0 1px #fff; 617 line-height: 1.6; 618 overflow: auto; 619 color: #666; 620 } 621 .entry .gist .gist-file { 622 border: none; 623 font-family: inherit; 624 margin: 0; 625 font-size: 0.9em; 626 } 627 .entry .gist .gist-file .gist-data { 628 background: none; 629 border-bottom: none; 630 } 631 .entry .gist .gist-file .gist-data pre { 632 padding: 0 !important; 633 font-family: Monaco, Menlo, Consolas, Courier New, monospace; 634 } 635 .entry .gist .gist-file .gist-meta { 636 background: none; 637 color: #999; 638 margin-top: 5px; 639 padding: 0; 640 text-shadow: 0 0 1px #fff; 641 font-size: 100%; 642 } 643 .entry .gist .gist-file .gist-meta a { 644 color: #258fb8; 645 } 646 .entry .gist .gist-file .gist-meta a:visited { 647 color: #258fb8; 648 } 649 figure.highlight { 650 background: #eee; 651 border: 1px solid #ddd; 652 margin-top: 15px; 653 padding: 7px 15px; 654 -webkit-border-radius: 2px; 655 border-radius: 2px; 656 text-shadow: 0 0 1px #fff; 657 line-height: 1.6; 658 overflow: auto; 659 position: relative; 660 font-size: 0.9em; 661 } 662 figure.highlight figcaption { 663 color: #999; 664 margin-bottom: 5px; 665 text-shadow: 0 0 1px #fff; 666 } 667 figure.highlight figcaption a { 668 position: absolute; 669 right: 15px; 670 } 671 figure.highlight pre { 672 border: none; 673 padding: 0; 674 margin: 0; 675 } 676 figure.highlight table { 677 margin-top: 0; 678 border-spacing: 0; 679 } 680 figure.highlight .gutter { 681 color: #999; 682 padding: 7px 10px 7px 5px !important; 683 border-right: 1px solid #ddd; 684 text-align: right; 685 } 686 figure.highlight .code { 687 padding: 7px 7px 7px 10px !important; 688 border-left: 1px solid #fff; 689 color: #666; 690 } 691 pre .comment, 692 pre .template_comment, 693 pre .diff .header, 694 pre .doctype, 695 pre .pi, 696 pre .lisp .string, 697 pre .javadoc { 698 color: #93a1a1; 699 font-style: italic; 700 } 701 pre .keyword, 702 pre .winutils, 703 pre .method, 704 pre .addition, 705 pre .css .tag, 706 pre .request, 707 pre .status, 708 pre .nginx .title { 709 color: #859900; 710 } 711 pre .number, 712 pre .command, 713 pre .string, 714 pre .tag .value, 715 pre .phpdoc, 716 pre .tex .formula, 717 pre .regexp, 718 pre .hexcolor { 719 color: #2aa198; 720 } 721 pre .title, 722 pre .localvars, 723 pre .chunk, 724 pre .decorator, 725 pre .built_in, 726 pre .identifier, 727 pre .vhdl, 728 pre .literal, 729 pre .id { 730 color: #268bd2; 731 } 732 pre .attribute, 733 pre .variable, 734 pre .lisp .body, 735 pre .smalltalk .number, 736 pre .constant, 737 pre .class .title, 738 pre .parent, 739 pre .haskell .type { 740 color: #b58900; 741 } 742 pre .preprocessor, 743 pre .preprocessor .keyword, 744 pre .shebang, 745 pre .symbol, 746 pre .symbol .string, 747 pre .diff .change, 748 pre .special, 749 pre .attr_selector, 750 pre .important, 751 pre .subst, 752 pre .cdata, 753 pre .clojure .title { 754 color: #cb4b16; 755 } 756 pre .deletion { 757 color: #dc322f; 758 } 759 .feedbackListSubtitle { position: relative;} 760 .feedbackManage {width: 160px;position: absolute;right: 0;text-align: right;} 761 .cnblogs_code_toolbar {display: none;} 762 #cnblogs_post_body {overflow: hidden;} 763 #cnblogs_post_body ol { padding-left: 40px;} 764 #cnblogs_post_body ul { margin-left: 35px;} 765 .fixedReadRank { position: fixed; top: 20px; width: 270px; } 766 .fixedRecRank { position: fixed; top: 360px; width: 270px; } 767 figure.highlight { margin-top: 0; padding: 0;} 768 figure table {width: 100%; margin: 0 !important;} 769 #cnblogs_post_body pre { padding: 0; } 770 #cnblogs_post_body th, #cnblogs_post_body td { padding: 0; } 771 .cnblogs_code pre { padding: 7px 15px !important; background: #f5f5f5;border: 0;margin-top: 0;} 772 .cnblogs_code th {border: 1px solid silver; padding: 3px;} 773 .cnblogs_code { padding: 0;} 774 /*评论标题*/ 775 .feedback_area_title { 776 padding:10px; 777 font-size:24px; 778 font-weight:bold; 779 color:#aaa; 780 border-bottom:1px dashed #ccc; 781 } 782 .feedbackListSubtitle { 783 font-size:12px; 784 color:#888; 785 } 786 .feedbackListSubtitle a { 787 color:#888; 788 } 789 .comment_quote { 790 background:#eee; 791 padding:15px; 792 border:1px dashed #aaa; 793 border-radius:5px; 794 }#commentform_title { 795 color:#aaa; 796 background-image:none; 797 background-repeat:no-repeat; 798 margin-bottom:10px; 799 padding:10px 20px 10px 10px; 800 font-size:24px; 801 font-weight:bold; 802 border-bottom:1px dashed #ccc; 803 } 804 /*评论框*/ 805 #comment_form { 806 margin:10px 0; 807 padding:25px; 808 border-radius: 10px; 809 height: 343px; 810 overflow: hidden; 811 } 812 .commentform { 813 margin:10px 0; 814 padding:10px 20px; 815 background:#fff; 816 } 817 /*评论输入域*/ 818 #tbCommentBody { 819 font-family:'MIcrosoft Yahei'; 820 margin-top:10px; 821 background:white; 822 color:#333; 823 border:2px solid #fff; 824 box-shadow:inset 0 0 8px #aaa; 825 height:120px; 826 font-size:14px; 827 min-height:120px; 828 border-radius: 10px; 829 } 830 /*评论条目*/ 831 .feedbackItem { 832 font-size:14px; 833 line-height:24px; 834 margin:10px 0; 835 padding:20px; 836 } 837 .feedbackListSubtitle { 838 font-weight:normal; 839 } 840 841 /*green_channel*/ 842 #green_channel { 843 text:align:right; 844 padding-left:0px; 845 font-weight:normal; 846 font-size:13px; 847 width:100%; 848 border:1px dashed #ccc; 849 color:#fff; 850 border-radius:4px; 851 margin:5px auto; 852 } 853 @media screen and (max-width: 768px) { 854 body { 855 font-size: 13px; 856 } 857 #main{padding:0px !important;} 858 #mainContent{width: 96%;float: left;margin: 0px 2%;} 859 #sideBar {display: none;} 860 #blogTitle {width: 100%;float:none;margin: 20px auto 0 !important;} 861 #header{height:auto !important;margin: 20px auto 5px;} 862 #header #navigator{width: 100%;text-align: center;float:none;} 863 #header #navigator ul{width: 100%;margin-left: 6%;} 864 #header #navigator ul li {float: left;width: 25%;text-align: center;margin-right:0px;} 865 .postTitle, .entrylistPosttitle{font-size:14px;padding: 20px 20px 15px 0px;} 866 .postDesc, .entrylistItemPostDesc{padding: 0px 20px 15px 0px;} 867 #green_channel{padding:0px !important;} 868 #blog_stats{display: none;} 869 } 870 #blog-news label{box-shadow:5px 5px 5px #cccccc;text-shadow:5px 5px 5px #cccccc;border-radius:5px;} 871 #div_digg{ 872 padding: 5px; 873 border-radius: 5px; 874 position: fixed; 875 left: 0; 876 bottom: 80px; 877 width:80px; 878 z-index:100; 879 } 880 .diggit{ 881 background: url(http://images2017.cnblogs.com/blog/894443/201709/894443-20170920105433618-867225449.png) no-repeat; 882 width: 60px; 883 height: 60px; 884 } 885 #div_digg .diggnum{ 886 position: absolute; 887 bottom: -20px; 888 left: 6px; 889 background: #D0D0D0; 890 padding: 2px 0; 891 display: block; 892 color: #555; 893 font-size: 12px; 894 text-align: center; 895 width: 60px; 896 -moz-border-radius: 4px; 897 -webkit-border-radius: 4px; 898 font-weight: bold; 899 } 900 .buryit{ 901 display: none; 902 } 903 div.commentform textarea.comment_textarea{ 904 padding:10px; 905 } 906 #tbCommentBody{ 907 98%; 908 } 909 /*scroll to top*/ 910 #scrollTop div{ 911 left:0; 912 overflow:hidden; 913 position:absolute; 914 top:0; 915 width:149px; 916 margin:0; 917 padding:0 918 } 919 #scrollTop .level-2{ 920 background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll -149px 0 transparent; 921 display:none; 922 height:250px; 923 opacity:0; 924 z-index:1 925 } 926 #scrollTop .level-3{ 927 background:none repeat scroll 0 0 transparent; 928 cursor:pointer; 929 display:block; 930 height:150px; 931 z-index:2 932 } 933 #scrollTop{ 934 background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll 0 0 transparent; 935 cursor:default; 936 display:block; 937 height:250px; 938 overflow:hidden; 939 position:fixed; 940 right:0; 941 top:80%; 942 width:149px; 943 z-index:11; 944 margin:-125px 0 0; 945 padding:0 946 } 947 /*评论带头像，且支持旋转*/ 948 .feedbackCon img:hover { 949 -webkit-transform: rotateZ(360deg); 950 -moz-transform: rotateZ(360deg); 951 -ms-transform: rotateZ(360deg); 952 -o-transform: rotateZ(360deg); 953 transform: rotateZ(360deg); 954 } 955 956 .feedbackCon img { 957 border-radius: 40px; 958 -webkit-transition: all 0.6s ease-out; 959 -moz-transition: all 0.5s ease-out; 960 -ms-transition: all 0.5s ease-out; 961 -o-transition: all 0.5s ease-out; 962 transition: all 0.5s ease-out; 963 }
//使用原始博客皮肤Moonlightlnk
首页HTML代码
1 <link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/miangao/maodian.css"/*设置目录（首页HTML代码）*/> 2 3 4 5 <script type="text/javascript"> 6 /*设置小心心*/ 7 (function(window, document, undefined) { 8 var hearts = []; 9 window.requestAnimationFrame = (function() { 10 return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || 11 function(callback) { 12 setTimeout(callback, 1000 / 60); 13 } 14 })(); 15 init(); 16 function init() { 17 css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}"); 18 attachEvent(); 19 gameloop(); 20 } 21 function gameloop() { 22 for (var i = 0; i < hearts.length; i++) { 23 if (hearts[i].alpha <= 0) { 24 document.body.removeChild(hearts[i].el); 25 hearts.splice(i, 1); 26 continue; 27 } 28 hearts[i].y--; 29 hearts[i].scale += 0.004; 30 hearts[i].alpha -= 0.013; 31 hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color; 32 } 33 requestAnimationFrame(gameloop); 34 } 35 function attachEvent() { 36 var old = typeof window.onclick === "function" && window.onclick; 37 window.onclick = function(event) { 38 old && old(); 39 createHeart(event); 40 } 41 } 42 function createHeart(event) { 43 var d = document.createElement("div"); 44 d.className = "heart"; 45 hearts.push({ 46 el: d, 47 x: event.clientX - 5, 48 y: event.clientY - 5, 49 scale: 1, 50 alpha: 1, 51 color: randomColor() 52 }); 53 document.body.appendChild(d); 54 } 55 function css(css) { 56 var style = document.createElement("style"); 57 style.type = "text/css"; 58 try { 59 style.appendChild(document.createTextNode(css)); 60 } catch(ex) { 61 style.styleSheet.cssText = css; 62 } 63 document.getElementsByTagName('head')[0].appendChild(style); 64 } 65 function randomColor() { 66 return "rgb(" + (~~ (Math.random() * 255)) + "," + (~~ (Math.random() * 255)) + "," + (~~ (Math.random() * 255)) + ")"; 67 } 68 })(window, document); 69 </script> 70 71 72 73 74 75 <script type="text/javascript"> 76 /*自定义的鼠标点击效果*/ 77 /* 鼠标特效 */ 78 var a_idx = 0; 79 jQuery(document).ready(function($) { 80 $("body").click(function(e) { 81 var a = new Array("富强","民主","文明","和谐","菜鸟-传奇","自由","平等","公正","法治","菜鸟-传奇","爱国","敬业","诚信","友善","菜鸟-传奇"); 82 var $i = $("<span/>").text(a[a_idx]); 83 a_idx = (a_idx + 1) % a.length; 84 var x = e.pageX, 85 y = e.pageY; 86 $i.css({ 87 "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, 88 "top": y - 20, 89 "left": x, 90 "position": "absolute", 91 "font-weight": "bold", 92 "color": "rgb(72,85,137)" 93 }); 94 $("body").append($i); 95 $i.animate({ 96 "top": y - 180, 97 "opacity": 0 98 }, 99 1500, 100 function() { 101 $i.remove(); 102 }); 103 }); 104 }); 105 </script>
页脚HTML代码
1 <script src="https://files.cnblogs.com/files/miangao/bootstrap.min.js"/*设置目录（首脚HTML代码）*/></script>
如此简单明了
扫一扫
819
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
