2017年2月18日星期六

固定页脚的写法


无论页面怎么动,你的也脚都不会动,这样可以随时返回顶部。超爱的一个功能!
将以下代码整体复制粘贴到你的html.erb文件中即可。

效果预览:
https://fullstack.xinshengdaxue.com/works/197

<style media="screen">
  .floatingevey{
    width: 100%;
    height: 50px;
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 98;
  }
  .backtotop, .fl3{
    color:white;
    font-size: 16px;
    line-height: 50px;
    float: right;
    margin-right: 20px;
  }
  .backtotop:hover{
    color:orange;
  }
  .fl3 a{
    color: white;

  }
.fl3 a:hover{
  color:orange;

}
a{
text-decoration:none;
}
</style>


<div class="floatingevey">

<div class="fl1">


</div>
<div class="fl4">
 <a href="#" class="backtotop">返回顶部</a>

</div>

<div class="fl3">
<a href="http://www.weibo.com/zhongwen322?is_all=1"> 关注我们&nbsp;<i class="fa fa-eye" aria-hidden="true"></i></a>
</div>


<div class="fl3">
<a href="Mailto:zhongwen322@gmail.com"> 联系我们&nbsp;<i class="fa fa-envelope-o" aria-hidden="true"></i></a>
</div>

</div>

没有评论:

发表评论