我的博客园css模板美化的经验分享

作为一个搞CS的人，如果你只是想找个地方发博客，那么博客园还是个不错的平台。虽然现在的自建博客工具多的不得了，动态的有WordPress、Ghost，静态的有hexo、jekyll等等；虽然对于一个码农而言捣鼓这些东西也算不上太难，不过终归是要浪费时间的。所以本着一切从简的原则，我也很支持从博客园这样现成的平台上写博客。

博客园的优点很多，比如支持css、支持Markdown、支持页首html代码，也支持侧边栏JS代码。缺点当然也不少，后台界面样式古板，相对于自己建站能设置的选项还是太少，而且也不支持绑定自有域名。不过总体上来说，我还是非常喜欢博客园的，这也是我所使用的第一个技术博客平台。

使用博客园是为了从简，但是博客园提供的官方模板确实不够美观。作为一个码农，在这些模板上发表技术博客，显得low了一点，对不起自己的专业，所以这里我就介绍一下我折腾博客园美化的经历。如果你觉得我的博客园设置的还算美观，按照接下来的教程一步步来，就可以做出一样的效果。

我的博客园博客：https://www.cnblogs.com/yaoyaoliu/

首先进入博客园设置界面：

皮肤选择ThinkInside，然后在下面的页面定制CSS代码中输入如下的代码：

/*主页面样式*/
html{
   _background-image:url(none.jpg)}body{
   background:#EBEDF0 url(http://images.cnblogs.com/cnblogs_com/kingwell/389641/o_debut-light.png) repeat 0 0;color:#555;font:normal normal normal 12px/1.5 Ubuntu,Ubuntu, Helvetica, sans-serif,'\5B8B\4F53';margin:0;padding:0}a,abbr,acronym,address,applet,article,b,big,blockquote,button,canvas,caption,center,cite,code,dd,del,dfn,div,dl,dt,em,embed,fieldset,font,form,h1,h2,h3,h4,h5,h6,hr,html,nav,i,iframe,img,ins,input,kbd,label,legend,li,menu,object,ol,p,pre,q,s,samp,small,span,section,strike,strong,sub,sup,table,textarea,tbody,td,tfoot,th,thead,tr,tt,u,ul,var{
   margin:0;padding:0}table{
   border-collapse:collapse;border-spacing:0}fieldset,img{
   border:none}q:before,q:after{
   content:''}h1,h2,h3,h4,h5,h6{
   font-size:100%;font-weight:400}li{
   list-style:none}ol{
   padding-left:20px}ol li{
   list-style-type:decimal}sup{
   vertical-align:text-top}sub{
   vertical-align:text-bottom}strong{
   font-weight:bold}caption,th{
   text-align:left}input,textarea,select,button{
   font-family:Ubuntu;resize:none}.button,input[type=button],input[type=submit],button{
   cursor:pointer}a{
   text-decoration:none;color:#333}a:hover{
   text-decoration:underline;color:#333}:focus{
   outline:0}::selection{
   background:orange;color:white}a:link,a:visited,a:hover,a:active{
   color:#333;text-decoration:none;-webkit-transition:all 0.5s linear;-moz-transition:all 0.5s linear;-o-transition:all 0.5s linear;-ms-transition:all 0.5s linear}a:hover{
   text-decoration:underline;color:green}input[type=text],input[type=password],textarea{
   vertical-align:middle;border:1px solid #CCC;height:22px;line-height:22px;border-radius:2px;padding:0 5px}input[type=text]:focus,input[type=password]:focus,textarea:focus{
   box-shadow:0 0 3px rgba(0, 0, 0, 0.2) inset;border:1px solid #AAA}button,input[type=button],.btn_my_zzk{
   border:none;*border:0;padding:0 10px;height:25px;line-height:25px;background:green;color:#FFF;cursor:pointer;width:100px;overflow:hidden}button,input[type=button],.btn_my_zzk{
   vertical-align:middle;-moz-transition:all 0.5s linear;-webkit-transition:all 0.5s linear;-o-transition:all 0.5s linear;transition:all 0.5s linear;width:80px;line-height:25px;height:25px;cursor:pointer;color:#FFF;border-radius:4px;border:1px solid #55ac55;box-shadow:0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);text-shadow:0px -1px rgba(0,0,0,0.2);background-color:#51a351;background-image:-moz-linear-gradient(top,#62c462,#51a351);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #62c462), color-stop(1, #51a351));background-image:-ms-linear-gradient(top,#62c462,#51a351);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType='0')}button:hover,input[type=button]:hover,.btn_my_zzk:hover{
   background-image:-moz-linear-gradient(top,#58b058,#51a351);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #58b058), color-stop(1, #51a351));