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"> 关注我们 <i class="fa fa-eye" aria-hidden="true"></i></a>
</div>
<div class="fl3">
<a href="Mailto:zhongwen322@gmail.com"> 联系我们 <i class="fa fa-envelope-o" aria-hidden="true"></i></a>
</div>
</div>
订阅:
博文评论 (Atom)
没有评论:
发表评论