博客园样式

https://segmentfault.com/a/1190000012956911

1. 基础介绍

1-1. 介绍一下我的博客设置

1. 我个人比较习惯用 Makedown 来编写，所以我选择的编辑器是 Makedown，在 [ 管理 ] - [ 选项 ] 中可以设置。
2. 在 [ 管理 ] - [ 模版 ] 中有许多博客模板，可以直接使用，界面也会变好看一点。我使用的是 red_autumnal_leaves （红叶）
3. 因为我的样式定制是在红叶的模版基础上进行修改的，所以可能其他的模版会出现兼容的问题，这个可以根据自己的模版和喜好进行修改。（我已经尽量做到样式兼容了，但是模版太多，心有余而力不足啊。。。）

1-2. 简单的操作

可以通过审查元素的方法，来设置自己满意的样式。操作是F12。
F12操作可以打开控制面板，具体的样式可以直接在上面修改，然后把修改后的样式保存下来。

保存后的样式，复制到[ 管理 ] - [ 设置 ] - 页面定制CSS代码上面，然后[ 保存 ]

注意：
有时候修改的样式没有起作用，是因为样式的优先级的原因，这里我选择简单粗暴的!important来解决

2. 设置标题、子标题、导航栏

2-1. 标题和子标题

标题和子标题 是页面最顶部的，设置在 [ 管理 ] - [ 设置 ] - 标题，子标题

/* 博客标题和副标题 */
#blogTitle {
    overflow: hidden;
    height: auto;
    text-align: center;
}
blogTitle h1 {
font-size</span>:<span style="color: #0000ff;"> 35px</span>;<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
margin-left</span>:<span style="color: #0000ff;"> 0</span>;

}
blogTitle h2 {
margin-left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
font-size</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
font-weight</span>:<span style="color: #0000ff;"> bold</span>;<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> #000</span>;

}

2-2. 博客顶部的导航栏

/*博客导航栏 */
#navList {
    float: left;
}
navList li {
border</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
font-size</span>:<span style="color: #0000ff;"> 16px</span>;

}
.blogStats {

display: none;

}

３. 设置博客侧边栏

3-1. 侧边栏整体公共样式

/*sideBar博客侧边栏容器*/
#sideBar {
    width: 300px;
    box-sizing: border-box;
    margin-left: 30px;
    padding: 0;
}
.newsItem, .catListComment, .catListEssay, .catListView, .catListFeedback,
blog-calendar, #sidebar_postcategory, #sidebar_postcategory, #sidebar_postarchive, #sidebar_search {
<span style="color: #008000;">/*</span><span style="color: #008000;">侧边栏每一模块添加圆角和阴影</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
border-radius</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
box-shadow</span>:<span style="color: #0000ff;"> 1px 2px 3px #A7A8AD</span>;<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;"> #fff</span>;

}
sideBarMain h3, .newsItem h3 {
<span style="color: #008000;">/*</span><span style="color: #008000;">侧边栏每个模块的标题部分</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
font-size</span>:<span style="color: #0000ff;"> 1.2em</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;"> 50px</span>;<span style="color: #ff0000;">
line-height</span>:<span style="color: #0000ff;"> 50px</span>;<span style="color: #ff0000;">
text-indent</span>:<span style="color: #0000ff;"> 0.5em</span>;<span style="color: #ff0000;">
background</span>:<span style="color: #0000ff;"> url(http://www.cnblogs.com/skins/red_autumnal_leaves/images/titlebg.png) no-repeat left center #fff</span>;<span style="color: #ff0000;">
padding</span>:<span style="color: #0000ff;"> 0 0 0 50px</span>;<span style="color: #ff0000;">
margin-bottom</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
border</span>:<span style="color: #0000ff;"> 1px solid #55895B</span>;<span style="color: #ff0000;">
border-left-width</span>:<span style="color: #0000ff;"> 5px</span>;<span style="color: #ff0000;">
border-radius</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
border-right-width</span>:<span style="color: #0000ff;"> 5px</span>;

}
/侧边栏列表样式/
sideBarMain ul {
background-color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
padding</span>:<span style="color: #0000ff;"> 15px 20px</span>;<span style="color: #ff0000;">
border-bottom-left-radius</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
border-bottom-right-radius</span>:<span style="color: #0000ff;"> 10px</span>;

}
sideBarMain li {
line-height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
border-bottom</span>:<span style="color: #0000ff;"> 1px solid #ddd</span>;<span style="color: #ff0000;">
font-size</span>:<span style="color: #0000ff;"> 14px</span>;

}

3-2. 侧边栏公告

3-3. 头像设置

在 [ 管理 ] - [ 设置 ] - 博客侧边栏公告 这里添加 html 代码，用来添加头像，地址用自己的头像

//图片的地址更换成你的头像的地址
<img src="https://cnblogspic.oss-cn-hangzhou.aliyuncs.com/avatar/937605/20180122200140.png">

3-4. 侧边栏公告样式

/*侧边栏公告*/
#blog-news > img {
    /*头像*/
    display: block;
    margin: auto;
    border-radius: 50%;
}
profile_block {
font-size</span>:<span style="color: #0000ff;"> 15px</span>;<span style="color: #ff0000;">
padding</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
line-height</span>:<span style="color: #0000ff;"> 1.8</span>;

}
profile_block > a:link {
color</span>:<span style="color: #0000ff;"> #F60</span>;

}
/公告结束/

