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;
    }
    鼠标图案
  • 相关阅读:
    进制
    流程控制
    运算符
    格式化输出
    数据结构-树的遍历
    A1004 Counting Leaves (30分)
    A1106 Lowest Price in Supply Chain (25分)
    A1094 The Largest Generation (25分)
    A1090 Highest Price in Supply Chain (25分)
    A1079 Total Sales of Supply Chain (25分)
  • 原文地址:https://www.cnblogs.com/Judge/p/9460601.html
Copyright © 2011-2022 走看看