把每个页面包含固定在底部的导航栏(手机页面)
发布网友
发布时间：2022-05-05 04:36
共1个回答
热心网友
时间：2023-10-09 20:40
<footer>
<Link to="/" className="to-home" onlyActiveOnIndex={true} activeClassName="active">
<i></i>
<span>第一页</span>
</Link>
<Link to="/" className="to-yuni" activeClassName="active">
<i></i>
<span>第二页</span>
</Link>
<Link to="/" className="to-ihuan" activeClassName="active">
<i></i>
<span>第三页</span>
</Link>
<Link to="/" className="to-user" activeClassName="active">
<i></i>
<span>第四页</span>
</Link>
</footer>
</div>
/*底部导航条*/
.home-footer{ background-color: #fff; border-top: 1px solid #e5e5e5; padding: 0.16rem 0;}
.home-footer.fixed{ bottom:0;}
.home-footer a{ display:inline-block; width: 25%; height: 100%; float: left; text-align: center;}
.home-footer a i{ display: block; height:0.64rem;text-align: center; margin-right: 0;}
.home-footer a span{ display: block; color: #999;}
.home-footer .to-home i{ background: url(../images/) no-repeat center center; background-size: 23%;}
.home-footer .to-yuni i{ background: url(../images/) no-repeat center center; background-size: 26%;}
.home-footer .to-ihuan i{ background: url(../images/) no-repeat center center; background-size: 26%;}
.home-footer .to-user i{ background: url(../images/) no-repeat center center; background-size: 26%;}
.home-footer a.active span{ color: #f44236;}
.home-footer .to-home.active i{ background: url(../images/) no-repeat center center; background-size: 23%;}
.home-footer .to-yuni.active i{ background: url(../) no-repeat center center; background-size: 26%;}
.home-footer .to-ihuan.active i{ background: url(../images/) no-repeat center center; background-size: 26%;}
.home-footer .to-user.active i{ background: url(../images/) no-repeat center center; background-size: 26%;}
.return-top{ display: block; width: 1.3rem; height: 1.3rem; border-radius: 50%; position: fixed; bottom: 1.8rem; right: 0.2rem; background:rgba(0,0,0,0.3) url(../images/) no-repeat center center; background-size: 50%;}
单位用的是rem,换算采用的是淘宝的flexible插件
