1. 程式人生 > >博客園美化-darkgreentrip

博客園美化-darkgreentrip

star tro notebook category too spl att 使用 sea


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





```

博客園美化-darkgreentrip