博客园的一种美化方案
Posted lqerio
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了博客园的一种美化方案相关的知识,希望对你有一定的参考价值。
页面定制css
注意是darkgreentrip
#home
margin: 0 auto;
width: 80%;/*原始65*/
min-width: 980px;/*页面顶部的宽度*/
background-color: rgba(245, 245, 245, 0.7);
padding: 30px;
margin-top: 50px;
margin-bottom: 50px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
body
background: rgba(12, 100, 129, 1) url('https://www.cnblogs.com/images/cnblogs_com/lqerio/1307256/o_%604W~R23XSXW)N2L%7BDKM8LNT.png') fixed no-repeat; //修改背景图片
background-position: 50% 5%;
background-size: cover;
#blogTitle
height: 100px; /*高度*/
clear: both;
background-color: rgba(240,255,255,0.5); //博客标题的背景
#blogTitle h1
font-size: 36px;
font-weight: bold;
line-height: 1.8em;/*原始 1.6em*/
margin-top: 10px;/*原始 15px */
color: #FF1493;
#blogTitle h2
font-weight: normal;
font-size: 17px;/*原始 16px ;font-size: 1.0rem;*/
line-height: 1.8;
color: #FF1493;
font-weight: bold;
text-align: right;
float: right;
#navigator
background-color:rgba(135,206,205, 0.5); //标题栏下的颜色
#navList a:link, #navList a:visited, #navList a:active
color: #FFFFFF;
font-size: 18px;
font-weight: bold;
.blogStats
color: #eee;
.postTitle
border-left: 8px solid rgba(132,112,255, 0);
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: #FF6A6A;
transition: all 0.4s linear 0s;
.postTitle a:hover
margin-left: 30px;
color: #EE6363;
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(255,110,180,0.6); //栏目的条纹颜色
#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);
#qbackground: rgba(255, 255, 255, 0);
.CalNextPrevbackground: 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);
#mainmin-width: 640px;
.entrylist
background: rgba(255, 255, 255, 0.5);
/*
代码高亮开始,使用了一个叫Monokai Sublime的黑色主题皮肤,直接拿过来还不行,有一些样式冲突,还要自己稍微改一些地方
Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
*/
pre
/*控制代码不换行*/
white-space: pre;
word-wrap: normal;
.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;
/*黑色主题皮肤结束*/
以上是关于博客园的一种美化方案的主要内容,如果未能解决你的问题,请参考以下文章