3. 侧边栏日历

/* 日历 */
#blog-calendar, #calendar {
    width: 300px;
}
blog-calendar td {
padding</span>:<span style="color: #0000ff;"> 5px 3px</span>;<span style="color: #ff0000;">
font-size</span>:<span style="color: #0000ff;"> 14px</span>;

}
blog-calendar td a {
font-weight</span>:<span style="color: #0000ff;"> bold</span>;<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> #59a020</span>;

}
blog-calendar table a:hover {
color</span>:<span style="color: #0000ff;"> #59a020</span>;<span style="color: #ff0000;">
text-decoration</span>:<span style="color: #0000ff;"> underline</span>;<span style="color: #ff0000;">
background</span>:<span style="color: #0000ff;"> transparent</span>;

}
blog-calendar table u {
text-decoration</span>:<span style="color: #0000ff;"> none</span>;

}
/日历结束/

4. 侧边栏搜索框

.mySearch #q {
    height: 40px;
    width: 150px;
    border-radius: 5px;
    border: 1px solid #ddd;
}
.mySearch #btnZzk {

height: 42px;

width: 90px;

background: #fd6d0dd1;

color: #fff;

border-radius: 5px;

border: none;

font-size: 15px;

cursor: pointer;

}
.div_my_zzk {

padding: 0 20px;

display: flex;

justify-content: space-around;

}
/搜索框结束/

４. 评论列表

/*评论*/
/*评论列表*/
#blog-comments-placeholder {
    border-radius: 10px;
    background: #fff;
    padding: 30px 40px;
}
.feedback_area_title {

background: url(//www.cnblogs.com/skins/red_autumnal_leaves/images/titlebg.png) no-repeat left center #fff;

border: 1px solid #55895B;

border-left-width: 5px;

border-radius: 10px;

border-right-width: 5px;

padding: 15px 50px;

}

/* 提交评论按钮 */
#btn_comment_submit {
    border: solid 1px #fd6d0dd1 !important;
    width: 90px;
    height: 40px;
    color: #fff !important;
    background-color: #fd6d0dd1 !important;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

4-2. 侧边栏评论

/*侧边评论*/
li.recent_comment_body {
    line-height: 30px;
}

5. 个性签名

个性签名 这个是根据个人的喜好设置的，可以在 [ 管理 ] - [ 设置 ] - [ 博客签名 ] 里面自定义设置。下面展示我的个性签名的设置。

/* 个性签名 */
#MySignature {
    box-shadow: 8px 1px 10px #989898;
    padding: 10px;
    text-shadow: 1px 1px 1px #FFF;
    font-size: 17px;
    border-left: solid 5px #55895B;
    background: #F3F3F3;
    border-radius: 10px 10px 50% 10px;
    line-height: 2.4;
    margin: 40px 0;
}
MySignature a {
text-decoration</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> #4183c4</span>;<span style="color: #ff0000;">
font-weight</span>:<span style="color: #0000ff;"> bold</span>;

}
MySignature a:hover {
text-decoration</span>:<span style="color: #0000ff;"> underline</span>;<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> #f60</span>;

}
MySignature span {
color</span>:<span style="color: #0000ff;"> #f60</span>;

}

