博客园CSS样式定制
每次看到那么宽的屏幕却不铺满就感觉真是暴殄天物，代码都被挤的自动换行了很难看的好吧，然后就看到后台有一个 css 定制的功能，然后就试了一下，发现这功能果然很强大。
技巧：
使用 F12 查看源码，会发现其实人家早给设计得很方便定制了，而且还有注释，如下：
但是想吐槽的是为什么宽度都是固定 px 的啊，有点怀疑是不是用 js 探测然后设置的不然太耳鼻了也...
-------------------------------------------------------------------------------------------------------------------------------------
2016-10-4 11:31:54 更新：
看到页面下面总有广告，感觉有点不爽，于是就想能不能通过定制的 css 去掉这个广告呢，当然真实的去掉是不太可能的，最多只能 display:none 之类的，但好歹用户体验上去了，于是就试了一下，果然是可以的。但是总感觉有点愧疚感，毕竟这些网站主要的盈利模式还是广告，要是再把广告不显示就跟吃人家霸王餐差不多了 o(╯□╰)o，偷偷看了一下一些大牛的博客发现不知道为什么他们的都没有屏蔽，以他们的技术水平绝不会是想不到，这背后肯定有其它的原因，比如恐惧支配，难道搞不好要被封号，不至于吧.... 不管啦，反正我这里都没有几个人看，如果以后有钱有闲（遥遥无期...）的话就迁出去自己搞一个独立博客吧还是....
刚才吃饭就一直在想，如果从技术上阻止这种行为的话，可以在自定义 css 的时候就来一个过滤器，不合法的统统过滤掉，当然为了不搞得人莫名其妙最好还是提供一个手册说明什么可以搞，什么不能动，但是这样的话跟 csdn 还有什么区别呢，就像游戏一样，真正吸引人的是自由度，人们讨厌被胁迫，讨厌被一只无形的手摆布，高度束缚换来的往往是高度反抗。
-------------------------------------------------------------------------------------------------------------------------------------
2016-10-5 10:01:54
突发奇想，如果我把整个页面都隐藏掉会发生什么情况呢。。哈哈一定很好玩，卧槽这想法太危险了可是忍不住好想试试啊。。。
-------------------------------------------------------------------------------------------------------------------------------------
2016-10-7 21:55:24 v0.3
增加了文本选中效果。
-------------------------------------------------------------------------------------------------------------------------------------
2016-10-9 18:58:06 v0.4
评论框文本阅读体验不太好，修改了一下字体颜色。
-------------------------------------------------------------------------------------------------------------------------------------
2018-11-5 23:01:39
时隔两年，随着接触东西越来越多，想法也一直在变。
决定取消广告屏蔽，用博客园的服务从来没有交过钱，还要屏蔽广告让其利益受损，心里有些过意不去，遂取消。
最主要的是相比较于 CSDN 丧心病狂的广告博客园的广告位已经很良心了，希望博客园能够撑得久一些，实在没时间精力维护独立博客。
我的定制如下：
------------- 版本迭代信息 ------------------
v0.1 原始版本，主要是为了宽度填满屏幕而写。
v0.2 增加了广告屏蔽功能
v0.3 增加了文本选中效果。
v0.4 设置了评论框文本颜色
/* 约定： 1. 被注释的是原来的属性，下方是新的属性。 2. 如果上方为空注释说明下方是新增属性。 *//------------------------------ banner 头信息 --------------------------/
/设置文本选中颜色，看起来更酷一些/
::selection {
color:white;
background-color:#334960;
}
::-moz-selection {
color:white;
background-color:#334960;
}
::-webkit-selection {
color:white;
background-color:#334960;
}
/标题/
#header {
position: relative;
top: 0;
left: auto;
/width: 950px;/
width: 95%;
height: 310px;
margin: auto;
border: none;
padding: 0;
background: none;
}
/副标题/
#blogTitle h2 {
float: left;
width: 740px;
margin: 0;
border: none;
padding: 0;
color: #666;
font-family: Arial,Helvetica,sans-serif;
/font-size: 18px;/
font-size:1px;
font-weight: normal;
text-decoration: none;
}
/博客标题/
#blogTitle {
position: relative;
top: 130px;
left: 0;
width: 740px;
height: 75px;
margin: 0;
border: none;
padding: 0;
//
padding-left:2%;
background: none;
}
/导航栏项连接/
#navList a {
display: block;
width: 70px;
height: 31px;
float: left;
text-align: center;
padding-top: 9px;
font-size: 14px;
font-family: 微软雅黑, 微软雅黑, 微软雅黑, 微软雅黑; / 黑人问号？？？ /
//
color:#666;
}
/-------------------------------- 主内容面板 ----------------------------------------/
/主面板/
#main {
position: relative;
top: 0;
left: auto;
/width: 950px;/
width:95%;
height: auto;
margin: auto;
border: none;
padding-right: 0;
}
/内容面板/
#mainContent {
float: right;
//
width:80%;
}
/所有项合集的面板/
#mainContent .forFlow {
background-position: right top;
}
/每一项的面板/
.day {
position: relative;
/width: 690px;/
width: 90%;
height: auto;
margin: 0 20px 0 20px;
border: none;
padding: 0;
}
/标题/
.postTitle {
position: relative;
/width: 690px;/
width: 100%;
margin: 0;
border: none;
padding: 0;
}
/项内容/
.postCon {
position: relative;
/width: 690px;/
width:100%;
height: auto;
margin: 10px 0 0 0;
border: none;
padding: 0;
color: #494949;
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
font-weight: normal;
text-decoration: none;
line-height: 1.4;
}
/项的描述/
.postDesc {
position: relative;
width: 690px;
height: 30px;
margin: 0;
border-bottom: #ccc 1px dashed;
padding: 0;
color: #666;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: normal;
text-decoration: none;
line-height: 1.4;
}
/---------------------------------- 查看博文详细页面 --------------------------------------/
/博文主面板/
#topics {
position: relative;
/width: 710px;/
width: 95%;
height: auto;
margin: 0;
border: none;
padding: 0;
}
/博文标题/
#topics .postTitle {
position: relative;
/width: 690px;/
width: 100%;
margin: 0;
border: none;
padding: 0;
}
/博文内容/
.postBody {
position: relative;
/width: 690px;/
width: 100%;
height: auto;
margin: 0;
border: none;
padding: 0;
/color: #494949;/
color:#111; /默认的颜色好看是好看但是太不利于阅读了/
/font-family: Arial,Helvetica,sans-serif;/
font-family: 微软雅黑,Arial,Helvetica,sans-serif;
font-size: 14px;
font-weight: normal;
text-decoration: none;
line-height: 1.6;
}
/下方的作者信息/
#author_profile {
float: left;
/width: 280px;/
width: 30%;
margin-top: 0;
margin-bottom: 10px;
color: #000;
margin-left: 0;
font-size: 12px;
}
/推荐图标，这个东西默认是右浮动的，郁闷又没人给我推荐我还要处理它好想直接 display:none 算了.../
#div_digg {
float: right;
margin-bottom: 10px;
margin-right: 30px;
font-size: 12px;
/width: 125px;/
width: 33%;
text-align: center;
margin-top: 10px;
}
/推荐小手图标/
.diggit {
float: left;
width: 46px;
height: 52px;
background: url('http://static.cnblogs.com/images/upup.gif') no-repeat;
text-align: center;
cursor: pointer;
margin-top: 2px;
padding-top: 5px;
}
/反对小手图标/
.buryit {
/float: right;/
float:left;
margin-left: 20px;
width: 46px;
height: 52px;
background: url('http://static.cnblogs.com/images/downdown.gif') no-repeat;
text-align: center;
cursor: pointer;
margin-top: 2px;
padding-top: 5px;
}
/代码样式/
.cnblogs_code span {
/font-family: Courier New!important;/
font-family:"Courier New"!important;
/font-size: 12px!important;/
font-size: 12px!important;
//
color:#090909;
line-height: 1.5!important;
}
/-------------------------------- 侧边栏 ----------------------------------------/
/侧边栏/
#sideBar {
/width: 205px;/
width:auto; /试了一下还是设置为 auto 不然网页缩放的时候会有重叠/
height: auto;
float: left;
}
/-------------------------------- 查看分类页面 ----------------------------------------/
/单个列表项/
.entrylistItem {
position: relative;
/width: 690px;/
width: 90%;
height: auto;
margin: 0 20px 0 20px;
border-bottom: #ccc 1px dashed;
padding: 10px 0 10px 0;
}
/标题/
.entrylistPosttitle {
position: relative;
/width: 690px;/
width: 100%;
//
font-size:18px;
height: auto;
margin: 0;
border: none;
padding: 0;
}
/标题链接/
.entrylistPosttitle a {
color: #6a6352;
font-family: Arial,Helvetica,sans-serif;
/font-size: 14px;/
font-size:18px;
font-weight: normal;
}
/预览/
.entrylistPostSummary {
position: relative;
/width: 690px;/
width: 100%;
height: auto;
margin: 0;
border: none;
padding: 10px 0 10px 0;
color: #494949;
font-family: Arial,Helvetica,sans-serif;
/font-size: 12px;/
font-size:14px;
font-weight: normal;
text-decoration: none;
}
/元信息描述/
.entrylistItemPostDesc {
position: relative;
/width: 690px;/
width: 100%;
height: auto;
margin: 0;
border: none;
padding: 0;
color: #666;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: normal;
text-decoration: none;
}
/-------------------------------- 页尾的广告 ----------------------------------------/
/广告/
#ad_c1,#ad_t2,#under_post_news,#ad_c2,#under_post_kb,#HistoryToday{
display:none;
}
/------------------------------- 2016-10-9 18:54:58 ---------------------------------------------------------/
/ 评论框 /
.blog_comment_body {
word-wrap: break-word;
overflow: hidden;
//
color: #222;
}