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 }
  • 相关阅读:
    Docker 安装NGINX
    Ant 使用setFieldsValue更新Form表单值
    SpringSecurity设置角色和权限
    java 获取昨天、今天、明天的时间
    Ubuntu 20.04 root ssh登录配置
    http: server gave HTTP response to HTTPS client解决方案:
    06-多线程笔记-2-锁-3-Lock
    05-多线程笔记-2-锁-2-Synchronized
    04-多线程笔记-2-锁-1-死锁
    volatile
  • 原文地址:https://www.cnblogs.com/sunbines/p/8608646.html
Copyright © 2011-2022 走看看