话不多说:代码直接献上
css:
/配色参考->>->>>//https://zh.spycolor.com/color-index,a*/ #home { margin: 0 auto; 90%;/原始65/ min- 980px;/页面顶部的宽度/ background-color:rgba(233,214,107,0.3);/博客主页主体框的颜色/ padding: 30px; margin-top: 25px; margin-bottom: 50px; box-shadow: 2px 2px 6px #ffff00;/蛋黄/ } body { background: rgba(12, 100, 129, 0.8) url('https://www.cnblogs.com/images/cnblogs_com/WinkJie/1486983/o_2.png') fixed no-repeat; background-position: 50% 5%; background-size: cover; } // #navigator{ background-color: #ff9966;/暖红/ } #navList a:link, #navList a:visited, #navList a:active{ // color: #faebd7;/淡粉/ font-size: 18px; font-weight: bold; } .blogStats{ color: #3b7a57;/墨绿/ } .postTitle { border-left: 8px solid #9966cc;/紫色/ margin-left: 10px; margin-bottom: 10px; font-size: 20px; float: right; 100%; clear: both; } .postTitle a:link, .postTitle a:visited, .postTitle a:active { color: #ff9966;/暖红//博客主页内容目录标题字体/ transition: all 0.4s linear 0s; } .postTitle a:hover { margin-left: 30px; color: #fdee00;/蛋黄//选中标题后字体变化颜色/ text-decoration: none; } .postCon { float: right; line-height: 1.5em; 100%; clear: both; padding: 10px 0; } .day .postTitle a { padding-left: 10px; } // .day { background: #faebd7;/淡粉色/ } .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar {// background: #fbceb1; /粉色/ margin-bottom: 35px; word-wrap: break-word; } // .CalTitle{ color: green; background: #ff9966;/暖红/ } // .catListTitle{ color: red; background-color: #ff9966;/暖红/ } // #topics{ background: transparent; } .c_ad_block{ /display: none;/ } #q{background:transparent; /rgba(255, 255, 0, 1) url("https://files-cdn.cnblogs.com/files/One-Orange/KarakaiJouzuTakagi-san_1500px.gif") fixed no-repeat;/} // .CalNextPrev{ background: #ff9966;/暖红/ } .cnblogs_code{ background: #7cb9e8;/浅蓝/ } .cnblogs_code div{ background:#eee;/灰色//代码查看框背景色/ } // .cnblogs_code_toolbar{ background: #b284be;/浅紫/ } .entrylist{ background: #5d8aa8;/墨青/ } /#/ #tbCommentBody{ 100%; height: 200px; background: transparent;/rgba(255, 255, 0, 0.5) url("https://files-cdn.cnblogs.com/files/One-Orange/KarakaiJouzuTakagi-san_1500px.gif") fixed no-repeat ;/ } /代码框阴影底色/ #cnblogs_post_body { color: rgba(159,43,104,1); background-color:rgba(250 ,235 ,215,1); font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif; font-size: 15px; box-shadow: -10px -10px 1px rgba(251, 206 ,177,1); } /页脚设置/ #footer { background-color:#ff9966;/暖红*/ color:white; clear:both; text-align:center; padding:5px; }
博客侧边栏公告代码：
<!DOCTYPE html>
<html>
<body>
<div class="head_img"><img width="265" height="265" alt="我的头像" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577273440603&di=c7367fd54637512950b3cec1cdc82062&imgtype=0&src=http%3A%2F%2Fimg1.gtimg.com%2Frushidao%2Fpics%2Fhv1%2F20%2F108%2F1744%2F113431160.jpg"" class="img_avatar"><div>
<div class="notice">
一切随心<br>
一切随缘
</div>
</body>
</html>
jasonWchao
页首 HTML 代码：
<!DOCTYPE html>
<html>
<body>
<style>
#nav { 150px; height: 400px; border: 1px solid #D4CD49; position:fixed;left:0;top:30% }
</style>
<a name="Tab" id="Tab1" href="http://www.cnblogs.com/" style="right:78px;bottom:165px;">博客园</a>
<a name="Tab" id="Tab1" href="https://www.cnblogs.com/pythonx/" style="right:150px;bottom:130px;">首页</a>
<a name="Tab" id="Tab1" href="https://msg.cnblogs.com/send/jasonWchao" style="right:10px;bottom:130px;">私信博主</a>
<a name="Tab" id="Tab1" onclick="fixedIndexs.show()" style="right:120px;bottom:50px;">显示目录</a>
<a name="Tab" id="Tab1" onclick="fixedIndexs.hide()" style="right:20px;bottom:50px;">隐藏目录</a>
<a name="Tab" id="Tab1" href="https://i.cnblogs.com/" style="right:85px;bottom:10px;">管理</a>
<script>
function GetRandomNum(Min,Max){
var Range=Max-Min;
var Rand=Math.random();
return(Min+Math.round(Rand * Range));
}
function ShowTab(){
x=document.getElementById("MagicArray");
if (x.style.width=="200px"){
x.style.width="0px";
x.style.height="0px";
x.style.bottom="100px";
x.style.right="100px";
x.style.transform="rotate(0deg)";
}else{
x.style.width="200px";
x.style.height="200px";
x.style.bottom="0px";
x.style.right="0px";
x.style.transform="rotate(180deg)";
}
y=document.getElementsByName("Tab");
for (var i=0;i<y.length;i++){
x=y[i];
if (x.style.fontSize=="15px"){
x.style.fontSize="0px";
x.style.transitionDelay="0s";
}else{
x.style.fontSize="15px";
x.style.transitionDelay="0.8s";
}
}
}
function ShowPicture(){
x=document.getElementById("main");
x.style.opacity=0.9-x.style.opacity;
}
function ChangePicture(){
x=document.body;
y=GetRandomNum(0,14);
if (y==0){
x.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170611202329872-1998585524.jpg) no-repeat fixed";
x.style.backgroundSize="cover";
}else if (y==1){
x.style.background="url(http://images2015.cnblogs.com/blog/841250/201704/841250-20170409090749785-323228483.jpg) no-repeat fixed";
x.style.backgroundSize="cover";
}else if (y==2){
x.style.background="url(http://images2015.cnblogs.com/blog/841250/201705/841250-20170505174023882-274298407.jpg) no-repeat fixed";
x.style.backgroundSize="cover";
}else if (y==3){
x.style.background="url(http://images2015.cnblogs.com/blog/841250/201705/841250-20170505174051757-1191896358.jpg) no-repeat fixed";
x.style.backgroundSize="cover";
}else if (y==4){
x.style.background="url(http://images2015.cnblogs.com/blog/841250/201705/841250-20170505174129773-2085975677.jpg) no-repeat fixed";
x.style.backgroundSize="cover";
}else if (y==5){
x.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170604142640446-727563678.png) no-repeat fixed";
x.style.backgroundSize="cover";
}else if (y==6){
x.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170611202111434-1989193791.jpg) no-repeat fixed";
x.style.backgroundSize="cover";
}else if (y==7){
x.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170611202419872-817092701.png) no-repeat fixed";
x.style.backgroundSize="cover";
}else if (y==8){
x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902151832593-2122003193.jpg) no-repeat fixed";
x.style.backgroundSize="cover";
}else if (y==9){
x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152019140-1762402367.jpg) no-repeat fixed";
x.style.backgroundSize="cover";
}else if (y==10){
x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152127562-2119838736.jpg) no-repeat fixed";
x.style.backgroundSize="cover";
}else if (y==11){
x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152205765-1481629031.jpg) no-repeat fixed";
x.style.backgroundSize="cover";
}else if (y==12){
x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152237077-878421384.jpg) no-repeat fixed";
x.style.backgroundSize="cover";
}else if (y==13){
x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152325140-1207335922.jpg) no-repeat fixed";
x.style.backgroundSize="cover";
}else if (y==14){
x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152342718-1503887682.jpg) no-repeat fixed";
x.style.backgroundSize="cover";
}
}
</script>
</body>
</html>
head
页脚 HTML 代码：
<script type="text/javascript">
(function($){
$.fn.snow = function(options){
var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('❄'),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
minSize : 5,
maxSize : 25,
newOn : 500,
flakeColor : getRandomColor() /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
},
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 - 200,
endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
durationFall = documentHeight * 10 + Math.random() * 5000;
$flake.clone().appendTo('body').css({
left: startPositionLeft,
opacity: startOpacity,
'font-size': sizeFlake,
color: getRandomColor()
}).animate({
top: endPositionTop,
left: endPositionLeft,
opacity: 0.2
},durationFall,'linear',function(){
$(this).remove()
});
}, options.newOn);
};
})(jQuery);
$(function(){
$.fn.snow({
minSize: 5, /* 定义雪花最小尺寸 */
maxSize: 50,/* 定义雪花最大尺寸 */
newOn: 200 /* 定义密集程度，数字越小越密集 */
});
});
var getRandomColor = function(){
return '#'+Math.floor(Math.random()*16777215).toString(16);
}
</script>
懂html：修改为自己的图片，自己的风格。