码迷,mamicode.com
首页 > 其他好文 > 详细

给你的博客园增加背景,头像和top小火箭

时间:2019-07-14 15:15:05      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:rda   turn   height   scroll   order   返回   anim   lse   定制   

个人头像

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

 <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;
  width: 85%;
  min-width: 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 {
       width: 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>

 

给你的博客园增加背景,头像和top小火箭

标签:rda   turn   height   scroll   order   返回   anim   lse   定制   

原文地址:https://www.cnblogs.com/guomie/p/11183885.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!