zoukankan      html  css  js  c++  java
  • 博客园 个人主页美化

    刚入博客园,小白也要有一个“高大上”的个人博客页面啊,鼓捣了一下午,感觉自己棒棒的,

    叉腰得瑟

    个人感觉Simple的主页样式很美观,大气,哈哈

    首先,在博客园后台管理的设置里,申请js代码的权限(默认是没有打开的)

      申请的时候一定要有礼貌,有礼貌,有礼貌(申请了三次才通,别着急,慢慢来)

    在博客侧边栏公告中添加如下代码(注意github链接请自行修改)

      在这里有一个小问题,使用h5的canvas绘制的背景和时钟能正常使用,小企鹅的插件是一个swf,部分浏览器会拦截

    <!-- 时钟控件 -->
    <div id="clockdiv"><canvas id="dom" width="180" height="180">您的浏览器不兼容canvas</canvas></div>
    <script type="text/javascript" src="https://blog-static.cnblogs.com/files/cyuanwu/clock.js"></script>
    
    <!-- 小企鹅游戏控件 -->
    <object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/penguins/penguins.swf?" width="240" height="160"><param name="movie" value="http://cdn.abowman.com/widgets/penguins/penguins.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="scale" value="noscale"/><param name="salign" value="tl"/></object>
    
    <!-- Fork me on GitHub -->
    <a href="https://github.com/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>

     页首Html代码中插入如下代码(超喜欢这个背景,就是为了这个炫酷的背景才鼓捣的,哈哈)

    <!-- 背景动画 -->
    <canvasid="c_n9"width="1920"height="990"style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas>
    <scriptsrc="https://blog-static.cnblogs.com/files/cyuanwu/canvas-nest.min.js"></script>
    
    <!-- 标签云相关库 -->
    <script src="https://blog-static.cnblogs.com/files/cyuanwu/jquery-3.3.1.min.js"></script>
    <script src="https://blog-static.cnblogs.com/files/cyuanwu/jquery.engine3D.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://blog-static.cnblogs.com/files/cyuanwu/jquery.particlePhysics.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://blog-static.cnblogs.com/files/cyuanwu/jquery.starfieldTagCloud.js" type="text/javascript" charset="utf-8"></script>

    另:个人强迫症,所以修改了一丁点的CSS

    
    

    body {
    background: #fafafa;
    }
    #clockdiv {
    text-align: center;
    margin-bottom: 20px;
    margin-bottom: 20px;
    }
    .c_b_p_desc_readmore {
    padding-left: 1.5rem;
    }
    a {
    text-decoration: none!important;
    }
    #profile_block, .newsItem >.catListTitle {
    display: none;
    }

     

     参考链接(万分感谢):

    1.http://www.cnblogs.com/felove2013/articles/4729841.html

    2.https://www.cnblogs.com/jingmoxukong/p/7826982.html?utm_source=gold_browser_extension

    3.https://www.cnblogs.com/javaIOException/p/7521849.html

    4.https://blog.csdn.net/siwuxie095/article/details/80151468

  • 相关阅读:
    BOM与DOM
    CSS中的长度单位及颜色表示
    关于display:grid layout
    关于position
    简单的注册表单
    We重邮
    APP定制开发的完整流程
    国内移动广告平台的混战大盘点
    Mobile App Monetization, Analysis & Mediation – Google AdMob
    代码优化
  • 原文地址:https://www.cnblogs.com/cyuanwu/p/9780927.html
Copyright © 2011-2022 走看看