啦啦啦啦
现在的主题更好看了呢,改进了一些bug!
1.首页侧栏错位
改进:在CSS加代码
1 #main { 2 display: flex !important; 3 flex-direction: row-reverse !important; 4 padding: 0 !important; 5 } 6 7 #mainContent { 8 flex: 1 !important; 9 float: initial !important; 10 } 11 12 #sideBar { 13 margin-left: 0 !important; 14 left: 0 !important; 15 float: initial !important; 16 }
2.透明度
增加各部分透明度:(有的就直接在里面加上那行透明度设置,代码里没有的就自己粘贴,看不懂就算了)
(其实我感觉都放在css也行,我随便放的)
CSS中:
1 #sideBar h3 { 2 margin: 16px 0 0 0px; 3 background: rgba(255,255,255, 0.4) !important; 4 } 5 6 .commentbox_main{ 7 background: rgba(255,255,255, 0.4) !important; 8 } 9 10 .commentbox_main #tbCommentBody { 11 background: rgba(255,255,255, 0.4) !important; 12 } 13 14 #q { 15 background: rgba(255,255,255, 0.4) !important; 16 } 17 18 #google_q { 19 background: rgba(255,255,255, 0.4) !important; 20 } 21 22 #mainContent { 23 flex: 1 !important; 24 float: initial !important; 25 background: rgba(255,255,255, 0.4) !important; 26 } 27 28 #mainContent .day { 29 background: rgba(255,255,255, 0); 30 } 31 32 #mainContent .day .c_b_p_desc { 33 background: rgba(255,255,255, 0.8) !important; 34 } 35 36 #mainContent .postDesc { 37 background: rgba(255,255,255, 0) !important; 38 }
1 #navCategory { 2 background: rgba(255,255,255, 0.6) !important; 3 }
页首HTML:
1 #home { 2 border-top-right-radius: 0; 3 background: rgba(255,255,255, 0.6); 4 } 5 6 #home .post { 7 background: rgba(255,255,255, 0) !important; 8 } 9 10 #mainContent #comment_form { 11 background: rgba(255,255,255, 0); 12 } 13 14 #sideBarMain { 15 margin: 0; 16 padding-right: 20px; 17 padding-left: 5px; 18 background: rgba(255,255,255, 0.4); 19 }
3.背景图片平铺(不拉伸变形)
页首HTML代码:(图片链接要大图的)
body{ background-size: cover; }
4.页面最底下的白线
改进:(CSS)
1 ::-webkit-scrollbar-track-piece { 2 background-color: initial !important; 3 } 4 5 #mainContent::-webkit-scrollbar-track-piece { 6 background-color: initial !important; 7 }
5.某个没带绿帽的bug
1 #sideBar h3 { 2 margin: 16px 0 0 0px; 3 }
6.去广告
1 div[id^="ad_"] { 2 display: none; 3 } 4 div[class^="c_ad"] { 5 display: none; 6 } 7 div[id^="under_post"] { 8 display: none; 9 }
7.图片转化成icon图标
写在博客侧边栏公告(申请支持js权限)
1 <script type="text/javascript" language="javascript"> 2 //Setting ico for cnblogs 3 var linkObject = document.createElement('link'); 4 linkObject.rel = "shortcut icon"; 5 linkObject.href = "图片地址"; 6 document.getElementsByTagName("head")[0].appendChild(linkObject); 7 </script>
8.隐藏推荐反对
1 #div_digg{ 2 display: none; 3 }
9.爱心鼠标特效
在支持js的侧边栏里写:
1 <!-- 爱心特效 --> 2 <script type="text/javascript"> 3 4 (function(window,document,undefined){ 5 var hearts = []; 6 window.requestAnimationFrame = (function(){ 7 return window.requestAnimationFrame || 8 window.webkitRequestAnimationFrame || 9 window.mozRequestAnimationFrame || 10 window.oRequestAnimationFrame || 11 window.msRequestAnimationFrame || 12 function (callback){ 13 setTimeout(callback,1000/60); 14 } 15 })(); 16 init(); 17 function init(){ 18 css(".heart{ 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: ''; 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;}"); 19 attachEvent(); 20 gameloop(); 21 } 22 function gameloop(){ 23 for(var i=0;i<hearts.length;i++){ 24 if(hearts[i].alpha <=0){ 25 document.body.removeChild(hearts[i].el); 26 hearts.splice(i,1); 27 continue; 28 } 29 hearts[i].y--; 30 hearts[i].scale += 0.004; 31 hearts[i].alpha -= 0.013; 32 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; 33 } 34 requestAnimationFrame(gameloop); 35 } 36 function attachEvent(){ 37 var old = typeof window.onclick==="function" && window.onclick; 38 window.onclick = function(event){ 39 old && old(); 40 createHeart(event); 41 } 42 } 43 function createHeart(event){ 44 var d = document.createElement("div"); 45 d.className = "heart"; 46 hearts.push({ 47 el : d, 48 x : event.clientX - 5, 49 y : event.clientY - 5, 50 scale : 1, 51 alpha : 1, 52 color : randomColor() 53 }); 54 document.body.appendChild(d); 55 } 56 function css(css){ 57 var style = document.createElement("style"); 58 style.type="text/css"; 59 try{ 60 style.appendChild(document.createTextNode(css)); 61 }catch(ex){ 62 style.styleSheet.cssText = css; 63 } 64 document.getElementsByTagName('head')[0].appendChild(style); 65 } 66 function randomColor(){ 67 return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")"; 68 } 69 })(window,document); 70 71 </script>
10.烟花鼠标特效
1 <script src="https://files.cnblogs.com/files/MiKihuahua/mouse-click.js"></script> 2 <canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>
11.更换鼠标样式
在CSS的body中增加:
(图片要用ico格式的,转换格式网址:http://www.easyicon.net/covert/)
cursor: url("图片地址"),auto;
12.雪花特效
(js里加)
1 <!--雪花特效--> 2 <script src="https://files.cnblogs.com/files/MiKihuahua/jquery-1.7.1.min.js"></script> 3 <script src="https://files.cnblogs.com/files/MiKihuahua/jquery.snow.js"></script> 4 <script> 5 (function($){$.fn.snow=function(options){var $flake=$('<div id="flake" />').css({'position':'absolute','top':'-50px'}).html('❄'),documentHeight=$(document).height(),documentWidth=$(document).width(),defaults={minSize:10,maxSize:30,newOn:400,flakeColor:"#CA8EFF"},options=$.extend({},defaults,options);var interval=setInterval(function(){var startPositionLeft=Math.random()*documentWidth-100,startOpacity=0.5+Math.random(),sizeFlake=options.minSize+Math.random()*options.maxSize,endPositionTop=documentHeight-40,endPositionLeft=startPositionLeft-100+Math.random()*200,durationFall=documentHeight*10+Math.random()*5000;$flake.clone().appendTo('body').css({left:startPositionLeft,opacity:startOpacity,'font-size':sizeFlake,color:options.flakeColor}).animate({top:endPositionTop,left:endPositionLeft,opacity:0.2},durationFall,'linear',function(){$(this).remove()});},options.newOn);};})(jQuery); 6 $.fn.snow({ minSize: 5, maxSize: 40, newOn: 700, flakeColor: '#408080' }); 7 </script>
13.背景吸附线条
(js里加)
1 <script id="c_n_script" src="https://files.cnblogs.com/files/MiKihuahua/xiantiaoxifu.js" color="0,255,255" opacity="2" count="100" zindex="-2"> 2 if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { 3 } 4 else { 5 } 6 </script>
14.颜色代码网址
16进制颜色代码表:https://www.917118.com/tool/color_5.html
RGB和16进制颜色转换:https://www.sioe.cn/yingyong/yanse-rgb-16/
差不多就是这样啦,我还是很喜欢的!!
都是我(某炜)的心血啊!
就差适配手机了,再说吧嘻嘻嘻
(部分修改代码来自网络,侵删)