發現博客園的樣式能夠改，可是大體的頁面架構都差很少，也算是大同吧。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