博客园美化 | 博客

博客皮肤

jeolee

页面定制CSS

#ad_t2, #ad_under_post_holder, #blog_news_kb, #comment_nav, #google_ad_c2, #site_nav_under, #under_post_kb, #under_post_news, blog_news_kb, google_ad_c2 {
    display: none!important;
}

/* 定制博客背景图片，url里面是你的图片位置信息 */
body {
     opacity: 0.95;
     background-color: #efefef;
     background-image:url(https://images.cnblogs.com/cnblogs_com/kexve/1561758/o_2233.png);
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: center 0;
     background-size: cover;
    padding-top:0px;
  }

/*文章内容详情页面的标h2、h3的样式*/
#cnblogs_post_body h2 {
    background: #2B6695;
    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: 17px;
    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 h3 {
    background: #2B6600;
    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: 23px;
    margin: 12px 0 !important;
    padding: 5px 0 5px 10px;
    text-shadow: 2px 2px 3px #222222;
}

.imgbox{
    font-size: 0;
    width: 240px;
    height: 240px;
    line-height: 240px;
    text-align: center;
}
.imgbox img{
    max-height: 50%;
    max-width: 50%;
    vertical-align: middle;
    outline: 1px solid #000;
}

页首Html

<!DOCTYPE html>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        /*防止body的高度为100px，加1px padding实现了把body撑开*/
        body{
            padding:0px;
        }
        .test {
            width: 0px;
            height: 0px;
            background-color: #000;
            margin: 0px 0 0px 0px;
        }
    </style>
</head>
<body>
    <div class="test"></div>
    <script>
        ;(function (w,d) {
            var domDiv = d.createElement('div');
            //修改domDiv的行内样式
            domDiv.style.cssText = 'position: fixed; top: 0; left: 0; width: 0; height: 7px;'+'box-shadow: 0 0 3px #999; background: -webkit-linear-gradient(left, white , black );; z-index: 999999; -webkit-transition:width .3s linear;'
            //append是jquery的方法，dom对象的是appendchild();
            d.body.appendChild(domDiv);
            //domH:可视区域的高度
            var domH = w.innerHeight||d.documentElement.clientHeight||d.body.clientHeight;
            /**
             * [通过给window添加scroll事件实现了监控的作用。]
             * @param  {[type]} ){                var divsw         [description]
             * @param  {[type]} false      [冒泡阶段]
             * @return {[type]}            [description]
             * pageYOffset:滚到了视口顶部的高度。
             * document.body.offsetHeight:body的高度
             */
            w.addEventListener('scroll',function(){
                var divsw = domDiv.style.width = Math.round(pageYOffset/(d.body.offsetHeight-domH)*100)+'%';
                /*if(parseInt(divsw,10)>50){
                    domDiv.style.backgroundColor = '#00f';
                }else{
                    domDiv.style.backgroundColor = '#f00808';
                }*/
            },false);
        })(window,document);
    </script>
<!--PageEndHtml Block End-->
</body>
</html>