其他技術----博客園樣式

博客園樣式

首先需要先開要向管理員申請js修改權限

如果要做成像我這樣的博客樣式可以看下我定製的組件

博客皮膚選擇SimpleMemory

定製CSS代碼

全局body樣式

修改背景圖，字體

body {
color: #000;
background: url('https://images.cnblogs.com/cnblogs_com/bananafish/1360014/o_191215034510e6af036de1ff7b74182f73978d9c5ae5.jpg') fixed;
background-size: 100%;
background-repeat: no-repeat;
font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
font-size: 12px;
min-height: 101%;
  cursor: url('https://images.cnblogs.com/cnblogs_com/bananafish/1761776/o_200510082947cursor.png'),default;

}

標題樣式

#cnblogs_post_body h1{
        padding-bottom: 4px;
        border-bottom: 2px solid #999;
        color: #009FAB;
        font-family:  "黑體","宋體" , "微軟雅黑" ,Arial;
        font-size: 27px;
        font-weight: bold;
        line-height: 24px;
        margin: 20px 0 !important;
        padding: 10px 0 10px 0px;
        text-shadow: 2px 1px 2px lightgray;
}
#cnblogs_post_body h2 {
        padding-bottom: 4px;
        border-bottom: 2px solid #999;
        color: #008891;
        font-family:  "黑體","宋體" , "微軟雅黑" ,Arial;
        font-size: 24px;
        font-weight: bold;
        line-height: 24px;
        margin: 20px 0 !important;
        padding: 10px 0 10px 0px;
        text-shadow: 2px 1px 2px lightgray;
}
#cnblogs_post_body h3{        
        padding-bottom: 4px;
        border-bottom: 2px solid #999;
        color: #005359;
        font-family: "黑體","宋體" , "微軟雅黑" ,Arial;
        font-size: 20px;
        font-weight: bold;
        line-height: 23px;
        margin: 20px 0 !important;
        padding: 10px 0 10px 0px;
        text-shadow: 2px 1px 2px lightgray;
}


<!--此處自定義標題背景色-->
#cnblogs_post_body h1 {
    background: #265B8A;
    border-radius: 6px 6px 6px 6px;
    color: #FFFFFF;
    font-family: FZShuTi；
    font-size: 23px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 !important;
    padding: 12px 0 8px 5px;
    text-shadow: 2px 2px 3px #222222;
    text-align:center;
    margin-bottom: 20px;
}
#cnblogs_post_body h2 {
background-color: #008FC6;
    border-radius: 3px;
    text-align:center;
    color: white;
    text-shadow: 1px 1px 2px #222222;
    padding-left: 15px;
    margin-bottom: 12px;
}
#cnblogs_post_body h3 {
background-color: #51C332;
    border-radius: 3px;
    text-align:center;
    color: white;
    text-shadow: 1px 1px 2px #222222;
    padding: 5px 15px;
    margin-bottom: 10px;
    width:50%
}
#cnblogs_post_body h4 {
    background-color: #5bc0de;
    border-radius: 3px;
    text-align:center;
    color: white;
    text-shadow: 1px 1px 2px #222222;
    padding: 5px 15px;
    margin-bottom: 10px;
    width:25%
}

代碼樣式

code {
    padding: 1px 3px;
    margin: 0 3px;
    background: #ddd;
    border: 1px solid #ccc;
    font-family: Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace;
    word-wrap: break-word;
    font-size: 14px;
}

表格樣式

#cnblogs_post_body table {
    text-align: center;
    width: 100%;
    border: 1px solid #dedede;
    margin: 15px 0;
    border-collapse: collapse;
}
#cnblogs_post_body table thead tr {
    background: #f8f8f8;
}
#cnblogs_post_body table tbody tr:hover {
    background: #efefef;
}

滾動條樣式

/*滾動條整體樣式*/
body::-webkit-scrollbar {
    width: 5px;
    height: 1px;
}
/*滾動條滑塊*/
body::-webkit-scrollbar-thumb {
    border-radius: 0px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #DC143C;
}
/*滾動條軌道*/
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);
    border-radius: 10px;
    background: #FDFAF1;
}

