• 自定义博客园skin


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

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

      

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

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

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

      

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

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

    <body>
      <div id="home">
        <div id="header">
          <div id="blogTitle">
          </div>
    <!--end: blogTitle 博客的标题和副标题 -->
          <div id="navigator">
            <div class="blogStats">
            </div>
    <!--end: blogStats -->
              </div>
    <!--end: navigator 博客导航栏 -->
      </div>
    <!--end: header 头部 -->
      <div id="main">
        <div id="mainContent">
          <div class="forFlow">
          </div>
    <!--end: forFlow -->
        </div>
    <!--end: mainContent 主体内容容器-->

        <div id="sideBar">
          <div id="sideBarMain">
    <!--done-->
          </div>
    <!--end: sideBarMain -->

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


      </div>
    <!--end: main -->
        <div id="footer">

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

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

      

    应该是这样,凑合着看吧

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

      

    看看效果

    看来大概就是这样改了。

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

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

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

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

    还算不是很刺眼,哈哈

    附上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图


  • 相关阅读:
    LSMW TIPS
    Schedule agreement and Delfor
    Running VL10 in the background 13 Oct
    analyse idoc by creation date
    New Journey Prepare
    EDI error
    CBSN NEWS
    Listen and Write 18th Feb 2019
    Microsoft iSCSI Software Target 快照管理
    通过 Microsoft iSCSI Software Target 提供存储服务
  • 原文地址:https://www.cnblogs.com/youlinwd/p/5534251.html
Copyright © 2020-2023  润新知