zoukankan      html  css  js  c++  java
  • 博客园自定义样式

    本站点采用的博客皮肤是SimpleMemory!

    页面定制CSS代码

      1 /*博客皮肤:SimpleMemory*/
      2 /*自定义样式如下:*/
      3 #google_ad_c1,
      4 #google_ad_c2 {
      5     display: none;
      6 }
      7 
      8 .syntaxhighlighter a,
      9 .syntaxhighlighter div,
     10 .syntaxhighlighter code,
     11 .syntaxhighlighter table,
     12 .syntaxhighlighter table td,
     13 .syntaxhighlighter table tr,
     14 .syntaxhighlighter table tbody,
     15 .syntaxhighlighter table thead,
     16 .syntaxhighlighter table caption,
     17 .syntaxhighlighter textarea {
     18     font-size: 14px !important;
     19 }
     20 
     21 #home {
     22     opacity: 0.90;
     23     margin: 0 auto;
     24     width: 75%;
     25     min-width: 950px;
     26     background-color: #fff;
     27     padding: 30px;
     28     margin-top: 200px;
     29     margin-bottom: 50px;
     30     box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
     31 }
     32 
     33 #blogTitle h1 {
     34     font-size: 40px;
     35     font-weight: bold;
     36     font-family: "Comic Sans MS";
     37     line-height: 1.5em;
     38     margin-top: 20px;
     39     color: #515151;
     40 }
     41 
     42 #blogTitle h2 {
     43     font-weight: normal;
     44     font-size: 13px;
     45     font-size: 0.928571429rem;
     46     line-height: 1.846153846;
     47     color: #000;
     48     float: left;
     49 }
     50 
     51 #navList a:hover {
     52     color: #4C9ED9;
     53     text-decoration: none;
     54 }
     55 
     56 #navList a {
     57     display: block;
     58     width: 5em;
     59     height: 22px;
     60     float: left;
     61     text-align: center;
     62     padding-top: 18px;
     63 }
     64 
     65 #navigator {
     66     font-size: 15px;
     67     border-bottom: 1px solid #000;
     68     border-top: 1px solid #000;
     69     height: 55px;
     70     clear: both;
     71     margin-top: 35px;
     72 }
     73 
     74 .blogStats {
     75     float: right;
     76     color: #000;
     77     margin-top: 19px;
     78     margin-right: 2px;
     79     text-align: right;
     80 }
     81 
     82 
     83 .catListTitle {
     84     margin-top: 21px;
     85     margin-bottom: 10.5px;
     86     text-align: left;
     87     border-left: 10px solid rgba(255, 97, 0, 0.8);
     88     padding: 10px 0 14px 10px;
     89     background-color: #f5f5f5;
     90 }
     91 
     92 #ad_under_post_holder #google_ad_c1,
     93 #google_ad_c2 {
     94     display: none !important;
     95 }
     96 
     97 body {
     98     color: #000;
     99     background: url(https://img2018.cnblogs.com/blog/1336165/201908/1336165-20190820121359731-568214352.jpg
    100 ) fixed;
    101     background-size: cover;
    102     background-repeat: repeat;
    103     font-family: "微软雅黑", "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif;
    104     font-size: 12px;
    105     min-height: 100%;
    106 }
    107 
    108 #topics .postTitle {
    109     border: 0px;
    110     font-size: 200%;
    111     font-weight: bold;
    112     float: left;
    113     line-height: 1.5;
    114     width: 100%;
    115     padding-left: 5px;
    116 }
    117 
    118 
    119 .postTitle {
    120     border-left: 3px solid #e74c3c;
    121     margin-bottom: 10px;
    122     font-size: 20px;
    123     float: right;
    124     width: 100%;
    125     clear: both;
    126 }
    127 /*文章主题样式*/
    128 .postTitle a:link, .postTitle a:visited, .postTitle a:active {
    129     color: #21759b;
    130     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s;
    131 }
    132 
    133 
    134 
    135 .feedbackItem {
    136     font-size: 14px;
    137     line-height: 24px;
    138     margin: 10px 0;
    139     padding: 20px;
    140     background: #F2F2F2;
    141     box-shadow: 0 0 5px #aaa;
    142 }
    143 
    144 .feedbackListSubtitle {
    145     font-weight: normal;
    146 }
    147 
    148 
    149 .feedback_area_title {
    150     margin-bottom: 15px;
    151     font-size: 1.8em;
    152 }
    153 
    154 .feedbackItem {
    155     border-bottom: 1px solid #CCC;
    156     margin-bottom: 10px;
    157     padding: 5px;
    158     background: rgb(248, 248, 248);
    159 }
    160 
    161 .color_shine {
    162     background: rgb(226, 242, 255);
    163 }
    164 
    165 .feedbackItem:hover {
    166     -webkit-animation-name: color_shine;
    167     -webkit-animation-duration: 2s;
    168     -webkit-animation-iteration-count: infinite;
    169 }
    170 
    171 
    172 
    173 
    174 /*代码样式*/
    175 /*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
    176 .pln {
    177     color: #131513
    178 }
    179 
    180 ol.linenums {
    181     margin-top: 0;
    182     margin-bottom: 0;
    183     color: #809980
    184 }
    185 
    186 li.L0,
    187 li.L1,
    188 li.L2,
    189 li.L3,
    190 li.L4,
    191 li.L5,
    192 li.L6,
    193 li.L7,
    194 li.L8,
    195 li.L9 {
    196     padding-left: 1em;
    197     background-color: #f4fbf4;
    198     list-style-type: decimal
    199 }
    200 
    201 @media screen {
    202     .str {
    203         color: #29a329
    204     }
    205 
    206     .kwd {
    207         color: #ad2bee
    208     }
    209 
    210     .com {
    211         color: #809980
    212     }
    213 
    214     .typ {
    215         color: #3d62f5
    216     }
    217 
    218     .lit {
    219         color: #87711d
    220     }
    221 
    222     .pun {
    223         color: #131513
    224     }
    225 
    226     .opn {
    227         color: #131513
    228     }
    229 
    230     .clo {
    231         color: #131513
    232     }
    233 
    234     .tag {
    235         color: #e6193c
    236     }
    237 
    238     .atn {
    239         color: #87711d
    240     }
    241 
    242     .atv {
    243         color: #1999b3
    244     }
    245 
    246     .dec {
    247         color: #87711d
    248     }
    249 
    250     .var {
    251         color: #e6193c
    252     }
    253 
    254     .fun {
    255         color: #3d62f5
    256     }
    257 }
    258 
    259 
    260 /*markdown设置背景色,字体大小和字体*/
    261 code {
    262     padding: 1px 3px;
    263     margin: 0 3px;
    264     background: #ddd;
    265     border: 1px solid #ccc;
    266     font-family: Menlo, Monaco, Andale Mono, lucida console, Courier New, monospace;
    267     word-wrap: break-word;
    268     font-size: 14px;
    269 }
    270 
    271 .cnblogs-markdown code {
    272     background: #fff !important;
    273 }
    274 
    275 .cnblogs_code,
    276 .cnblogs_code span,
    277 .cnblogs-markdown .hljs {
    278     font-size: 14px !important;
    279     font-family: consolas, "Source Code Pro", monaco, monospace !important;
    280 }
    281 
    282 
    283 /*文章标题样式*/
    284 #cnblogs_post_body h1 {
    285     background: #000000;
    286     border-radius: 6px 6px 6px 6px;
    287     color: #FFFFFF;
    288     font-family: FZShuTi, "微软雅黑", "宋体", "黑体", Arial;
    289     font-size: 20px;
    290     font-weight: bold;
    291     height: 24px;
    292     line-height: 23px;
    293     margin: 18px 0 !important;
    294     padding: 12px 0 8px 5px;
    295     padding-left: 5px;
    296     text-shadow: 2px 2px 3px #222222;
    297     box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    298     text-align: left;
    299     margin: 12px 0 !important;
    300     width: 95%
    301 }
    302 
    303 #cnblogs_post_body h2 {
    304     background-color: #8bc34a;
    305     border-radius: 6px;
    306     border: none;
    307     color: #fff;
    308     font-family: "微软雅黑", "宋体", "黑体", Arial;
    309     font-weight: 700;
    310     font-size: 1.4em;
    311     line-height: 1.4em;
    312     text-shadow: 2px 2px 3px #222;
    313     box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    314     padding: 10px;
    315     margin: 18px 0 18px 0 !important;
    316     width: 95%;
    317 }
    318 
    319 #cnblogs_post_body h3 {
    320     background-color: #2b6695;
    321     border-radius: 6px;
    322     border: none;
    323     color: #fff;
    324     font-family: "微软雅黑", "宋体", "黑体", Arial;
    325     font-weight: 700;
    326     font-size: 1.2em;
    327     line-height: 1.2em;
    328     text-shadow: 2px 2px 3px #222;
    329     box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    330     padding: 10px;
    331     margin: 12px 0 !important;
    332     width: 95%;
    333 }
    334 
    335 #cnblogs_post_body h4 {
    336     background-color: #33cb97;
    337     border-radius: 5px;
    338     text-align: left;
    339     color: white;
    340     text-shadow: 1px 1px 2px #222222;
    341     font-family: "微软雅黑", "宋体", "黑体", Arial;
    342     font-size: 14px;
    343     font-weight: bold;
    344     height: 21px;
    345     line-height: 20px;
    346     box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    347     padding: 10px;
    348     margin: 12px 0 !important;
    349     width: 95%;
    350 }
    351 
    352 /*文章表格样式*/
    353 #cnblogs_post_body table {
    354     text-align: center;
    355     width: 100%;
    356     border: 1px solid #dedede;
    357     margin: 15px 0;
    358     border-collapse: collapse;
    359 }
    360 
    361 #cnblogs_post_body table thead tr {
    362     background: #f8f8f8;
    363 }
    364 
    365 #cnblogs_post_body table tbody tr:hover {
    366     background: #efefef;
    367 }
    368 
    369 /*文章内容字体样式*/
    370 #cnblogs_post_body {
    371     color: black;
    372     font-family: 'comic sans ms', sans-serif;
    373     font-size: 16px;
    374 }
    375 
    376 /* 去除a标签下划线 */
    377 .postBody a:link,
    378 .postBody a:visited,
    379 .postBody a:active {
    380     text-decoration: none;
    381 }
    382 
    383 /* adblock去除广告 */
    384 #ad_t2 {
    385     display: none;
    386 }
    387 
    388 .c_ad_block {
    389     display: none;
    390 }
    391 
    392 /* 定制公告栏时钟位置 */
    393 #clockdiv {
    394     text-align: center;
    395 }
    396 
    397 /* 定制公告栏音乐插件的样式 */
    398 .aplayer {
    399     /*音乐插件字体*/
    400     font-family: Arial, Helvetica, sans-serif;
    401     margin: 0px;
    402     /*音乐插件与公告栏左边的边距,0px就是直接抵到公告栏左边的边上*/
    403     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    404     border-radius: 2px;
    405     overflow: hidden;
    406     -webkit-user-select: none;
    407     -moz-user-select: none;
    408     -ms-user-select: none;
    409     user-select: none;
    410     line-height: normal;
    411 }
    412 
    413 /*隐藏反对按钮*/
    414 .buryit {
    415     display: none;
    416 }
    417 
    418 /*版权声明*/
    419 #MySignature {
    420     border: solid 1px #E5E5E5;
    421     padding: 10px;
    422     background: #E5EEF7 url(https://files-cdn.cnblogs.com/files/acgoto/o_o_o_info.ico) no-repeat scroll 15px 50%;
    423     padding-left: 80px;
    424 }
    425 
    426 #MySignature div {
    427     line-height: 20px;
    428 }
    View Code

    版权声明

    添加版权声明要去博客后台设置博客签名,标题为“版权声明”,内容自行修改,如下设置:

    <div>作者:<a href="http://www.cnblogs.com/acgoto/" target="_blank">霜雪千年</a></div>
    <div>出处:<a href="http://www.cnblogs.com/acgoto/" target="_blank">http://www.cnblogs.com/acgoto/</a></div>
    <div>本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须在文章页面给出原文连接,否则保留追究法律责任的权利。 </div>

    博客侧边栏公告(支持HTML代码)(支持JS代码)

      1 <p class="p">弱校挣扎的一名蒟蒻</p>
      2 <p>--------------------------------------</p>
      3 
      4 
      5 <!-- 添加公告栏时钟 -->
      6 <div id="clockdiv">
      7     <canvas id="dom" width="120" height="120">时钟canvas</canvas>
      8 </div>
      9 <script type="text/javascript" src="https://files.cnblogs.com/files/shwee/clock.js"></script>
     10 <p>--------------------------------------</p>
     11 
     12 
     13 <!-- 各国访问流量统计 -->
     14 <a href="http://s05.flagcounter.com/more/UuA"><img src="https://s05.flagcounter.com/count/UuA/bg_55FF00/txt_000000/border_CCCCCC/columns_2/maxflags_10/viewers_0/labels_1/pageviews_1/flags_0/percent_0/" alt="Flag Counter" border="0"></a>
     15 <p>--------------------------------------</p>
     16 
     17 
     18 <!-- 鼠标点击效果 -->
     19 <script type="text/javascript">
     20 /* 鼠标特效 */
     21 var a_idx = 0;
     22 jQuery(document).ready(function($) {
     23     $("body").click(function(e) {
     24         var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤");
     25         var $i = $("<span></span>").text(a[a_idx]);
     26         a_idx = (a_idx + 5) % a.length;
     27         var x = e.pageX, // 参照点为浏览器内容区域的左上角
     28         y = e.pageY;
     29         $i.css({
     30             "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
     31             "top": y - 20,
     32             "left": x,
     33             "position": "absolute",
     34             "font-weight": "bold",
     35             "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
     36         });
     37         $("body").append($i);
     38         $i.animate({
     39             "top": y - 180,
     40             "opacity": 0
     41         },
     42         1500,
     43         function() {
     44             $i.remove();
     45         });
     46     });
     47 });
     48 </script>
     49 <p>--------------------------------------</p>
     50 
     51 <!-- 或者用这个鼠标点击爱心效果 -->
     52 <script type="text/javascript">
     53 /* 鼠标特效 */
     54 ! function(e, t, a) {
     55   function n() { c(".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: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), o(), r() }
     56 
     57   function r() {
     58     for (var e = 0; e < d.length; e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--, d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999");
     59     requestAnimationFrame(r)
     60   }
     61 
     62   function o() {
     63     var t = "function" == typeof e.onclick && e.onclick;
     64     e.onclick = function(e) { t && t(), i(e) }
     65   }
     66 
     67   function i(e) {
     68     var a = t.createElement("div");
     69     a.className = "heart", d.push({ el: a, x: e.clientX - 5, y: e.clientY - 5, scale: 1, alpha: 1, color: s() }), t.body.appendChild(a)
     70   }
     71 
     72   function c(e) {
     73     var a = t.createElement("style");
     74     a.type = "text/css";
     75     try { a.appendChild(t.createTextNode(e)) } catch (t) { a.styleSheet.cssText = e } t.getElementsByTagName("head")[0].appendChild(a)
     76   }
     77 
     78   function s() { return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")" }
     79   var d = [];
     80   e.requestAnimationFrame = function() { return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function(e) { setTimeout(e, 1e3 / 60) } }(), n()
     81 }(window, document);
     82 </script>
     83 
     84 
     85 <!-- 为博客侧边栏添加音乐组件 -->
     86 <div id="player" class="aplayer"></div>
     87 <link href="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.css" rel="stylesheet">
     88 <script src="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.js"></script>
     89 
     90 <script type="text/javascript">
     91     var ap = new APlayer({
     92         element: document.getElementById('player'),
     93         narrow: false,
     94         autoplay: false,          // 是否自动播放
     95         showlrc: false,
     96         theme: '#F5F5F5',      // 建议插件背景颜色和公告栏背景色一样
     97         music: [{
     98             title: '曲名',
     99             author: '歌手名',
    100             url: '歌曲链接',
    101             pic: '歌曲封面'
    102         }]
    103     });
    104     ap.init();
    105 </script>
    106 
    107 
    108 <!-- 给网页背景添加动态线条 -->
    109 <script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
    View Code

    页首HTML代码

     1 <!--添加快速置顶小火箭-->
     2 <style>
     3     #back-top {
     4         position: fixed;
     5         bottom: 10px;
     6         right: 5px;
     7         z-index: 99;
     8     }
     9     #back-top span {
    10         width: 50px;
    11         height: 64px;
    12         display: block;
    13         background:url(
    14             https://files.cnblogs.com/files/acgoto/o_rocket.ico) no-repeat center center;
    15     }
    16     #back-top a{outline:none}
    17 </style>
    18 <script type="text/javascript">
    19     $(function() {
    20     // hide #back-top first
    21     $("#back-top").hide();
    22     // fade in #back-top
    23     $(window).scroll(function() {
    24         if ($(this).scrollTop() > 500) {
    25             $('#back-top').fadeIn();
    26         } else {
    27             $('#back-top').fadeOut();
    28         }
    29     });
    30     // scroll body to 0px on click
    31     $('#back-top a').click(function() {
    32         $('body,html').animate({
    33             scrollTop: 0
    34         }, 800);
    35         return false;
    36     });
    37 });
    38 </script>
    39 <p id="back-top" style="display:none"><a href="#top"><span></span></a></p>

    页脚HTML代码

    1 <script src="http://files.cnblogs.com/files/flipped/prettify.js"></script>
    2 <script type="text/javascript">
    3 (function() {
    4      $("pre").addClass("prettyprint");
    5      prettyPrint();
    6 })();
    7 </script>

    高清背景图

  • 相关阅读:
    Mac 卸载MySql的方法
    关于mysql的wait_timeout参数 设置不生效的问题
    linux下利用nohup后台运行jar文件包程序
    MySql创建视图
    spring mvc获取header
    Spring Data Jpa 查询返回自定义对象
    Caused by: org.xml.sax.SAXParseException: The reference to entity "characterEncoding" must end with the ';' delimiter.
    eclipse Reference 功能之——项目之间的引用
    Mac 在启动eclipse时 Failed to load JavaHL Library解决方法
    MySQL Workbench update语句错误Error Code: 1175.
  • 原文地址:https://www.cnblogs.com/acgoto/p/11354964.html
Copyright © 2011-2022 走看看