初了解博客园自定义样式及美化

博客园是国内的技术分享社区,博客页面支持自定义模板和自定义样式。

今天看到有位园友前端小蜜蜂仿B站空间做了个样式,突然很感兴趣,研究了下给自己的博客页面做了一个。

开发思路

  1. 后台->设置->账户设置->博客皮肤中,选择BuildtoWin。选择这个皮肤的原因是,样式修改比较容易。
  2. 打开自己的博客页面,同时打开B站空间页面,打开F12对照修改Css样式。
  3. 修改样式后,将样式粘贴到后台->设置->账户设置->页面定制CSS代码中,再刷新博客页面就能看到效果。
  4. 最终效果:www.cnblogs.com/juetan

字体图标

图标是直接用B站的iconfont文件,在CSS中直接引用,可根据需要直接引用或上传到别的地方引用。

@font-face {font-family: "iconfont";
  src: url('//at.alicdn.com/t/font_438759_6uqfqtzb01ux47vi.eot?t=1512701772063'); /* IE9*/
  src: url('//at.alicdn.com/t/font_438759_6uqfqtzb01ux47vi.eot?t=1512701772063#iefix') format('embedded-opentype'), /* IE6-IE8 */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-ic_play:before { content: "\e61b"; }

.icon-ic_comment:before { content: "\e61c"; }

.icon-ic_up:before { content: "\e61d"; }

.icon-ic_danmu:before { content: "\e61e"; }

.icon-ic_collection:before { content: "\e61f"; }

.icon-ic_moveup:before { content: "\e620"; }

.icon-ic_movedown:before { content: "\e621"; }

.icon-ic_delete:before { content: "\e622"; }

.icon-ic_time:before { content: "\e623"; }

.icon-ic_collect:before { content: "\e624"; }

.icon-ic_channel:before { content: "\e625"; }

.icon-ic_home:before { content: "\e626"; }

.icon-ic_setting:before { content: "\e627"; }

.icon-ic_playlist:before { content: "\e628"; }

.icon-ic_interest:before { content: "\e629"; }

.icon-ic_sub:before { content: "\e62a"; }

.icon-ic_article:before { content: "\e62b"; }

.icon-ic_video:before { content: "\e62c"; }

.icon-ic_following:before { content: "\e62d"; }

.icon-ic_upload:before { content: "\e62e"; }

.icon-ic_more:before { content: "\e62f"; }

.icon-ic_close:before { content: "\e630"; }

.icon-checkbox_selected:before { content: "\e631"; }

.icon-checkbox:before { content: "\e632"; }

.icon-radio:before { content: "\e633"; }

.icon-radio_selected:before { content: "\e634"; }

结语

目前只针对博客首页做了样式修改,其他内容的修改思路是一样的,有空的时候再完善一下。除了样式修改,还可以自定义修改模板,这个尚未了解,不过找到一位园友DIVMonster的博客美化文章,有兴趣的可以了解下。

posted @ 2020-05-31 20:30  绝弹笔记  阅读(560)  评论(0编辑  收藏  举报