博客园博客园的界面美化工作（一）

一、增加返回顶部按钮

（1）页面定制 CSS 代码：

/* 返回顶部按钮 */

#back-to-top {

    

    bottom: 0;

    box-shadow: 0 0 6px #FFB7DD;

    color: #444444;

    padding: 10px 10px;

    position: fixed;

    right: 20px;

    cursor: pointer;

}

（2）页首 HTML 代码：

<span id="back-to-top"><a href="#top">返回顶部</a></span>

注：#FFB7DD代表的是“背景颜色”，若是想要换颜色，可参考链接上的与颜色有关的代码：

http://www.divcss5.com/html/h52232.shtml

 

二、右下角推荐和反对，只显示推荐

页面定制 CSS 代码：

#div_digg {

    float: right;

    position: fixed;

    width: auto;

    bottom: 10px;

    left: 80%;

    margin-bottom: 10px;

    background: rgba(247,247,247,0.3);

    margin-right: 30px;

    font-size: 12px;

    box-shadow: 0 0 10px 0 #AAA;

    padding: 10px;

    border: 2px solid rgba(360, 0, 0, 0.3);

    text-align: center;

    margin-top: 10px;

}

 

.buryit {

    display: none;

}

 

注：其中css rgba色彩搭配可以参考链接

https://www.baidu.com/link?url=MLlgJtFUDy0H6qvzg-p37aR66xeOCFL5p6QKG369BQ4nUKgUoslOC_ojIKD3dEu0&wd=&eqid=c694b9d600000605000000065f3beaee

Css边框可参考链接https://www.w3school.com.cn/css/css_border.asp

 

三、博客园如何去掉评论下面的广告

页面定制 CSS 代码：

添加一行代码：

#ad_t2,#cnblogs_c1,#under_post_news,#cnblogs_c2,#under_post_kb {display:none;!important}

 

四、设置签名格式

页面定制 CSS 代码：

#MySignature {

    display: none;

    

    border-radius: 10px;

    box-shadow: 1px 1px 1px #6B6B6B;

    padding: 10px;

    line-height: 1.5;

    text-shadow: 1px 1px 1px #FFF;

    font-size: 16px;

    font-family: 'Microsoft Yahei';

}

 

五、走马灯

页首html代码：

<div id="i1" style="color:red;font-size:13px;padding:5px;">大江东去，浪淘尽，千古风流人物。故垒西边，人道是，三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间，樯橹灰飞烟灭。故国神游，多情应笑我，早生华发。人生如梦，一尊还酹江月。</div>

    <script>

       function func(){

           var tag = document.getElementById('i1');

           var content = tag.innerText;

           var f = content.charAt(0);

           var l = content.substring(1,content.length);

           var new_content = l + f;

           tag.innerText = new_content;

       }

       setInterval('func()',1600);

</script>

 

CSS文字属性代码大全：

http://www.divcss5.com/rumen/r30966.shtml

常用CSS代码大全：

https://www.cnblogs.com/cqlb/p/9680047.html