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

    一、常用美化

    #home {
        margin: 0 auto;
        width: 80%;/*原始65*/
        min-width: 980px;/*页面顶部的宽度*/
        background-color: rgba(245, 245, 245, 0.7);
        padding: 30px;
        margin-top: 50px;
        margin-bottom: 50px;
        box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
    }
    body {
        background: rgba(12, 100, 129, 1) url('https://img2018.cnblogs.com/common/1585478/202002/1585478-20200211230422211-1828605798.jpg') fixed no-repeat;
    /*http://pic.netbian.com/uploads/allimg/190909/224536-1568040336f11e.jpg */
    /*https://images.cnblogs.com/cnblogs_com/WhiteTears/1198742/o_timg.jpg*/
        background-position: 50% 5%; 
        background-size: cover;
    }
    #blogTitle {
        height: 100px;  /*高度*/
        clear: both;
        background-color: rgba(245, 245, 245, 0);
    }
    #blogTitle h1 {
        font-size: 36px;
        font-weight: bold;
        line-height: 1.8em;/*原始 1.6em*/
        margin-top: 10px;/*原始 15px */
        color: #548B54;
    }
    #blogTitle h2 {
        font-weight: normal;
        font-size: 17px;/*原始 16px ;font-size: 1.0rem;*/      
        line-height: 1.8;
        color: #111;
        font-weight: bold;
        text-align: right;
        float: right; 
    }
    #navigator{
        background-color: rgba(33, 160, 139, 0.9);
    }
    #navList a:link, #navList a:visited, #navList a:active{
        color: #eee;
        font-size: 18px;
        font-weight: bold;
    }
    .blogStats{
        color: #eee;
    }
    .postTitle {
        border-left: 8px solid rgba(33, 160, 139, 0.68);
        margin-left: 10px;
        margin-bottom: 10px;
        font-size: 20px;
        float: right;
        width: 100%;
        clear: both;
    }
    .postTitle a:link, .postTitle a:visited, .postTitle a:active {
        color: #21759b;
        transition: all 0.4s linear 0s;
    }
    .postTitle a:hover {
        margin-left: 30px;
        color: #0f3647;
        text-decoration: none;
    }
    .postCon {
        float: right;
        line-height: 1.5em;
        width: 100%;
        clear: both;
        padding: 10px 0;
    }
    
    .day .postTitle a {
        padding-left: 10px;
    }
    .day {
        background: rgba(255, 255, 255, 0.5);
    }
    /*文章附加信息*/
    .postDesc {   
        background: url(images/posted_time.png) no-repeat 0 1px;
        color: #757575;
        float: left;
        width: 100%;
        clear: both;
        text-align: left;     
        font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
        font-size: 13px;
        padding-right: 20px;/*5px  padding-left: 90px;posted 发表时间左边距离*/
        margin-top: 20px;
        line-height: 1.8;
        padding-bottom: 35px;
    }
    
    .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, 
    .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, 
    .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar
    {
        background: rgba(255, 255, 255, 0.5);
        margin-bottom: 35px;
        word-wrap: break-word;
    }
    
    .CalTitle{
        background: rgba(255, 255, 255, 0);
    }
    .catListTitle{
        background-color: rgba(33, 160, 139, 0.9);
    }
    
    #topics{
        background: rgba(255, 255, 255, 0.5);
    }
    
    .c_ad_block{
        display: none;
    }
    
    #tbCommentBody{
        width: 100%;
        height: 200px;
        background: rgba(255, 255, 255, 0.5);
    }
    
    #q{background: rgba(255, 255, 255, 0);}
    
    .CalNextPrev{background: rgba(255, 255, 255, 0);}
    
    .cnblogs_code{
        background: rgba(255, 255, 255, 0);    
    }
    
    .cnblogs_code div{
        background: rgba(255, 255, 255, 0);    
    }
    
    .cnblogs_code_toolbar{
        background: rgba(255, 255, 255, 0);  
    }
    
    .entrylist{
        background: rgba(255, 255, 255, 0.5);  
    }
    /*推荐和反对*/
    #div_digg {
        padding: 10px;
        position: fixed;
        _position: absolute;
        z-index: 1000;
        bottom: 20px;
        right: 0;
        _right: 17px;
        border: 1px solid #D9DBE1;
        background-color: #FFFFFF;
        filter: alpha(Opacity=80);
        -moz-opacity: 0.8;
        opacity: 0.8;
    }
    
    .icon_favorite {
        background: transparent url('http://files.cnblogs.com/files/jackson0714/kj.gif') no-repeat 0 0;
        padding-left: 16px;
    }
    
    #blog_post_info_block a {
        text-decoration: none;
        color: #5B9DCA;
        padding: 3px;
    }
    页面定制css
    <link  type="text/css" rel="stylesheet" href="http://files.cnblogs.com/files/miangao/maodian.css">
    <script src="http://files.cnblogs.com/files/miangao/maodian.js"></script>
    <script src="http://files.cnblogs.com/files/miangao/bootstrap.min.js"></script>
    首页html
    <script>
    !function(e,t,a){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()}function r(){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");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");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)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+(255*Math.random())+","+(255Math.random())+","+~~(255Math.random())+")"}var d=[];e.requestAnimationFrame=function()}(),n()}(window,document);
    </script>
    
    <script language="javascript" type="text/javascript">
    // 生成目录索引列表
    // ref: http://www.cnblogs.com/zwnsyw/
    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" style="color:#152e97;">';
            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" style="color:#f68a33">回到顶部</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> </p>';
            content += '<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>';
            if($('#cnblogs_post_body').length != 0 )
            {
                $($('#cnblogs_post_body')[0]).prepend(content);
            }
        }   
    }
    <script src="https://blog-static.cnblogs.com/files/zhonglinke/jquery-1.7.1.min.js"></script>
    
    <script src="https://files.cnblogs.com/files/zhonglinke/jquery.snow.js"></script>
    
    <script src="https://files.cnblogs.com/files/zhonglinke/my.js"></script> 
    <script>
    (function($){$.fn.snow=function(options){var $flake=$('<div id="flake" />').css({'position':'absolute','top':'-50px'}).html(''),documentHeight=$(document).height(),documentWidth=$(document).width(),defaults={minSize:20,maxSize:40,newOn:300,flakeColor:"#2894FF"},options=$.extend({},defaults,options);var interval=setInterval(function(){var startPositionLeft=Math.random()*documentWidth-100,startOpacity=0.5+Math.random(),sizeFlake=options.minSize+Math.random()*options.maxSize,endPositionTop=documentHeight-40,endPositionLeft=startPositionLeft-100+Math.random()*200,durationFall=documentHeight*10+Math.random()*5000;$flake.clone().appendTo('body').css({left:startPositionLeft,opacity:startOpacity,'font-size':sizeFlake,color:options.flakeColor}).animate({top:endPositionTop,left:endPositionLeft,opacity:0.2},durationFall,'linear',function(){$(this).remove()});},options.newOn);};})(jQuery);
    $.fn.snow({ minSize: 5, maxSize: 50, newOn: 800, flakeColor: '#2894FF' });
    </script>
    页脚html
    人生苦短,慢慢潇洒。 nsyw.run
  • 相关阅读:
    解决Shockwave flash在chrome浏览器上崩溃的问题
    Java实现平衡二叉树(AVLTree)的构建
    Netty4具体解释二:开发第一个Netty应用程序
    cocos2dx实现android的对讯飞语音的合成(语言朗读的实现)
    how tomcat works 读书笔记四 tomcat的默认连接器
    我的职业观
    学习NodeJS第一天:node.js引言
    数学之路-python计算实战(20)-机器视觉-拉普拉斯算子卷积滤波
    .net web 开发平台- 表单设计器 一(web版)
    白话经典算法系列之中的一个 冒泡排序的三种实现
  • 原文地址:https://www.cnblogs.com/zwnsyw/p/15581310.html
Copyright © 2011-2022 走看看