【原创】用CSS把DIV固定到最下面(别人那里抠来的)

来源:互联网   编辑:思良  发表时间:2016-03-07  关注度:1065  

思良:很多手机导航需要把他们固定到最下面,我们可以用CSS实现,下面代码,CSS只要前面第一行即可(position:fixed;bottom:0px;就能实现),后面的只是给他们个背景。

代码:

 

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=0;">

<meta charset="UTF-8">

 

<style type="text/css">

.fixed{width:100%;height:62px;position:fixed;left:0%;bottom:0px;margin-left: 0px;background:#523817;}

.fixed a{width: 19.6%;height:62px;display:block;float: left;text-align:center;color: #fff;font-size: 1em;position: relative;border-right:1px solid #85735b;}

.fixed a.a1{background: url(../images/ico-nav-01.png) no-repeat center 8px;background-size: 52%;}

.fixed a.a2{background: url(../images/ico-nav-02.png) no-repeat center 8px;background-size: 55%;}

.fixed a.a3{background: url(../images/ico-nav-03.png) no-repeat center 10px;background-size: 43%;}

.fixed a.a4{background: url(../images/ico-nav-04.png) no-repeat center 11px;background-size: 55%;}

.fixed a.a5{background: url(../images/ico-nav-05.png) no-repeat center 8px;border-right:0px;background-size: 55%;}

.fixed a span{width:100%;position:absolute;left:0%;bottom:2px;text-align: center;display: block;}

</style>

</head>

<body>

 

<div class="fixed clearfix">

<a href="/" class="a1"><span>首页</span></a>

<a href="/" class="a2"><span>预订</span></a>

<a href="/" class="a3"><span>致电</span></a>

<a href="" class="a4"><span>微信</span></a>

<a href="/" class="a5"><span>地址</span></a>

</div>

 

</body>

</html>

    支付宝扫码领红包,不用多说,用过的人都知道,双赢的,你得红包,我得到同等推广红包,比如你扫到1元,我也得1元,大家得到的红包可以去实体店消费!新用户至少10元以上哦,每天都有!希望大家每天来本站扫码!感谢感谢!

    把打赏改成扫码红包了!支持本站就扫码下!


下一篇:用css实现文字的自动隐藏


上一篇:纯css的防止图片撑破页面的代码(图片自动缩放)


小提示:按 回车[Enter]键 返回,按 ←键 返回上一页, 按 →键 进入下一页。

网友评论(0条评论)

选择头像
     

新闻评论(共有 0 条评论)

手机访问

本站APP

联系我

加我微信