博客园美化教程

这是美化的效果图

页面定制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://attach.bbs.miui.com/forum/201406/29/002350y098au8440ja80gm.jpg') fixed no-repeat;
 13     background-position: 50% 5%;
 14     background-size: cover;
 15 }
 16 #navList a:hover {
 17     color: white;
 18     background-color: #8BC34A;
 19     text-decoration: none;
 20     text-shadow: 0px 0px 1px #8BC34A;
 21 }
 22 #blogTitle {
 23     height: 100px;  /*高度*/
 24     clear: both;
 25     background-color: rgba(245, 245, 245, 0);
 26 }
 27 #blogTitle h1 {
 28     font-size: 36px;
 29     font-weight: bold;
 30     line-height: 1.8em;/*原始 1.6em*/
 31     margin-top: 10px;/*原始 15px */
 32     color: #548B54;
 33 }
 34 #blogTitle h2 {
 35     font-weight: normal;
 36     font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/
 37     line-height: 1.8;
 38     color: #111;
 39     font-weight: bold;
 40     text-align: right;
 41     float: right;
 42 }
 43 #navigator{
 44     background-color: rgba(33, 160, 139, 0.9);
 45 }
 46 #navList a:link, #navList a:visited, #navList a:active{
 47     color: #eee;
 48     font-size: 18px;
 49     font-weight: bold;
 50 }
 51 .blogStats{
 52     color: #eee;
 53 }
 54 .postTitle {
 55     border-left: 8px solid rgba(33, 160, 139, 0.68);
 56     margin-left: 10px;
 57     margin-bottom: 10px;
 58     font-size: 20px;
 59     float: right;
 60     width: 100%;
 61     clear: both;
 62 }
 63 .postTitle a:link, .postTitle a:visited, .postTitle a:active {
 64     color: #21759b;
 65     transition: all 0.4s linear 0s;
 66 }
 67 .postTitle a:hover {
 68     margin-left: 30px;
 69     color: #8BC34A;
 70     text-decoration: none;
 71 }
 72 .postCon {
 73     float: right;
 74     line-height: 1.5em;
 75     width: 100%;
 76     clear: both;
 77     padding: 10px 0;
 78 }
 79
 80 .day .postTitle a {
 81     padding-left: 10px;
 82 }
 83 .day {
 84     background: rgba(255, 255, 255, 0.5);
 85 }
 86 /*文章附加信息*/
 87 .postDesc {
 88     background: url(images/posted_time.png) no-repeat 0 1px;
 89     color: #757575;
 90     float: left;
 91     width: 100%;
 92     clear: both;
 93     text-align: left;
 94     font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
 95     font-size: 13px;
 96     padding-right: 20px;/*5px  padding-left: 90px;posted 发表时间左边距离*/
 97     margin-top: 20px;
 98     line-height: 1.8;
 99     padding-bottom: 35px;
100 }
101
102 .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory,
103 .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView,
104 .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar
105 {
106     background: rgba(255, 255, 255, 0.5);
107     margin-bottom: 35px;
108     word-wrap: break-word;
109 }
110
111 .CalTitle{
112     background: rgba(255, 255, 255, 0);
113 }
114 .catListTitle{
115     background-color: rgba(33, 160, 139, 0.9);
116 }
117
118 #topics{
119     background: rgba(255, 255, 255, 0.5);
120 }
121
122 .c_ad_block{
123     display: none;
124 }
125
126 #tbCommentBody{
127     width: 100%;
128     height: 200px;
129     background: rgba(255, 255, 255, 0.5);
130 }
131
132 #q{background: rgba(255, 255, 255, 0);}
133
134 .CalNextPrev{background: rgba(255, 255, 255, 0);}
135
136 .cnblogs_code{
137     background: rgba(255, 255, 255, 0);
138 }
139
140 .cnblogs_code div{
141     background: rgba(255, 255, 255, 0);
142 }
143
144 .cnblogs_code_toolbar{
145     background: rgba(255, 255, 255, 0);
146 }
147
148 .entrylist{
149     background: rgba(255, 255, 255, 0.5);
150 }
151 a:hover {
152     color: #F60;
153     text-decoration: none;
154 }

View Code

侧边栏公告：

1 <div align="center">
2  <imgsrc="https://pic.cnblogs.com/avatar/1334215/20180504110551.png">
3 </div>

View Code

页面首页：

github的地址不要忘记替换成自己的哦~

1 <a href="https://github.com/king-y" target="_blank">
2  　　<img style="position: fixed; top: 0; right: 0; border: 0; z-index: 1;"src="http://images.cnblogs.com/cnblogs_com/jackson0714/779808/o_github.png" >
3  </a>

View Code