博客园页面定制CSS代码
要是觉得有用，就点个推荐呗～
1 #home {
2 margin: 0 auto;
3 width: 80%;/*原始65*/
4 min-width: 980px;/*页面顶部的宽度*/
5 background-color: rgba(245, 245, 245, 0.7);
6 padding: 30px;
7 margin-top: 50px;
8 margin-bottom: 50px;
9 box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
10 }
11 body {
12 background: rgba(12, 100, 129, 1) url('http://images.cnblogs.com/cnblogs_com/Penn000/1013849/o_fr.jpg') fixed no-repeat;
13 background-position: 50% 5%;
14 background-size: cover;
15 }
16 #blogTitle {
17 height: 100px; /*高度*/
18 clear: both;
19 background-color: rgba(245, 245, 245, 0);
20 }
21 #blogTitle h1 {
22 font-size: 36px;
23 font-weight: bold;
24 line-height: 1.8em;/*原始 1.6em*/
25 margin-top: 10px;/*原始 15px */
26 color: #548B54;
27 }
28 #blogTitle h2 {
29 font-weight: normal;
30 font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/
31 line-height: 1.8;
32 color: #111;
33 font-weight: bold;
34 text-align: right;
35 float: right;
36 }
37 #navigator{
38 background-color: rgba(33, 160, 139, 0.9);
39 }
40 #navList a:link, #navList a:visited, #navList a:active{
41 color: #eee;
42 font-size: 18px;
43 font-weight: bold;
44 }
45 .blogStats{
46 color: #eee;
47 }
48 .postTitle {
49 border-left: 8px solid rgba(33, 160, 139, 0.68);
50 margin-left: 10px;
51 margin-bottom: 10px;
52 font-size: 20px;
53 float: right;
54 width: 100%;
55 clear: both;
56 }
57 .postTitle a:link, .postTitle a:visited, .postTitle a:active {
58 color: #21759b;
59 transition: all 0.4s linear 0s;
60 }
61 .postTitle a:hover {
62 margin-left: 30px;
63 color: #0f3647;
64 text-decoration: none;
65 }
66 .postCon {
67 float: right;
68 line-height: 1.5em;
69 width: 100%;
70 clear: both;
71 padding: 10px 0;
72 }
73
74 .day .postTitle a {
75 padding-left: 10px;
76 }
77 .day {
78 background: rgba(255, 255, 255, 0.5);
79 }
80 /*文章附加信息*/
81 .postDesc {
82 background: url(images/posted_time.png) no-repeat 0 1px;
83 color: #757575;
84 float: left;
85 width: 100%;
86 clear: both;
87 text-align: left;
88 font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
89 font-size: 13px;
90 padding-right: 20px;/*5px padding-left: 90px;posted 发表时间左边距离*/
91 margin-top: 20px;
92 line-height: 1.8;
93 padding-bottom: 35px;
94 }
95
96 .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory,
97 .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView,
98 .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar
99 {
100 background: rgba(255, 255, 255, 0.5);
101 margin-bottom: 35px;
102 word-wrap: break-word;
103 }
104
105 .CalTitle{
106 background: rgba(255, 255, 255, 0);
107 }
108 .catListTitle{
109 background-color: rgba(33, 160, 139, 0.9);
110 }
111
112 #topics{
113 background: rgba(255, 255, 255, 0.5);
114 }
115
116 .c_ad_block{
117 display: none;
118 }
119
120 #tbCommentBody{
121 width: 100%;
122 height: 200px;
123 background: rgba(255, 255, 255, 0.5);
124 }
125
126 #q{background: rgba(255, 255, 255, 0);}
127
128 .CalNextPrev{background: rgba(255, 255, 255, 0);}
129
130 .cnblogs_code{
131 background: rgba(255, 255, 255, 0);
132 }
133
134 .cnblogs_code div{
135 background: rgba(255, 255, 255, 0);
136 }
137
138 .cnblogs_code_toolbar{
139 background: rgba(255, 255, 255, 0);
140 }
141
142 .entrylist{
143 background: rgba(255, 255, 255, 0.5);
144 }
145
146 #main{
147 min-width: 640px;
148 }
Fork me on Github
- 第一行修改为自己的GitHub URL
- 将以下代码放在“页首Html代码”中
1 <a href="https://github.com/Penn000">
2 <img style="position: absolute; top: 0; right: 0; border: 0;"
3 src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67"
4 alt="Fork me on GitHub"
5 data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png">
6 </a>头像
将以下代码放在“博客侧边栏公告”
1 <style>
2 #back-top {
3 position: fixed;
4 bottom: 10px;
5 right: 5px;
6 z-index: 99;
7 }
8 #back-top span {
9 width: 50px;
10 height: 64px;
11 display: block;
12 background:url(http://images.cnblogs.com/cnblogs_com/seanshao/855033/o_rocket.png) no-repeat center center;
13 }
14 #back-top a{outline:none}
15 </style>
16 <script type="text/javascript">
17 $(function() {
18 // hide #back-top first
19 $("#back-top").hide();
20 // fade in #back-top
21 $(window).scroll(function() {
22 if ($(this).scrollTop() > 500) {
23 $('#back-top').fadeIn();
24 } else {
25 $('#back-top').fadeOut();
26 }
27 });
28 // scroll body to 0px on click
29 $('#back-top a').click(function() {
30 $('body,html').animate({
31 scrollTop: 0
32 }, 800);
33 return false;
34 });
35 });
36 </script>
37 <p id="back-top" style="display:none"><a href="#top"><span></span></a></p>
38 <img src="https://www.cnblogs.com/images/cnblogs_com/Penn000/1013849/o_panda.jpg" alt="Penn000" class="img_avatar" width="210px" height="210px" style="border-radius:10%">小火箭
下面代码放在“页脚 HTML 代码”
1 <script>
2 !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);
3 </script>
来源：oschina
链接：https://my.oschina.net/u/4376383/blog/4281445