博客园CSS样式定制

博客园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('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('no-repeat; text-align: center; cursor: pointer; margin-top: 2px; padding-top: 5px;}/*代码样式*/-blogs_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;}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。