• 自定义博客园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图


  • 相关阅读:
    37.使用FileWriter类向文本文件写数据
    36.使用FileReader读取文本文件
    35.使用FileOutputStream类向文本文件写数据
    34.使用FileInputStream类读取文本文件
    33.使用BufferedWriter和FileWriter类写文本文件
    32.使用BufferedReader和FileReader读取文本文件
    31.使用BufferedReader和FileReader读取文本文件
    30.解决中文乱码
    框架搭建资源 (一) V(视图)C(控制)模式
    GPS转换为百度坐标
  • 原文地址:https://www.cnblogs.com/youlinwd/p/5534251.html
Copyright © 2020-2023  润新知