改进自定义博客

啦啦啦啦

现在的主题更好看了呢，改进了一些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('&#10052;'),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/

差不多就是这样啦，我还是很喜欢的！！

都是我（某炜）的心血啊！

就差适配手机了，再说吧嘻嘻嘻

（部分修改代码来自网络，侵删）

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/MiKihuahua/p/zhinan_blog_modify.html