博客园美化-darkgreentrip

Posted 2020-12-24 ch520

---

1、第一步，样式的形成与博客皮肤的选择有很大关系

• 本文选择

      darkgreentrip

2、代码插入

• 2.1页面定制CSS代码

  ``` Objective-C
  #home {
  margin: 0 auto;
  width: 95%;/原始65/
  min-width: 980px;/页面顶部的宽度/
  background-color: rgba(245, 245, 245, 0.7);
  padding: 30px;
  margin-top: 0px;
  margin-bottom: 0px;
  box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
  }
  body {
  background: rgba(12, 100, 129, 1) url(‘https://files.cnblogs.com/files/CH520/2018-07-17_222016.bmp‘) 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);
}

/推荐和反对/

div_digg {

padding: 10px;
position: fixed;
_position: absolute;
z-index: 1000;
bottom: 10px;
right: 100px;
_right: 17px;
border: 1px solid #D9DBE1;
background-color: #FFFFFF;
filter: alpha(Opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;

border:1px solid #DDDDDD;
border-radius:5px;

}

.diggit {
border-radius:5px;
}

.buryit {
border-radius:5px;
}

.icon_favorite {
background: transparent url(‘http://files.cnblogs.com/files/jackson0714/kj.gif‘) no-repeat 0 0;
padding-left: 16px;
}

blog_post_info_block a {

text-decoration: none;
color: #5B9DCA;
padding: 3px;

}

sideCatalogBtn {

border-radius:5px;

}

/*******************************************************/
/
代码高亮开始，使用了一个叫Monokai Sublime的黑色主题皮肤，直接拿过来还不行，有一些样式冲突，还要自己稍微改一些地方
Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
/
pre {
/控制代码不换行/
white-space: pre;
word-wrap: normal;

border: 2px solid rgba(0,0,0,0.1);
/* 内边距 */

/* padding: 5px 10px 5px 20px; /
/ 外边距 /
margin: 15px 10px 5px 20px;
/ 圆角 */
border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.cnblogs-markdown .hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #23241f !important;
color: #FFF;
white-space: pre;
word-break: normal;
}

.hljs,
.hljs-tag,
.hljs-subst {
color: #f8f8f2;
}

.hljs-strong,
.hljs-emphasis {
color: #a8a8a2;
}

.hljs-bullet,
.hljs-quote,
.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-link {
color: #ae81ff;
}

.hljs-code,
.hljs-title,
.hljs-section,
.hljs-selector-class {
color: #a6e22e;
}

.hljs-strong {
font-weight: bold;
}

.hljs-emphasis {
font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-name,
.hljs-attr {
color: #f92672;
}

.hljs-symbol,
.hljs-attribute {
color: #66d9ef;
}

.hljs-params,
.hljs-class .hljs-title {
color: #f8f8f2;
}

.hljs-string,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-id,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-variable {
color: #e6db74;
}

.hljs-comment,
.hljs-deletion,
.hljs-meta {
color: #75715e;
}

/黑色主题皮肤结束/

- ## 2.2 博客侧边栏公告（支持html代码）（支持JS代码）
    - 用于记录访问计数
    ``` Objective-C
<div align="center"><a href="http://www.amazingcounters.com"><img border="0" src="http://cc.amazingcounters.com/counter.php?i=3224637&c=9674224" alt="AmazingCounters.com"></a></div>

• 2.3 页首Html代码

  <a href="https://github.com/Jackson0714" target="_blank">
  <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" >
  </a>

• 2.4 页脚Html代码

  ``` Objective-C
  
  
  
  
  
  

```