博客园样式
https://segmentfault.com/a/1190000012956911
1. 基础介绍
1-1. 介绍一下我的博客设置
- 我个人比较习惯用
Makedown
来编写,所以我选择的编辑器是Makedown
,在[ 管理 ] - [ 选项 ]
中可以设置。 - 在
[ 管理 ] - [ 模版 ]
中有许多博客模板,可以直接使用,界面也会变好看一点。我使用的是red_autumnal_leaves (红叶)
- 因为我的样式定制是在
红叶
的模版基础上进行修改的,所以可能其他的模版会出现兼容的问题,这个可以根据自己的模版和喜好进行修改。(我已经尽量做到样式兼容了,但是模版太多,心有余而力不足啊。。。)
1-2. 简单的操作
可以通过审查元素
的方法,来设置自己满意的样式。操作是F12
。F12
操作可以打开控制面板
,具体的样式可以直接在上面修改,然后把修改后的样式保存下来。
保存后的样式,复制到[ 管理 ] - [ 设置 ] - 页面定制CSS代码
上面,然后[ 保存 ]
注意:
有时候修改的样式没有起作用,是因为样式的优先级的原因,这里我选择简单粗暴的!important
来解决
2. 设置标题、子标题、导航栏
2-1. 标题和子标题
标题和子标题 是页面最顶部的,设置在 [ 管理 ] - [ 设置 ] - 标题,子标题
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* 博客标题和副标题 */ #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. 博客顶部的导航栏
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/*博客导航栏 */ #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. 设置博客侧边栏
3-1. 侧边栏整体公共样式
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/*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. 侧边栏公告样式
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/*侧边栏公告*/ #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. 侧边栏日历
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* 日历 */ #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. 侧边栏搜索框
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.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;
}/搜索框结束/
4. 评论列表
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/*评论*/ /*评论列表*/ #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;
}
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* 提交评论按钮 */ #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. 侧边栏评论
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/*侧边评论*/ li.recent_comment_body { line-height: 30px; }
5. 个性签名
个性签名 这个是根据个人的喜好设置的,可以在 [ 管理 ] - [ 设置 ] - [ 博客签名 ]
里面自定义设置。下面展示我的个性签名的设置。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* 个性签名 */ #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. 博客文章主体样式
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* 标题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>;
}
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/*设置背景色和字体大小*/ 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. 其他部分的样式
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* 关注收藏等几个按钮 */ #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>;
}
**------------恢复内容结束------------**