zoukankan      html  css  js  c++  java
  • 给你的博客园增加背景,头像和top小火箭

    个人头像

    在博客侧边公告栏处添加下列代码

     <img src="https://www.cnblogs.com/images/cnblogs_com/guomie/1464522/o_gz.jpg" alt="果咩的头像" class="img_avatar" width="250px" style="border-radius:50%">
     

    背景

    在页面定制css代码处 添加下列代码

      
      body {
      color: #000;
      background: url(https://www.cnblogs.com/images/cnblogs_com/guomie/1464522/o_lm.jpg
      ) fixed;
      background-size: 100%;
      background-repeat: no-repeat;
      font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
      font-size: 12px;
      min-height: 101%;
      }
      #home {
      opacity: 0.80;
      margin: 0 auto;
       85%;
      min- 950px;
      background-color: #fff;
      padding: 30px;
      margin-top: 30px;
      margin-bottom: 50px;
      box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
      }
     

    返回top顶部小火箭

    在页脚html代码添加下列代码

    <style>
      #back-top {
           position: fixed;
           bottom: 10px;
           right: 5px;
           z-index: 99;
      }
      #back-top span {
            100px;
           height: 100px;
           display: block;
           background:url(https://www.cnblogs.com/images/cnblogs_com/guomie/1464522/o_123.png) no-repeat center center;
           background-size: contain;
      }
      #back-top a{outline:none}
      </style>
      <script type="text/javascript">
      $(function() {
          // hide #back-top first
          $("#back-top").hide();
          // fade in #back-top
          $(window).scroll(function() {
              if ($(this).scrollTop() > 500) {
                  $('#back-top').fadeIn();
              } else {
                  $('#back-top').fadeOut();
              }
          });
          // scroll body to 0px on click
          $('#back-top a').click(function() {
              $('body,html').animate({
                  scrollTop: 0
              }, 800);
              return false;
          });
      });
      </script>
      <p id="back-top" style="display:none"><a href="#top"><span></span></a></p>

    关注公众号,回复:java面试题,即可获得共几百页的java面试题

  • 相关阅读:
    C++--第12课
    C++--第11课
    C++--第10课
    C++--第9课
    C++--第8课
    C++--第7课
    鼠标
    MessageBox函数
    Windows对应的"Hello,world"程序
    网络上有哪些免费的教育资源?
  • 原文地址:https://www.cnblogs.com/guomie/p/11183885.html
Copyright © 2011-2022 走看看