最近一直在园子里潜水,觉得园子的氛围还是挺好的,大神很多。于是,跑去注册了博客园,然后马上申请开通博客,当天就通过了审批,心情略微有点小激动。

首先自定义一个博客地址,该弄一个怎样的才够cool呢?··· youlin98,youlinwd,youlinzero。。。有点纠结ing,算了就这个吧,youlinwd ,还行。。。next,选择博客园皮肤(简称博皮),看了两圈,选了custom的博皮。开始自定义博皮ing...

 

  自定义博客园skin

 

下载了这两个东西,打开文档一看。。。

自定义博客园skin

  ===========================================华丽的分割线==============================================自定义博客园skin

 ===========================================华丽的分割线==============================================

  自定义博客园skin

原谅我不够聪明,这自定义博客园skin。。。/yun/yanhua (不支持表情麽),基本一头雾水。遂度之,结果也是寥寥无几。ok,只能试试看了。根据博问里的一些提示,按下F12,出来了熟悉的devtool。

整理了一下html的结构布局,几乎都是只有id命名,只能用id了,

<body>
  <div ><!--end: mainContent 主体内容容器-->

    <div ><!--end: sideBarMain -->

<!--end: sideBar 侧边栏容器 -->
    </div>


  </div>
<!--end: main -->
    <div >

           </div>
<!--end: footer -->
  </div>
<!--end: home 自定义的最大容器 -->
</body>

看着有点混乱,画个图来~

  自定义博客园skin

应该是这样,凑合着看吧

试着改了一下,然后粘贴,id选择器写css

  自定义博客园skin

看看效果

自定义博客园skin

看来大概就是这样改了。

ok,看看目前的样子吧,有点陋...

自定义博客园skin

初步样子就这样了。。。没有设计天赋 <奈何>

现在真的受不了那种又臭又长的网页,没有一个回到顶部的按钮,还要慢慢滚到顶部,这真是什么鬼

看看我效果~原本想用iconfont的,结果不支持文件的格式,没办法了,自制一个吧

自定义博客园skin

还算不是很刺眼,哈哈

附上jq代码

$(function () {
  $(window).scroll(function(){
    //当滚动条到距顶部100像素以下,淡入
    if ($(window).scrollTop() > 100){
      $("#back2Top").fadeIn(2000);
    } else {
      $("#back2Top").fadeOut(1000);
    }
});
  //当点击回到顶部
  $("#back2Top").click(function(e){
    e.preventDefault();
    $(document.body).animate({scrollTop: 0}, 800);
  });
});

新人第一次发帖,好像图片有点多,欢迎各位大神指正,希望本文对想玩博皮的dev有帮助。

应该说,对于自定义css管理员给了很大的自由度,先写到这吧,后续待更···

 

最后附一张模仿的p图


自定义博客园skin

 

相关文章:

  • 2022-02-07
  • 2021-11-27
  • 2022-01-29
  • 2021-11-10
  • 2021-09-01
  • 2021-06-14
猜你喜欢
  • 2021-09-29
  • 2021-11-03
  • 2021-07-18
  • 2022-12-23
  • 2021-11-11
  • 2018-12-14
  • 2021-11-06
相关资源
相似解决方案