zoukankan      html  css  js  c++  java
  • 改进自定义博客

    啦啦啦啦

    现在的主题更好看了呢,改进了一些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/

    差不多就是这样啦,我还是很喜欢的!!

    都是我(某炜)的心血啊!

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

    (部分修改代码来自网络,侵删)

  • 相关阅读:
    「枫桥夜泊」一诗
    走遍亚洲 —— 泰国
    走遍亚洲 —— 泰国
    暴露年龄
    暴露年龄
    插入排序(insertion sort)
    开机黑屏 仅仅显示鼠标 电脑黑屏 仅仅有鼠标 移动 [已成功解决]
    OpenCV For iOS 1:&#160;连接OpenCV 3.0
    插入排序
    [hadoop系列]Pig的安装和简单演示样例
  • 原文地址:https://www.cnblogs.com/MiKihuahua/p/zhinan_blog_modify.html
Copyright © 2011-2022 走看看