博客页面修改-转载
作为一个搞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],