zoukankan      html  css  js  c++  java
  • 博客美化篇

    博客美化网站推荐:

    推荐(下面大多是引用这三个blogs里面的东西的)三个 nice 的 博客美化blogs:

    全网最全的博客美化系列教程(疑似太监QAQ)

     自定义页面风格设计上篇

     自定义页面风格设计下篇

     注意事项:

    如果这些css代码放在你的 blog 里面没有效果,然后你发现保存设置后这些代码部分还消失了,那其实不是代码的问题

    原因大概就是你还没申请支持 js 代码使用,申请成功后你的博客侧边栏公告旁边应该是这样的:

    如果你的小括号里面有申请按钮的话,点进去填一下理由就好了,一般都能申请通过

    公告栏里的每日一言:

    <h4 class="ui top attached block header">一言(ヒトコト)</h4>
    
    
    <script>
              $.get('https://sslapi.hitokoto.cn/?c=a', function (data) {
                if (typeof data === 'string') data = JSON.parse(data);
                $('#hitokoto-loader').removeClass('active');
                $('#hitokoto-content').css('display', '').text(data.hitokoto);
                if (data.from) {
                  $('#hitokoto-from').css('display', '').text('——' + data.from);
                }
              });
              </script>
    <div style="font-size: 15px; line-height: 1.5em;" id="hitokoto-content"></div>
    <div style="text-align: right; margin-top: 15px; font-size: 15px; color: rgb(102, 102, 102);" id="hitokoto-from"></div>
    每日一言

    公告栏里的立方体:

      1 <div id="blog-news">
      2     
      3     <style>
      4         /*最外层容器样式*/
      5         .wrap {
      6              100px;
      7             height: 100px;
      8             margin: 150px;
      9             position: relative;
     10         }
     11  
     12         /*包裹所有容器样式*/
     13         .cube {
     14              50px;
     15             height: 50px;
     16             margin: 0 auto;
     17             transform-style: preserve-3d;
     18             transform: rotateX(-30deg) rotateY(-80deg);
     19             animation: rotate linear 20s infinite;
     20         }
     21  
     22         @-webkit-keyframes rotate {
     23             from {
     24                 transform: rotateX(0deg) rotateY(0deg);
     25             }
     26             to {
     27                 transform: rotateX(360deg) rotateY(360deg);
     28             }
     29         }
     30  
     31         .cube div {
     32             position: absolute;
     33              200px;
     34             height: 200px;
     35             opacity: 0.8;
     36             transition: all .4s;
     37         }
     38  
     39         /*定义所有图片样式*/
     40         .pic {
     41              200px;
     42             height: 200px;
     43         }
     44  
     45         .cube .out_front {
     46             transform: rotateY(0deg) translateZ(100px);
     47         }
     48  
     49         .cube .out_back {
     50             transform: translateZ(-100px) rotateY(180deg);
     51         }
     52  
     53         .cube .out_left {
     54             transform: rotateY(-90deg) translateZ(100px);
     55         }
     56  
     57         .cube .out_right {
     58             transform: rotateY(90deg) translateZ(100px);
     59         }
     60  
     61         .cube .out_top {
     62             transform: rotateX(90deg) translateZ(100px);
     63         }
     64  
     65         .cube .out_bottom {
     66             transform: rotateX(-90deg) translateZ(100px);
     67         }
     68  
     69         /*定义小正方体样式*/
     70         .cube span {
     71             display: block;
     72              100px;
     73             height: 100px;
     74             position: absolute;
     75             top: 50px;
     76             left: 50px;
     77         }
     78  
     79         .cube .in_pic {
     80              100px;
     81             height: 100px;
     82         }
     83  
     84         .cube .in_front {
     85             transform: rotateY(0deg) translateZ(50px);
     86         }
     87  
     88         .cube .in_back {
     89             transform: translateZ(-50px) rotateY(180deg);
     90         }
     91  
     92         .cube .in_left {
     93             transform: rotateY(-90deg) translateZ(50px);
     94         }
     95  
     96         .cube .in_right {
     97             transform: rotateY(90deg) translateZ(50px);
     98         }
     99  
    100         .cube .in_top {
    101             transform: rotateX(90deg) translateZ(50px);
    102         }
    103  
    104         .cube .in_bottom {
    105             transform: rotateX(-90deg) translateZ(50px);
    106         }
    107  
    108         /*鼠标移入后样式*/
    109         .cube:hover .out_front {
    110             transform: rotateY(0deg) translateZ(200px);
    111         }
    112  
    113         .cube:hover .out_back {
    114             transform: translateZ(-200px) rotateY(180deg);
    115         }
    116  
    117         .cube:hover .out_left {
    118             transform: rotateY(-90deg) translateZ(200px);
    119         }
    120  
    121         .cube:hover .out_right {
    122             transform: rotateY(90deg) translateZ(200px);
    123         }
    124  
    125         .cube:hover .out_top {
    126             transform: rotateX(90deg) translateZ(200px);
    127         }
    128  
    129         .cube:hover .out_bottom {
    130             transform: rotateX(-90deg) translateZ(200px);
    131         }
    132     </style>
    133 
    134 
    135     <!-- 外层最大容器 -->
    136     <div class="wrap">
    137         <!--包裹所有元素的容器-->
    138         <div class="cube">
    139             <!--前面图片 -->
    140             <div class="out_front">
    141                 <img src="http://你的图片.jpg" class="pic">
    142             </div>
    143             <!--后面图片 -->
    144             <div class="out_back">
    145                 <img src="http://你的图片.jpg" class="pic">
    146             </div>
    147             <!--左面图片 -->
    148             <div class="out_left">
    149                 <img src="https://你的图片.jpg" class="pic">
    150             </div>
    151             <!--右面图片 -->
    152             <div class="out_right">
    153                 <img src="https://你的图片.jpg" class="pic">
    154             </div>
    155             <!--上面图片 -->
    156             <div class="out_top">
    157                 <img src="https://你的图片.jpg" class="pic">
    158             </div>
    159             <!--下面图片 -->
    160             <div class="out_bottom">
    161                 <img src="http://你的图片.jpg" class="pic">
    162             </div>
    163  
    164             <!--小正方体 -->
    165             <span class="in_front">
    166                 <img src="https://你的图片.jpg" class="in_pic">
    167             </span>
    168             <span class="in_back">
    169                  <img src="https://你的图片.jpg" class="in_pic">
    170             </span>
    171             <span class="in_left">
    172                 <img src="https://你的图片.jpg" class="in_pic">
    173             </span>
    174             <span class="in_right">
    175                 <img src="http://你的图片.jpg" class="in_pic">
    176             </span>
    177             <span class="in_top">
    178                 <img src="http://你的图片.jpg" class="in_pic">
    179             </span>
    180             <span class="in_bottom">
    181                 <img src="http://你的图片.jpg" class="in_pic">
    182             </span>
    183         </div>
    184  
    185     </div>
    emmmm

    公告栏里的时钟:

    <embed src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf"
    width="230" height="100"></embed>
    clock

    公告栏里的地球:

    <embed src="//rf.revolvermaps.com/f/g.swf"
    width="230" height="230"></embed>
    地球

    页首(脚)Html里的点击效果:

    <!DOCTYPE html>
    <html>
    <script type="text/javascript">
    /* 鼠标特效 */
    var a_idx = 0;
    jQuery(document).ready(function($) {
        $("body").click(function(e) {
            var a = new Array("❤请❤","❤开始❤","❤你的❤","❤表演❤","★%%%♚bztdalao♚★");
            var $i = $("<span></span>").text(a[a_idx]);
            a_idx = (a_idx + 1) % a.length;
            var x = e.pageX,
            y = e.pageY;
            $i.css({
                "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-weight": "bold",
                "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
            });
            $("body").append($i);
            $i.animate({
                "top": y - 180,
                "opacity": 0
            },
            1500,
            function() {
                $i.remove();
            });
        });
    });
    </script>
    <body>
    
    
    /*  这里是其他的设置   */
    
    
    </body>
    </html>
    鼠标点击效果强化

    至于动态背景和背景变换之类的...算了吧 _(:з」∠)_

    页首(脚)Html里的看板娘:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <body>
    
        <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/Judge/waifu.css">
        <div class="waifu" id="waifu">
            <div class="waifu-tips" style="opacity: 1;"></div>
            <canvas id="live2d" right="0" width="280" height="250" class="live2d"></canvas>
            <div class="waifu-tool">
                <span class="fui-home"></span>
                <span class="fui-chat"></span>
                <span class="fui-eye"></span>
                <span class="fui-user"></span>
                <span class="fui-photo"></span>
                <span class="fui-info-circle"></span>
                <span class="fui-cross"></span>
            </div>
        </div>
        <script src="https://blog-static.cnblogs.com/files/judge/live2d.js"></script>
        <script src="https://blog-static.cnblogs.com/files/Judge/waifu-tips.js"></script>
        <script type="text/javascript">initModel()</script>
    
    </body>
    </html>
    
    看板娘
    看板娘

    但是看板娘不大想用...(风格问题emmmm)

    页首(脚)Html里的回到顶部:

     1 <style>
     2 #back-top {
     3      position: fixed;
     4      bottom: 0px;
     5      right: 10px;
     6      z-index: 99;
     7 }
     8 #back-top span {
     9       150px;
    10      height: 200px;
    11      display: block;
    12      background:url(你的图片.jpg)no-repeat center center;
    13 }
    14 #back-top a{outline:none}
    15 </style>
    16 
    17 <script type="text/javascript">
    18 $(function() {
    19     // hide #back-top first
    20     $("#back-top").hide();
    21     // fade in #back-top
    22     $(window).scroll(function() {
    23         if ($(this).scrollTop() > 500) {
    24             $('#back-top').fadeIn();
    25         } else {
    26             $('#back-top').fadeOut();
    27         }
    28     });
    29     // scroll body to 0px on click
    30     $('#back-top a').click(function() {
    31         $('body,html').animate({
    32             scrollTop: 0
    33         }, 800);
    34         return false;
    35     });
    36 });
    37 </script>
    38 
    39 <p id="back-top" style=""><a href="#top"><span></span></a></p>
    回到顶部

    这里的图片...emmmm

    其实还有另一个蛮不错的回到顶部(剽来的):

    1 <div class="back-to-top back-to-top-on">
    2         <i class="fa fa-arrow-up"></i>
    3         
    4           <span id="scrollpercent"><span>9</span>%</span>
    5         
    6       </div>
    回到顶部2

    页首(脚)Html里的目录索引列表:

     1 //生成目录索引列表
     2 function GenerateContentList()
     3 {
     4     var jquery_h1_list = $('#cnblogs_post_body h1');
     5     if (jquery_h1_list.length == 0) { return; }
     6     if ($('#cnblogs_post_body').length == 0) { return; }
     7 
     8     var content = '<a name="_labelTop"></a>';
     9     content    += '<div id="navCategory">';
    10     content    += '<p style="font-size:18px"><b>阅读目录(Content)</b></p>';
    11     // 一级目录 start
    12     content += '<ul class="first_class_ul">';
    13 
    14     for (var i = 0; i < jquery_h1_list.length; i++)
    15     {
    16 
    17         // 一级目录的一条
    18         var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h1_list[i]).text() + '</a></li>';
    19 
    20         var nextH1Index = i + 1;
    21         if (nextH1Index == jquery_h1_list.length) { nextH1Index = 0; }
    22         var jquery_h2_list = $(jquery_h1_list[i]).nextUntil(jquery_h1_list[nextH1Index], "h2");
    23         // 二级目录 start
    24         if (jquery_h2_list.length > 0)
    25         {
    26             //li_content +='<ul style="list-style-type:none; text-align: left; margin:2px 2px;">';
    27             li_content += '<ul class="second_class_ul">';
    28         }
    29         for (var j = 0; j < jquery_h2_list.length; j++)
    30         {
    31             var go_to_top2 = '<div style="text-align: right"><a name="_lab2_'+ i + '_' + j + '"></a></div>';
    32             $(jquery_h2_list[j]).before(go_to_top2);
    33             // 二级目录的一条
    34             li_content +='<li><a href="#_lab2_'+ i +'_' + j + '">' + $(jquery_h2_list[j]).text() + '</a></li>';
    35 
    36             var nextH2Index = j + 1;
    37             var next;
    38             if (nextH2Index == jquery_h2_list.length) 
    39             {
    40                 if (i + 1 == jquery_h1_list.length)
    41                 {
    42                     next = jquery_h1_list[0];
    43                 }
    44                 else
    45                 {
    46                     next = jquery_h1_list[i + 1];
    47                 }
    48             }
    49             else
    50             {
    51                 next = jquery_h2_list[nextH2Index];
    52             }
    53             var jquery_h3_list = $(jquery_h2_list[j]).nextUntil(next, "h3");
    54             // 三级目录 start
    55             if (jquery_h3_list.length > 0)
    56             {
    57                 li_content += '<ul class="third_class_ul">';
    58             }
    59             
    60             for (var k = 0; k < jquery_h3_list.length; k++)
    61             {
    62                 var go_to_third_Content = '<div style="text-align: right"><a name="_label3_' + i + '_' + j + '_' + k + '"></a></div>';
    63                 $(jquery_h3_list[k]).before(go_to_third_Content);
    64                 // 三级目录的一条
    65                 li_content += '<li><a href="#_label3_' + i + '_' + j + '_' + k + '">' + $(jquery_h3_list[k]).text() + '</a></li>';
    66             }
    67             
    68             if (jquery_h3_list.length > 0)
    69             {
    70                 li_content += '</ul>';
    71             }
    72             li_content += '</li>';
    73             // 三级目录 end
    74         }
    75         if (jquery_h2_list.length > 0)
    76         {
    77             li_content +='</ul>';
    78         }
    79         li_content +='</li>';
    80         // 二级目录 end
    81 
    82         content += li_content;
    83     }
    84     // 一级目录 end
    85     content += '</ul>';
    86     content += '</div>';
    87 
    88     $($('#cnblogs_post_body')[0]).prepend(content);
    89 }
    90 
    91 GenerateContentList();
    92 </script>
    目录索引列表

    页首(脚)Html里的黑点跟随系统: 

      1 <!DOCTYPE HTML>
      2 <html>
      3 <head>
      4 <title>follow mouse</title>
      5 <meta name="Author" content="hongru.chen" />
      6 <style type="text/css">
      7 html {
      8 overflow: hidden;
      9 }
     10 body {
     11 position: absolute;
     12 height: 100%;
     13  100%;
     14 margin:0;
     15 padding:0;
     16 }
     17 #screen {
     18 position: absolute;
     19  100%;
     20 height: 100%;
     21 }
     22 #screen span {
     23 background: #000;
     24 font-size: 0;
     25 overflow: hidden;
     26  2px;
     27 height: 2px;
     28 }
     29 </style>
     30   <script type="text/javascript"> 
     31 var Follow = function () {
     32 var $ = function (i) {return document.getElementById(i)},
     33 addEvent = function (o, e, f) {o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on'+e, function(){f.call(o)})},
     34 OBJ = [], sp, rs, N = 0, m;
     35 var init = function (id, config) {
     36 this.config = config || {};
     37 this.obj = $(id);
     38 sp = this.config.speed || 4;
     39 rs = this.config.animR || 1;
     40 m = {x: $(id).offsetWidth * .5, y: $(id).offsetHeight * .5};
     41 this.setXY();
     42 this.start();
     43 }
     44 init.prototype = {
     45 setXY : function () {
     46 var _this = this;
     47 addEvent(this.obj, 'mousemove', function (e) {
     48 e = e || window.event;
     49 m.x = e.clientX;
     50 m.y = e.clientY;
     51 })
     52 },
     53 start : function () {
     54 var k = 180 / Math.PI, OO, o, _this = this, fn = this.config.fn;
     55 OBJ[N++] = OO = new CObj(null, 0, 0);
     56 for(var i=0;i<360;i+=20){
     57 var O = OO;
     58 for(var j=10; j<35; j+=1){
     59 var x = fn(i, j).x,
     60 y = fn(i, j).y;
     61 OBJ[N++] = o = new CObj(O , x, y);
     62 O = o;
     63 }
     64 }
     65 setInterval(function() {
     66 for (var i = 0; i < N; i++) OBJ[i].run();
     67 }, 16);
     68 }
     69 }
     70 var CObj = function (p, cx, cy) {
     71 var obj = document.createElement("span");
     72 this.css = obj.style;
     73 this.css.position = "absolute";
     74 this.css.left = "-1000px";
     75 this.css.zIndex = 1000 - N;
     76 document.getElementById("screen").appendChild(obj);
     77 this.ddx = 0;
     78 this.ddy = 0;
     79 this.PX = 0;
     80 this.PY = 0;
     81 this.x = 0;
     82 this.y = 0;
     83 this.x0 = 0;
     84 this.y0 = 0;
     85 this.cx = cx;
     86 this.cy = cy;
     87 this.parent = p;
     88 }
     89 CObj.prototype.run = function () {
     90 if (!this.parent) {
     91 this.x0 = m.x;
     92 this.y0 = m.y;
     93 } else {
     94 this.x0 = this.parent.x;
     95 this.y0 = this.parent.y;
     96 }
     97 this.x = this.PX += (this.ddx += ((this.x0 - this.PX - this.ddx) + this.cx) / rs) / sp;
     98 this.y = this.PY += (this.ddy += ((this.y0 - this.PY - this.ddy) + this.cy) / rs) / sp;
     99 this.css.left = Math.round(this.x) + 'px';
    100 this.css.top = Math.round(this.y) + 'px';
    101 }
    102 return init;
    103 }();
    104 </script></head>
    105 <body>
    106 <div id="screen"></div>
    107 <script type="text/javascript">
    108 new Follow('screen', {speed: 4,
    109 animR : 2,
    110 fn : function (i, j) {
    111 return {
    112 x : j/4*Math.cos(i),
    113 y : j/4*Math.sin(i)
    114 }
    115 }})
    116   </script></body>
    117 </html>
    黑点跟随

    页首(脚)Html里的自动目录栏 :

    1 <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    2 <link href="https://blog-static.cnblogs.com/files/marvin/Wiz_marvin.nav.css" rel="stylesheet">
    3 <script type="text/javascript" src="https://blog-static.cnblogs.com/files/marvin/Wiz_marvin.nav.js"></script>
    自动目录栏

    页首(脚)Html标题切换:

     1 <script type="text/javascript">  
     2 var OriginTitile = document.title;    // 保存之前页面标题  
     3 var titleTime;  
     4 document.addEventListener('visibilitychange', function(){  
     5     if (document.hidden){  
     6         document.title ='click here';  
     7         clearTimeout(titleTime);  
     8     }else{  
     9         document.title = '你回来了QvQ';  
    10         titleTime = setTimeout(function() {  
    11             document.title = OriginTitile;  
    12         }, 1000);
    13     }  
    14 });  
    15 </script>
    View Code

    页面定制里的鼠标图案变换:

    body {
        cursor: url(你的ico图片.ico 或者是 你的cur文件.cur ),auto;
    }
    鼠标图案
  • 相关阅读:
    [Golang学习笔记] 06 程序实体3 类型断言和类型转换
    [Golang学习笔记] 05 程序实体2 作用域访问权限和变量重声明
    [Golang学习笔记] 04 程序实体1 变量声明
    [Golang学习笔记] 03 库源码文件
    virgo-tomcat-server的生产环境线上配置与管理
    virgo-tomcat-server最大并发连接数的修改
    linux系统下kvm虚拟机的安装
    关于virgo-tomcat-server-3.6.0.RELEASE配置文件修改说明
    关于在Linux下apache-maven的安装
    H3C系列之三层交换机文件管理
  • 原文地址:https://www.cnblogs.com/Judge/p/9460601.html
Copyright © 2011-2022 走看看