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

    标题

    /*标题h1 h2 h3样式*/
    #cnblogs_post_body {
        color: black;
        font: 0.875em/1.5em"微软雅黑", "PTSans", "Arial", sans-serif;
        font-size: 16px;
    }
    #cnblogs_post_body h1 {
        background:     #666666 ;
        border-radius: 6px 6px 6px 6px;
        box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
        color: #FFFFFF;
        font-family:"微软雅黑", "宋体", "黑体", Arial;
        font-size: 18px;
        font-weight: bold;
        height: 25px;
        line-height: 25px;
        margin: 18px 0 !important;
        padding: 8px 0 5px 5px;
        text-shadow: 2px 2px 3px #222222;
    }
    #cnblogs_post_body h2 {
        background:     #666666 ;
        border-radius: 6px 6px 6px 6px;
        box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
        color: #FFFFFF;
        font-family:"微软雅黑", "宋体", "黑体", Arial;
        font-size: 15px;
        font-weight: bold;
        height: 24px;
        line-height: 23px;
        margin: 12px 0 !important;
        padding: 5px 0 5px 10px;
        text-shadow: 2px 2px 3px #222222;
    }
    #cnblogs_post_body h3 {
        background: #666666 ;
        border-radius: 6px 6px 6px 6px;
        box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
        color: #FFFFFF;
        font-family:"微软雅黑", "宋体", "黑体", Arial;
        font-size: 13px;
        font-weight: bold;
        height: 24px;
        line-height: 20px;
        margin: 12px 0 !important;
        padding: 5px 0 5px 10px;
        text-shadow: 2px 2px 3px #222222;
    }

     绿色背景标题:

    /*标题2*/
    #cnblogs_post_body h2 {
        color: #fff;
        padding-left: 15px;
        background-color: #00CED1 !important;
        text-shadow: 2px 2px 3px #222222;
        font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
        margin-bottom: 5px;
    }
    /*标题3*/
    #cnblogs_post_body h3 {
        color: #00CED1;
        border-left: 13px solid #00CED1;
        padding: 5px;
        background-color: #f5f5f5;
    }

     红色背景标题:

    /*标题2*/
    #cnblogs_post_body h2 {
        color: #fff;
        padding-left: 15px;
        background-color: #FF0000 !important;
        text-shadow: 2px 2px 3px #222222;
        font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
        margin-bottom: 5px;
    }
    /*标题3*/
    #cnblogs_post_body h3 {
        color: #000000;
        border-left: 13px solid #FF0000;
        padding: 5px;
        background-color: #f5f5f5;
    }

    正文目录 页脚Html代码

    <script language="javascript" type="text/javascript">
    
    // 生成目录索引列表
    // ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
    // modified by: zzq
    function GenerateContentList()
    {
        var mainContent = $('#cnblogs_post_body');
        var h2_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可
    
        if(mainContent.length < 1)
            return;
     
        if(h2_list.length>0)
        {
            var content = '<a name="_labelTop"></a>';
            content += '<div id="navCategory">';
            content += '<p style="font-size:18px"><b>目录</b></p>';
            content += '<ul>';
            for(var i=0; i<h2_list.length; i++)
            {
                var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label' + i + '"></a></div>';
                $(h2_list[i]).before(go_to_top);
                
                var h3_list = $(h2_list[i]).nextAll("h3");
                var li3_content = '';
                for(var j=0; j<h3_list.length; j++)
                {
                    var tmp = $(h3_list[j]).prevAll('h2').first();
                    if(!tmp.is(h2_list[i]))
                        break;
                    var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
                    $(h3_list[j]).before(li3_anchor);
                    li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';
                }
                
                var li2_content = '';
                if(li3_content.length > 0)
                    li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
                else
                    li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
                content += li2_content;
            }
            content += '</ul>';
            content += '</div><p>&nbsp;</p>';
            content += '<p style="font-size:18px"><b>正文</b></p>';
            if($('#cnblogs_post_body').length != 0 )
            {
                $($('#cnblogs_post_body')[0]).prepend(content);
            }
        }   
    
        var qqinfo =  '<p style="color:navy;font-size:12px">讨论QQ群:135202158</p>';
        $(mainContent[0]).prepend(qqinfo);
    }
    
    GenerateContentList();
    </script>

     

    小飞机 页脚Html代码

    <style>
    #back-top {
         position: fixed;
         bottom: 10px;
         right: 5px;
         z-index: 99;
    }
    #back-top span {
          50px;
         height: 64px;
         display: block;
         background:url(http://images.cnblogs.com/cnblogs_com/seanshao/855033/o_rocket.png) no-repeat center center;
    }
    #back-top a{outline:none}
    </style>
    <script type="text/javascript">
    $(function() {
        // hide #back-top first
        $("#back-top").hide();
        // fade in #back-top
        $(window).scroll(function() {
            if ($(this).scrollTop() > 500) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });
        // scroll body to 0px on click
        $('#back-top a').click(function() {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });
    </script>
    <p id="back-top" style="display:none"><a href="#top"><span></span></a></p>

     

    右下角目录  博客侧边栏公告(支持HTML代码)(支持JS代码)

    <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>   
    <link href="http://files.cnblogs.com/files/ning-wang/marvin.nav.css" rel="stylesheet">
    <script type="text/javascript" src="http://files.cnblogs.com/files/ning-wang/marvin.nav.js"></script>

    背景图片

    1 body {
    2 color: #000;
    3 background: url("http://images2015.cnblogs.com/blog/459873/201509/459873-20150919175458742-1697781612.jpg") fixed;
    4 background-size: cover;
    5 background-repeat: no-repeat;
    6 font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
    7 font-size: 12px;
    8 min-height: 101%;
    9 }
  • 相关阅读:
    lombok @Builder注解使用的例子、反编译之后的代码详解
    InfluxDB时序数据库应用场景
    阿里巴巴为什么不用 ZooKeeper 做服务发现?
    使用RestTemplate调用接口上传文件
    当try-catch-finally代码块遇上return,代码执行流程是怎样
    Spring Boot 中application.yml与bootstrap.yml的区别
    Java文件上传:Restful接口接收上传文件,缓存在本地
    线程执行synchronized同步代码块时再次重入该锁过程中抛异常,是否会释放锁
    AMQP协议详解与RabbitMQ,MQ消息队列的应用场景,如何避免消息丢失等消息队列常见问题
    数据库:内联接,外联接,空值和联接
  • 原文地址:https://www.cnblogs.com/sunbines/p/8608646.html
Copyright © 2011-2022 走看看