博客園美化-darkgreentrip
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