部落格園頁面定製CSS程式碼
阿新 • • 發佈:2021-06-27
前言
剛開始寫部落格,不管樣式咋調整,頁面佈局,字型大小以及間隔看起來都很醜,故下定決心重新整理一下部落格臉面。
面板設定
選擇darkgreentrip面板。
頁面定製CSS程式碼
#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://www.cnblogs.com/xiaofengshan/gallery/image/384552.html') fixed no-repeat; 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); } #main{ min-width: 640px; } .cnblogs-markdown pre { position: relative; } .cnblogs-markdown pre > span { position: absolute; top: 0; right: 0; border-radius: 3px; padding:0 10px; font-size: 12px; background: #fff; color: #000; cursor: pointer; display:none; margin:8px 10px; transition: background .5s; -moz-transition: background .5s; -webkit-transition: background .5s; -o-transition: background .5s; } .cnblogs-markdown pre > span:hover { background: #ddd } .cnblogs-markdown pre:hover > span { display:block; }
部落格側邊欄設定
<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> <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> <p id="back-top" style="display:none"><a href="#top"><span></span></a></p> <img src="https://images.cnblogs.com/cnblogs_com/xiaofengshan/1992384/o_2106261147412.jpg" alt="Penn000" class="img_avatar" width="210px" height="210px" style="border-radius:10%">
頁首HTML程式碼
這裡需要設定為自己的GitHub地址
<a href="https://gitee.com/zhuayng"> <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"> </a>
頁尾HTML程式碼
設定自己的小火箭
<script>
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: 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 src="https://files.cnblogs.com/files/fenggwsx/clipboard.min.js"></script>
<script src="https://files.cnblogs.com/files/fenggwsx/cp.js"></script>