前言
根據最近技術編程網站排行榜單，博客園還是擁有不錯的知名度和影響力的，作為一個技術分享的平台，能在其擁有一套屬於自己獨特風格的樣式，很關鍵！
入門
注冊博客園的賬號后，博客是要自己申請的，找到申請人口，告訴園長大大自己要開通博客的小心願（注意：一定不要Copy，不然可能會不通過的），審核通過后會收到郵件通知的，大概需要半天時間。
如果你已經是一位高手了，請直接看下一節進階篇。
1、在博客首頁找到管理的入口，點擊進入；
2、在右上角找到模板，如圖：
3、可以通過點擊設計者來查看該作者的博客樣式，如圖：
4、滿意的話點擊立即使用該模板，你的博客樣式就變成你看到的樣子。
進階
如果你是一位不拘一格的前端開發者，那你一定不滿足於模板所提供的樣式，那么進階篇是適用於你的。
1、在博客園的后台管理中找到設置，如圖：
2、下滑到最下面你就明白了：
3、回到博客首頁，並按F12打開開發者工具，找到你想要更改的類名，並加到步驟2中的CSS代碼中：
Tips：
我之前引用了模板，現在想用純原生的來創作，怎么還原？
在設置頁面，有一個博客皮膚的選項，那就是你之前選擇的模板。其中，有一個名為Custom的模板，就是默認模板樣式。
博客頁面有廣告，可以屏蔽掉的
通過F12開發者工具找到對應的元素標識（id或者類名），更改其display：none屬性即可。
如何添加圖片
添加圖片的時候，發現並沒有提供上傳的入口，而是直接輸入url，解決方法如下：
方法一：
也許你是從其他網站看到的美圖，想直接copy過來。那么，你可以直接拿到它的url：
方法二：
博客園的后台管理中，有兩個地方能存放圖片，相冊和文件：
注意：文件中只能存放GIF圖片，其他圖片格式可用PS轉成GIF格式或者存放在相冊中。
圖片保存后點擊相對應的圖片，在URl或者開發者工具中就能拿到圖片的絕對路徑。
很喜歡你的loading動畫，怎么做到的？
在后台管理的設置中，插入如下代碼：
剩下的就是CSS動畫了，實現代碼如下：
1 .loading { 2 position: fixed; 3 top: 0; 4 z-index: 999; 5 height: 100%; 6 width: 100%; 7 text-align: center; 8 background: #ffffff; 9 font-size: 18px; 10 visibility: hidden; 11 opacity: 0; 12 -webkit-animation: loading 3s linear; 13 } 14 .loading img { 15 margin-top: 100px; 16 } 17 @-webkit-keyframes loading { 18 0%{opacity: 1;visibility: visible;} 19 90%{opacity: 1;} 20 100%{opacity: 0;visibility: visible;} 21 }
最終效果：
