发现博客园的样式能够改，可是大体的页面架构都差很少，也算是大同吧。html
如今有一个比较好的样式 https://www.cnblogs.com/esofar/p/cnblogs-theme-silence.html 参考这个连接，下载相关的样式。浏览器
目前本身的样式，都是沿用以前的但一直不想要更换。而后就一直折腾到这样子。markdown
【知晓：这些改动都是在基于BlackLowKey】架构
一、将侧边栏的颜色改为很淡的颜色，避免影响阅读，在不更改样式的状况下。个人标签这个下面的列表有右边的数字采用使用高度和宽度限定让数字不显示，在样式中没有找到相关的元素修改字体颜色。dom
二、去掉下面的广告，没有广告的图片，修改评论框的高度。ide
三、修改postTitle样式，字体变大，没有边框。svg
四、markdown的样式修改，改来改去，追踪仍是使用默认的（心累）。可是引用样式很差，修改blockquote样式，不要原本的引号。post
五、总体的header的背景修改。footer样式默认是黑色，字体白色，本身修改属性color的值。学习
【注意：】若是在网页上直接复制样式代码粘贴到定制框的话，彷佛不生效，须要本身将空格删掉，从新添加。字体
这些样式，若是想要修改成本身想要的样式，注意使用fn+F12查看页面代码的结构和它的样式，慢慢修改。
这些宽度显示的问题，使用百分之几这样子吧，而后加上max-width，控制最大宽度（个人是960px）。这样就不会在有的设备上显示不一致了。
总体的样式代码以下：
#site_nav_under { display: none; } .c_ad_block, .ad_text_commentbox { display: none; margin: 0; padding: 0; } #ad_under_google { height: 0; overflow: hidden; } #ad_under_google a { display: none; } #home { margin: 0 auto; width: 100%; max-width: 960px; background-color: #fff; padding: 30px; margin-top: 30px; margin-bottom: 50px; box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); display: table; } body { width: 100%; background-image: url("https://www.cnblogs.com/images/cnblogs_com/wisdomzhang/1402916/o_f9c3475544e884bc01cbce5212829276.jpg"); background-size: 100%; background-repeat: no-repeat; background-attachment: fixed; filter:alpha(opacity=100); opacity: 0.97; line-hight: normal; } #header { background-color: #fff; } #blogTitle { height: 60px; clear: both; } #navigator { font-size: 13px; border-bottom: 1px solid #ededed; border-top: 1px solid #ededed; height: 50px; clear: both; margin-top: 25px; } #blogTitle h1 a{ color: #4F4F4F; text-shadow: 3px 3px 3px #D9D9D9; } #blogTitle h2 { font-weight: normal; font-size: 18px; font-size: 1.18571429rem; line-height: 2.546153846; color: #757575; float: left; margin-top: 0.5em; text-shadow: 2px 2px 2px #D9D9D9; } #main{ width: 100%; max-width: 700px; position: relative; } #main: after { display: table; content: ""; clear: both; } #mainContent{ width: 100%; max-width: 725px; position: relative; } #sideBar { background-color: #fff; text-color: #eee; width: 14rem; height: 100%; position: absolute; //top: 30px; right:0px; opacity: 0.8; margin-left: 0; margin-right: 10px; } .newsItem .catListTitle, #blog-sidecolumn .catListTitle{ border: 1px solid #F5F5F5; background: #F5F5F5; color: #DCDCDC; } #blog-news, #blogCalendar.Cal, #sideBarMain a:visited, #sideBarMain a:link, .catListPostCategory li, .CalTitle{ color: #D3D3D3; } .CalTitle{ border-bottom: 1px solid #D3D3D3; } .catListTag ul li{ height: 19px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 5px 8px; border: 0px solid #333e36; margin: 0; display: inline-grid; transition: all .3s; border-radius: 2px; } div.commentform textarea { height: 100px; } #footer{ color: #000; } #topics .postTitle { padding: 10px; padding-left: 0px; margin-top: 30px; //border-left: 5px solid #1fa6e6; border-left: 0px solid #fff; border-bottom: 1px solid #fff; text-color: #000; font-size: 180%; } .postTitle { padding: 10px; padding-left: 0px; border-left: 5px solid #fff; text-color: #000; font-size: 150%; } #ad_t2, #cnblogs_c1, #cnblogs_c2{ display: none; } @font-face{font-family:iconfont;src:url(https://b-gold-cdn.xitu.io/fonts/iconfont.eot?t=1470110358);src:url(https://b-gold-cdn.xitu.io/fonts/iconfont.eot?t=1470110358#iefix) format("embedded-opentype"),url(https://b-gold-cdn.xitu.io/fonts/iconfont.woff?t=1470110358) format("woff"),url(https://b-gold-cdn.xitu.io/fonts/iconfont.ttf?t=1470110358) format("truetype"),url(https://b-gold-cdn.xitu.io/fonts/iconfont.svg?t=1470110358#iconfont) format("svg")} .cnblogs-markdown blockquote { border: 0; border-left:.5em solid #eee; padding: 10 0 10 1.5em; margin-left:0; margin: 5 0 5 0; background-color: ##bfbfbf; background-image: none; } .cnblogs-markdown blockquote cite { font-size:14px; line-height:20px; color:#bfbfbf; } .cnblogs-markdown blockquote cite:before { content: '\2014 \00A0'; } .cnblogs-markdown blockquote p { color: #666; }
----------------------------------- 以上更新 -----------------------------------
过了很久才开始修改本身须要的页面，仍是要悉心看代码，才能改代码。如今看都的是本身稍微修改过的页面，下面梳理下修改过程：
1.在博客后台设置本身的博客皮肤，选择本身喜欢的。
2.选完皮肤后，可修改页面，以下所示。
3.先修改一下背景图片吧，在相册中，添加一张图片。添加后就是这样。
点击图片能够查看，而后浏览器地址栏中就会出现本身的图片地址，下面会用到。
4.本身不会写，可根据网上人家给的代码，而后本身修改就能够。
#site_nav_under { display: none; } .c_ad_block, .ad_text_commentbox { display: none; margin: 0; padding: 0; } #ad_under_google { height: 0; overflow: hidden; } #ad_under_google a { display: none; } #home { margin: 0 auto; width: 65%; min-width: 950px; background-color: #fff; padding: 30px; margin-top: 30px; margin-bottom: 50px; box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); } #blogTitle { height: 60px; clear: both; } #navigator { font-size: 13px; border-bottom: 1px solid #ededed; border-top: 1px solid #ededed; height: 50px; clear: both; margin-top: 25px; } #blogTitle h1 a{ color: #4F4F4F; text-shadow: 3px 3px 3px #D9D9D9; } #blogTitle h2 { font-weight: normal; font-size: 18px; font-size: 1.18571429rem; line-height: 2.546153846; color: #757575; float: left; margin-top: 0.5em; text-shadow: 2px 2px 2px #D9D9D9; } body{ background-image:url("https://www.cnblogs.com/images/cnblogs_com/wisdomzhang/1402916/o_f9c3475544e884bc01cbce5212829276.jpg"); background-repeat:no-repeat; background-size:100%; background-attachment: fixed; filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1; opacity: 1; }
若是不知道怎么该修改那一块，能够打开浏览器的开发者模式，找到须要修改的模块，而后修改对应的参数。便可，fn+f12,
（注意：这个头部有阴影，一开始是白色的，使用的是blogTitle h1修改不过来，仔细查看代码，发现应该使用blogTitle h1 a来修改，标题里面还嵌入了一个连接标签，里面才是文字。）
5.上面的标题和子标题分别在设置中填写便可
6.最后花点时间，理顺本身的页面配色。我就简单的，修改了一下。
7.后来学习了markdown来编辑文本更方便快捷，而后修改一下markdown的样式。使用的样式参考为：https://www.cnblogs.com/zhangjk1993/p/5442676.html
最后，给出我参考的博客：
https://www.cnblogs.com/Dillonh/p/8991655.html