選中文字後背景顏色

/*選中文字後背景顏色*/
::selection {
    color: #fff;
    background: #FF4500;
}

透明度

#home {
opacity: 0.95;
//margin: 0 auto;
//width: 85%;
min-width: 950px;
background-color: #fff;
padding: 30px;
margin-top: 30px;
margin-bottom: 50px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}

推薦與反對

/*推薦和反對*/
#div_digg{
  position:fixed;
  bottom:5px;
  width:140px;
  right:50px;
  border:2px solid #6FA833;
  padding:10px;
  background-color:#fff;
  border-radius:5px 5px 5px 5px !important;
  box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
}

飄雪效果

css

/* 飄雪效果 */
#Snow{
     position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 999;
      pointer-events: none;
 }

js

<!--飄雪效果-->
<script src="https://blog-static.cnblogs.com/files/bananafish/snow.js"></script>

html

<div class="Snow">
    <canvas id="Snow"></canvas>
</div>

評論旋轉

css

/* 評論效果*/
.feedbackCon img:hover {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
 
.feedbackCon img {
border-radius: 40px;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

js

<!--引入評論js-->
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/bananafish/Comments.js"></script>

側邊欄公告

鼠標點擊效果

<script type="text/javascript"> 
/* 鼠標特效 */ 
var a_idx = 0; 
jQuery(document).ready(function($) { 
	var i = 0;
    $("body").click(function(e) { 
		var a_idx = '+'+i+'s';
		var $i = $("<span></span>").text(a_idx);
		i++;
        var x = e.pageX, 
        y = e.pageY; 
        $i.css({ 
            "z-index": 99999999, 
            "top": y - 20, 
            "left": x, 
            "position": "absolute", 
            "font-weight": "bold", 
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")" 
        }); 
        $("body").append($i); 
        $i.animate({ 
            "top": y - 180, 
            "opacity": 0 
        }, 
        1500, 
        function() { 
            $i.remove(); 
        }); 
    }); 
}); 
</script>

首頁HTML

github鏈接

<a href="需要跳轉路徑">
<img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub">
</a>

返回頂部

css

<style>
#back-top {
     position: fixed;
     bottom: 10px;
     right: 5px;
     z-index: 99;
}
#back-top span {
     width: 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>

js

<!--返回頂部-->
<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>

HTML

<p id="back-top" style="display:none"><a href="#top"><span></span></a></p>

博客縮tab圖標

<script type="text/javascript" language="javascript">
　　//Setting ico for cnblogs
　　var linkObject = document.createElement('link');
　　linkObject.rel = "shortcut icon";
　　linkObject.href = "你的圖標鏈接";
　　document.getElementsByTagName("head")[0].appendChild(linkObject);
</script>

隨機背景圖

<!-- 改變body中的初始化圖片 -->
<script>
        let picList = [
            'https://images.cnblogs.com/cnblogs_com/bananafish/1360014/o_bg_2.jpg',
            'https://images.cnblogs.com/cnblogs_com/bananafish/1360014/o_1912150344185d0a0ce6c5fc8d548733a1e3956c1cb4.jpg',
            'https://images.cnblogs.com/cnblogs_com/bananafish/1360014/o_191215034510e6af036de1ff7b74182f73978d9c5ae5.jpg',
            'https://images.cnblogs.com/cnblogs_com/bananafish/1360014/o_1912150346127b5c3ed85298159855fe83de89b5fd2b.jpg',
            'https://images.cnblogs.com/cnblogs_com/bananafish/1360014/o_1912150346127b5c3ed85298159855fe83de89b5fd2b.jpg',
            'https://images.cnblogs.com/cnblogs_com/bananafish/1360014/o_191215034736a1ae5a7f00d72ef9635de62ec3378321.jpg',
            'https://images.cnblogs.com/cnblogs_com/bananafish/1360014/o_200221024808cfa9ddbe57326b228c67bf4698599402.jpg',
            'https://images.cnblogs.com/cnblogs_com/bananafish/1360014/o_200221025019d66d0064cd76019ed817fa0f6e8dfb54.jpg',
            'https://images.cnblogs.com/cnblogs_com/bananafish/1360014/o_2002210257212f72f084e49020b058b8873340353230.jpg',
            'https://images.cnblogs.com/cnblogs_com/bananafish/1360014/o_200221025734afe371b7ba56d0872d307c9fc7506131.jpg',
            'https://images.cnblogs.com/cnblogs_com/bananafish/1360014/o_20022102574812214d0bba0661108df2b8dd333472b8.jpg',
            'https://images.cnblogs.com/cnblogs_com/bananafish/1360014/o_200221025754431329591d1a0484e43837b088b47355.jpg',
            'https://images.cnblogs.com/cnblogs_com/bananafish/1360014/o_2002210258199a11a50b6771ba3f2ea1fd11dd75c3f9.jpg',
            'https://images.cnblogs.com/cnblogs_com/bananafish/1360014/o_200221025827674994.jpg',
            'https://images.cnblogs.com/cnblogs_com/bananafish/1667896/o_2003120446040c85f027d548fe6e6331bf9cdba6f9c0.jpg',
            'https://images.cnblogs.com/cnblogs_com/bananafish/1667896/o_2003120446165f1d16c083686188b3827b2bb3acd4b9.jpg',
            'https://images.cnblogs.com/cnblogs_com/bananafish/1667896/o_2003120446258e0fe9aa8a575d0c2249969ab4fd9591.jpg',
            'https://images.cnblogs.com/cnblogs_com/bananafish/1667896/o_2003120446379a770251889d710133968bfd7db648d7.jpg',
            'https://images.cnblogs.com/cnblogs_com/bananafish/1667896/o_2003120446379a770251889d710133968bfd7db648d7.jpg',
            'https://images.cnblogs.com/cnblogs_com/bananafish/1667896/o_20031204465076efe9a8694404c2bf64d7a599de33ac.jpg',
            'https://images.cnblogs.com/cnblogs_com/bananafish/1667896/o_20031204470495b468a4bc783927a17576f6661a05e4.jpg',
            'https://images.cnblogs.com/cnblogs_com/bananafish/1667896/o_200312044710840bb53f02311bc9f72d44240d035bc3.jpg',
            'https://images.cnblogs.com/cnblogs_com/bananafish/1667896/o_200312044721cad15660ea7145234aee8cb920ad6be9.jpg',
            'https://images.cnblogs.com/cnblogs_com/bananafish/1667896/o_200312044728e0d5a9e40b7dd70c869779e549c1bb5a.jpg'
        ];
            let n = Math.floor(Math.random()*picList.length)
            document.body.style.backgroundImage =  `url(${picList[n]})`
    </script>

背景粒子

<script type="text/javascript" color="47,135,193" opacity='0.5' zIndex="-2" count="199" src="http://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>

看板娘

看板娘資源可以自己製作(lived 2d)，也可以直接使用別人製作好的。

這裏我使用的是別人製作好的，資源列表:https://www.cnblogs.com/bananafish/p/12825861.html

<!-- 看板娘 -->
<script src="看板娘資源"></script>
<script>
    L2Dwidget.init({
        "model": {
            jsonPath: "https://imuncle.github.io/live2d/model/dollsfrontline/type64-ar_2901/normal/model.json",<!--這裏是模型-->
            "scale": 1
        },
        "display": {
            "position": "left",<!--設置看板孃的上下左右位置-->
            "width": 100,
            "height": 250,
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 1,<!--設置透明度-->
            "opacityOnHover": 0.2
        }
    });  
 </script> 

PS: 當然您也可以直接使用別人已經制作好的主題包引入，這裏我就不詳細記載了，因爲我覺得自定義應該根據自己的喜好來定義，別人寫好的樣式雖然好看，但不一定適合自己。