6. 博客文章主体样式

/* 标题title样式 */
#topics .postTitle {
    font-size: 25px;
    padding: 0 40px;
    border: none;
    box-sizing: border-box;
}
cb_post_title_url {
border</span>:<span style="color: #0000ff;"> 1px solid #55895B</span>;<span style="color: #ff0000;">
border-left-width</span>:<span style="color: #0000ff;"> 5px</span>;<span style="color: #ff0000;">
border-radius</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
border-right-width</span>:<span style="color: #0000ff;"> 5px</span>;<span style="color: #ff0000;">
background-position</span>:<span style="color: #0000ff;"> left center</span>;<span style="color: #ff0000;">
padding</span>:<span style="color: #0000ff;"> 15px 50px</span>;<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;

}

/*设置背景色和字体大小*/
body {
    font-size: 15px;
    box-sizing: border-box;
}
/mainContent主体内容容器/
main {
display</span>:<span style="color: #0000ff;"> flex</span>;<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 95%</span>;

}
mainContent .forFlow {
margin</span>:<span style="color: #0000ff;"> 0 0 0 310px</span>;

}
mainContent {
margin</span>:<span style="color: #0000ff;"> 0 0 0 -310px</span>;

}
post_detail {
overflow</span>:<span style="color: #0000ff;"> hidden</span>;

}
/ 主体内容样式 /

.postBody {

padding: 20px 40px;

}
cnblogs_post_body {
font-size</span>:<span style="color: #0000ff;"> 15px</span>;

}
cnblogs_post_body h2 {
//标题h2
border-left</span>:<span style="color: #0000ff;"> 5px solid #55895B</span>;<span style="color: #ff0000;">
padding</span>:<span style="color: #0000ff;"> 10px 20px</span>;<span style="color: #ff0000;">
line-height</span>:<span style="color: #0000ff;"> 2</span>;<span style="color: #ff0000;">
background</span>:<span style="color: #0000ff;"> #d6dbdf8a</span>;<span style="color: #ff0000;">
margin</span>:<span style="color: #0000ff;"> 30px 0</span>;

}
topics .postDesc {
display</span>:<span style="color: #0000ff;"> none</span>;

}

7. 其他部分的样式

/* 关注收藏等几个按钮 */
#green_channel {
    padding: 10px;
    margin: 20px 0;
    font-size: 15px;
    width: 400px;
}
green_channel a {
border-radius</span>:<span style="color: #0000ff;"> 3px</span>;<span style="color: #ff0000;">
text-shadow</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
font-weight</span>:<span style="color: #0000ff;"> normal</span>;<span style="color: #ff0000;">
box-shadow</span>:<span style="color: #0000ff;"> none</span>;

}
/ 禁用下划线 /

.postBody a:link, .postBody a:visited, .postBody a:active {

text-decoration: none;

}
/ 上一篇下一篇 /
post_next_prev {
font-size</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> #535353</span>;

}
/底部隐藏作者，隐藏推荐和反对/
author_profile {
display</span>:<span style="color: #0000ff;"> none</span>;

}
div_digg {
display</span>:<span style="color: #0000ff;"> none</span>;

}
/隐藏广告/
ad_t2, #cnblogs_c1, #under_post_news, #cnblogs_c2, #under_post_kb {
display</span>:<span style="color: #0000ff;"> none</span>;

}

**------------恢复内容结束------------**